Yue_UX/UI Portfolio

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