POR T FO L I O
Yue Feng 2020
2021
Contents
UI 界面交互设计 Design Brief 设计简介 ..........................................................................................................4 User Research 用户研究 .......................................................................................................5 Competitor Analysis 竞品分析 ............................................................................................7 Prototype 交互原型 Handsketch Ideas 手绘概念 ....................................................................................8 Low Fidelity Prototype 低保真抽象原型 ..............................................................10 High Fidelity Prototype 高保真细节原型 ............................................................17 Mockup 实物模型 ....................................................................................................21
UX 用户体验设计 Design Brief 设计简介 .........................................................................................................23 Persona 用户画像 ................................................................................................................24 Handsketch 手绘概念表达 .................................................................................................26 Usability Test 可行性测试 ...................................................................................................28 Storyboard 故事板 ..............................................................................................................29 Prototype 设计原型 Prototype1.0.............................................................................................................31 Prototype2.0...........................................................................................................32 Prototype3.0...........................................................................................................34 Mockup 实物模型 ..................................................................................................36
UI 界面交互设计项目 对接澳大利亚悉尼非营利难民救助性质餐饮教培企业
交互原型网址：
https://www.figma.com/proto/PKp7c7N88SoVToAJ7HJ378/Ipad?node-id=47%3A4&starting-point-node-id=2%3A2
iPad version 2-Figma High Fidelity Prototype
This version is based on version 1 and improved accroding to self-evaluation as well as client feedback (see Appendix for more: miro discussion board). Please see annotations for details.
recipe-search page self-evaluation
the previous "refine search" takes too much space at the left and waste alot vacant space, so displayed as a pop up legend here Key improvements
1.middle-eastern inspired Color scheme try-on
2.Visiliazation improvement (Figma/high-fi is quite different from Balsamiq) self-evaluation+user test
Here I came up with 5 design combination for navigation bar and ask friends for general feeling. Home
Recipes
Chefs
Join Us
Home
Recipes
Chefs
Join Us
Home
Recipes
Chefs
Join Us
Home
Recipes
Chefs
Join Us
Home
Recipes
Chefs
Join Us
Not engough color contrast so hard to read the selected icon.
2. Good and Strong color contrast.
3. Even stronger contrast for selected and unselected buttons. The selected icon is well-highlighted.
4. Simple and beautiful design but not enough color contrast for the selected icon.
5. The Simplest (selected)
Popularity Chefs Latest Ingredients Any
self-evaluation
"like" on the browse stage may not make much sense when users first see a new recipe without knowing much details, so add bookmark to save that user go through and check it later
client feedback
some recipes are shown as locked to distinguish free/paid recipes
self-evaluation
hierachical recipe info (through font size, color and layout) box offer quick go through client feedback
new added spread out navigation footer to be readable and easy accesseble, offer users more context;also make it clear of an iPad app to avoid ambiguity between web/app
iPad version 2-Figma High Fidelity Prototype This version is based on version 1 and improved accroding to self-evaluation as well as client feedback (see Appendix for more: miro discussion board). Please see annotations for details.
recipe-video page
recipe-instructions page
self-evaluation
The recipe main info box is set overlay on hero image instead of being seperate and adjacant to each other in order to improve space effeciency also visilbility
self-evaluation
keep playing with image portion to test legibility
client feedback
get rid of "Download" and keep "like" and "save" for a free recipe version1.5
as client suggested (see more in Apendix pp.34)
iPad version 2-Figma High Fidelity Prototype This version is based on version 1 and improved accroding to self-evaluation as well as client feedback (see Appendix for more: miro discussion board). Please see annotations for details.
recipe-comments page
recipe-add comments page self-evaluation "back" and "share" buttons always stick on top to follow conventions and prevent error
self-evaluation
This button is set up on the top in order for users to post things directly not need to scroll all the way down to find it. Also users can random browse, like or join discussion.
iPad Final Version-Figma Interactive Prototype This version is based on version 2 and version 2.5 (see appendix for more).
Verison 2 + Final Client meeting feedback (with major chanegs)=Version 2.5
Version 2.5+Extra client feedback+Think-Aloud+Heuristic Evaluation (with minor changes)=Version 3 (Final)
Please see annotations for details.
d
All Recipes
recipe-search page self-evaluation
add logo to remind users of the context Key improvement
1.Color scheme adjustment to subttle red (represent middle-easter spice) based on client feedback and collaboration with teammates( keep the como with yellow so that craete a welcoming sense)
2.Details optimization (more realistic, professional etc.)
3.sections reallocation (eg. "you might also like" recommendation part)
5:54 PM Mon Mar 22
What are you craving?
Home
Middle Easten Mains
Middle Easten Culture
Classic Homemade Falafel
75 mins
Pita Bread
Join Us
Middle Easten Appetizers
Cheese Appetizers
10 mins
Middle Eastern Cheese Board
20 mins
Join Us
Chefs
3 （F
)
Chefs
db k
client fee ac +self-evaluation
bvious sign by grey-out recipes and red-background text to distinguish free and paid recipe. However, users can still browse to have a general look of all recipes instead of seeing some grey cover imgaines directly.
O
Home Recipes
...
If you love to graze on lots of different food tid-bits and offerings during gatherings, then cheese boards and appetizer platters are definitely for you!
6 mins
over strong and may more applied on web design
Home
more categories
Subscribe To Unlock
Hummus With Tahini
Recipes
Ingredients
l k d/paid recipe” interaction:
version selection
over strong and may more applied on web design
Home
Chefs
“ oc e
Chefs
Recipes
:
“save”
interaction
t
2.5
Easy&Quick
user test+self-evaluation
Instead of being fixed somewhere and displaying all the time to take space (iPad is not web which has the largest screen and the most space for all content shown at the same time), the final advanced search fuction are pop-up suggestive buttons when users click general search bar and which guide users to further pages with details
self-evaluation+user tes I ve came up with 5 design combination for navigation bar and ask friends for general feeling.
'
h
“a vance searc “ interaction
Join Us
version inal selection minimalist design and such design can seen on many current app designs
Recipes
Chefs
Join Us
self-evaluation
subtle design rounded corner with dropshaow to make each recipe like di erent "page" with a bit more texture, and in the meantime remain minimalism and professional
ff
iPad Final Version-Figma Interactive Prototype This version is based on version 2 and version 2.5 (see appendix for more).
Verison 2 + Final Client meeting feedback (with major chanegs)=Version 2.5
Version 2.5+Extra client feedback+Think-Aloud+Heuristic Evaluation (with minor changes)=Version 3 (Final)
Please see annotations for details.
verison2.5 client feedback
highlight exotic ingredients as client suggested to give a bit more introduction to further promote Middle-wastern culture and feature of client's corporation
recipe-instructions page
recipe-video page
5:54 PM Mon Mar 22
5:54 PM Mon Mar 22
Classic Homemade Falafel
Classic Homemade Falafel
Prep: 15 mins
Cook: 75 mins
Servings: 4 to 6 servings
Prep: 15 mins
Cook: 75 mins
Servings: 4 to 6 servings
Chef Tashi See my story Video saying Hi!
Chef Tashi Video saying Hi! See my story
client feedback
Indicate more information about exotic ingredients through "see more" as client is willing to see more information but afraid to overcomplex my interface, this setting also further promote Middle-wastern culture and amphsize feature of client's corporation
Ingredients
1 cup dried chickpeas
1 large onion, chopped
2 cloves garlic, chopped
3 tablespoons chopped parsley
1 teaspoon cumin
1 teaspoon coriander
1 teaspoon salt, or to taste
4 tablespoons flour
Pepper, to taste, optional
Oil for frying
Middle -eastern origins
Nutritional per serving
380
27g
Calories Fat
see more
see more
Chickpeas
Cumin
28g
8g
Carbs Protein
See Full Nutritional Guidelines
(Nutrition information is calculated using an ingredient database and should be considered an estimate.)
How To Make Classic Falafel?
Falafel is eaten throughout the Middle East and is a common street food. It is popular with vegetarians world-wide. Let’s see this video guided by our chef Tashi about how to make delicious and classic homemade Falafel!
self-evaluation
add a bit more introduction of "Falafel" on the top as guide language to offer more context of the recipe as well as Middle-eastern culture which may better help video watch
Gather the ingredients.
Middle Eastern Mains
Instructions
Video
Comment
Instructions
Vegetable Recipes
Video
Dinner
Comment
Place dried chickpeas in a bowl and cover with cold water. Allow to soak overnight.
user test
"Ingrediens/steps/tips/recommendations" are all able to scroll and seen one by one to avoid fix/scroll ambiguity and also ensure the most legibility especially when users are cooking (in real life people would want to see and follow specific cooking steps after finish preparation, so fixed ingredient section on the left hand side is not necessary any more)
client feedback
include chef info on the recip page as client expects and add video/story together which are able to link to “chef” section to promote chefs, their stories and also Middle-eastern culture
user test
"you might also like" recommendation section has been moved away from here to be at the bottom of instruction section which follows users habits and real world conventions
iPad Final Version-Figma Interactive Prototype This version is based on version 2 and version 2.5 (see appendix for more).
Verison 2 + Final Client meeting feedback (with major chanegs)=Version 2.5
Version 2.5+Extra client feedback+Think-Aloud+Heuristic Evaluation (with minor changes)=Version 3 (Final)
Please see annotations for details. recipe-comments page
recipe-add comments page
5:54 PM Mon Mar 22
5:54 PM
Mon Mar 22
self-evaluation
dd "save" button along with"back" and "share" to ensure users can save both inside recicpes and at the search page. The icons are consistent. A
Classic Homemade Falafel
based on research and study of current good social media examplar, improve to be more realistic layouting of "like" and "reply" buttons by solid icons, add "like" amount and "reply" text, creating a sense of on-going discussion and a active community
Prep: 15 mins
Cook: 75 mins
Servings: 4 to 6 servings
Chef Tashi
self-evaluation
Video saying Hi!
Comment Community
Video saying Hi!
See my story
Chef
See my story
Tashi
Share Your Experience
Leave A Comment
This looks amazing. Would I be able to use an air fryer? How long would that take? Reply 20 Angie
May 23, 2021
Tim
May 24, 2021
Hi! Yes... you can totally use and air fryer for these. Here is my suggestion: Air Fry at 375 degrees F for 5 minutes on each side. Spray a little oil oil on them prior to frying them. Reply 39
The recipe is super easy and delicious typing......
Save and Post
Ruchi
May 22, 2021
"T
1
self-evaluation
Also based on research and study of current good social media examplar, adding light grey spacing lines to be more realistic and have a sense of seperation
Homemade Falafel
Classic
Prep: 15 mins
Cook: 75 mins
Servings: 4 to 6 servings
Just follow the recipe and you’ll get the BEST falafel EVER! Thank you! Reply 102 I’ve tried numerous falafel recipes and this one is the best one by far. I won’t be looking for another. I liked the flavor and the texture. We had them in homemade pita with quick pickled turnips, a cucumber yogurt sauce, tahini, tomatoes, chopped lettuce and Videoa better starting point for the Comment Jim Instruction hot pepper rings. I would have liked salt in the recipe.. “to May 10, 2021 s taste” doesn’t really give a good place to start. I do like a bit more salt than some and I used about two teaspoons and it needed a little more for my taste!
q
tab
w #
@
caps lock
a
Instructions
shift .?123
z
x
f +
c
ey
Video =
v
(
g b
n
m
C
delete
”
k :
0
p
o ’
j ;
9
i
)
h /
8e
u
y *
er
7
6
t &
d -
5
r $
s %
4
3
e
"
Th
Th
e
h
2
omment
!
,
l
return
?
.
.?123
shift
Wireflow-Search and Read Recipes
Link: https://www.figma.com/proto/PKp7c7N88SoVToAJ7HJ378/Ipad?page-id=0%3A1&node-id=47%3A0&viewport=-417%2C522%2C0.42729058861732483&scaling=scale-down If an interaction doesn’t work, please go another random page and come back to try again.
tap somewhere else to exit 5:54 PM
Mon Mar 22
5:54 PM
Mon Mar 22
What are you craving? Classic Homemade Falafel
Prep:
15 mins
Cook: 75 mins
Servings: 4 to 6 servings
How
Chef Tashi
To Make Classic Falafel?
See my story
Video saying Hi!
How To Make Classic Falafel?
Middle Easten Mains
Falafel is eaten throughout the Middle East and is a common street food. It is popular with vegetarians
Middle Easten Culture
Classic Homemade Falafel
75 mins
world-wide. Let’s see this video guided by our chef Tashi about how to make delicious and classic
6 mins
Pita Bread
homemade Falafel!
5:07 / 15:28
Cheese Appetizers
Middle Easten Appetizers
10 mins
Hummus With Tahini
20 mins
Middle Eastern Cheese Board
Vegetable Recipes
Middle Eastern Mains
Instructions
Home
Recipes
Chefs
Dinner
Comment
Video
Join Us
5:54 PM
Mon Mar 22
5:54 PM
Mon Mar 22
5:54 PM
Classic Homemade Falafel
Classic Homemade Falafel
Prep:
15 mins
75 mins
Servings: 4 to 6 servings
15 mins
Cook: 75 mins
Servings: 4 to 6 servings
Chef Tashi
Ingredients
1 cup dried chickpeas
1 large onion, chopped
2 cloves garlic, chopped
3 tablespoons chopped parsley
1 teaspoon cumin
1 teaspoon coriander
1 teaspoon salt, or to taste
4 tablespoons flour
Pepper, to taste, optional
Oil for frying
Middle -eastern origins
380
see more
27g
Fat
28g
Carbs
Video saying Hi!
15 mins
Cook: 75 mins
Servings: 4 to 6 servings
Comment Community
Chef Tashi
See my story
Leave A Comment z
This looks ama ing. 2
should be considered an estimate.)
0
Would I be able to use an air fryer? How long would that take?
Reply
Angie
Y
0
Hi! es... you can totally use and air fryer for these. Here is my
The recipe is super easy and delicious typing......
suggestion: Air Fry at 375 degrees F for 5 minutes on each side. Spray a little oil oil on them prior to frying them.
Cumin
Tim
Gather the ingredients.
See my story
Video saying Hi!
Share Your Experience
8g
Protein
See Full Nutritional Guidelines
(Nutrition information is calculated using an ingredient database and
May 23, 2 21
Chickpeas
Prep:
Chef Tashi
See my story
Nutritional per serving
Calories
see more
Classic Homemade Falafel
Prep:
Cook:
Video saying Hi!
Mon Mar 22
39
Reply
0
May 24, 2 21
Save and Post "T
Ruchi
0
May 22, 2 21
1
q
tab
Interaction
(see more in Interactive Prototype)
Just follow the recipe and you’ll get the
102
BEST falafel EVER!
Thank you!
Reply
I’ve tried numerous falafel recipes and this one is the best one by far. I won’t be looking
x
for another. I liked the flavor and the te ture. Instructions
Video
quick pickled turnips, a cucumber yogurt sauce, tahini, tomatoes, chopped lettuce and
Comment
Place dried chickpeas in a bowl and cover with cold water. Allow to soak overnight.
We had them in homemade pita with
Jim
May 1
Videoa better starting point for the salt Instructions Comment hot pepper rings. I would have liked in the recipe.. “to
0, 2 021
taste” doesn’t really give a good place to start. I do like a bit more salt than some and I used about two teaspoons and it needed a little more for my taste!
Forward Flow Back Navigation
Drain the chickpeas and place them in a pot with fresh water. Bring to a boil.
-
x
5
r $
+
c
(
v
b
Video
;
n
m
p
o
delete
”
’
k :
0
9
i
)
j
h /
=
8e
u
y *
er
7
6
g
.?123
Instructions
Th
ey
t &
f
d
s z
4
e
#
a %
shift
"3
w @
caps lock
Th
he
2
l !
,
return
?
.
Comment
shift
Mockup
UX 用户体验设计项目
针对全球大流行疫情期间虚假信息泛滥——“信息大流行病”提出可行性解决办法
Mockup