Ixds5203 visualizing the human experience design document pages by Atif Nagi

THE MICRO-KITCHEN BIG IDEAS FOR SMALL SPACES

Professor Chris Quinn

Visualizing the Human Experience LC4D @ Lindsey Wilson College

Atif Nagi

M.A. Interactive Design

TABLE OF CONTENTS PROJECT BRIEF

RESEARCH 6 PERSONA 7

TASKS 9 USABILITY TESTING 8

EXPLORATION 10 IDEATION 11 KITCHEN SCHEMATICS 13 MINDMAP 15 SITEMAP 14 USER JOURNEY 16

SKETCHES 17 MICROWAVE 18 COOKTOP 19 OVEN 20 DISHWASHER 22 FRIDGE 21

SOLUTION DESIGN DESIGN PRINCIPLES DESIGN PROCESS

2326 24

WIREFRAMES 27 MICROWAVE 28 COOKTOP 30 OVEN 32 FRIDGE 34 DISHWASHER 36

COMPONENTS 38 ACTIONS 40 KNOB CONTROL 39 NAVIGATION 42

CONCLUSION 43 22

PROJECT BRIEF

NEW YORK CITY IT OFFERS EVERYTHING AT YOUR FINGERTIPS. BUT LIKE MANY METROPOLITAN AREAS ACROSS THE GLOBE, THOSE OPPORTUNITIES ARE ALSO MAKING OUR WORLD SMALLER.

The home size is decreasing while rent and mortgages are increasing. Even so, that modest space shouldn’t equate to a reduction in functionality, living standards or a reflection of personal style. This is the opportunity to impact the way people live, by being part of the design and engineering of this breakthrough appliance.

THE MICRO-KITCHEN BIG IDEAS FOR SMALL SPACES Kitchen Mission Design a functional micro-kitchen for a 7 feet x 25 inch space. What would your design look like? What features? What clever and creative solutions can you come up with? Connect all appliances to a counter screen (tablet), which provides a functional intuitive user experience of all devices without a lot of foot traffic.

The Impact Making the best of a small space isn’t a problem unique to NYC. A micro-kitchen gives urban dwellers an opportunity to optimize space in a savvy way. In partnership, we want to take your designs from mind to market—meaning this design could end up in homes across the globe!

RESEARCH

PERSONA PRIMARY GOALS Meal Preparation: Cook, bake, microwave, fry, small appliances, and kitchen utensils.

AMAL SMITH AGE OCCUPATION STATUS LOCATION

MOTIVATIONS

Accounting Assistant Single Mom Calgary, AB

TIER Prosumer ARCHETYPE Explorer Ambitious

Admired

Focused

Storage:

Incentive Fear Achievement Growth Power Social

DESIGN PREFERENCE

Intuitive, useful, efficient, environmentally friendly last but not least elegant appliances

FRUSTRATIONS

Refrigeration, freezer, pantry, cabinets,

Small kitchen space

drawer, and dining.

Busy lifestyle as a single mom

BIO

Cleaning/Waste disposal:

A Project by Atif Nagi

PERSONALITY Extrovert

Introvert

Sensing

Intuition

Thinking

Feeling

Judging

Perceiving

TECHNOLOGY IT and Internet Software Mobile Apps Social Networks

Amal is a single mom lives in small urban apartment in Calgary downtown. She is a full-time working multitasking mom. She manages work, home, social life, Kid’s school and extra curricular activities. She enjoys socializing and downtown life although she has to sacrifice the space. She never hesitates to learn something new and she is design savvy. She appreciates clean design in decor, technology, products and appliances. She interacts with technology i.e. (Hardware) macpro, Ipad, Ipod, Ipod mini, Iphone, smart tv, (Apps) Songza; Allrecipies, Lose it, Maps, Netflix, Weathernetwork; Whatsapp on daily basis.

Sink, dishwasher, recycle, garbage, crusher, and range hood.

“If I had a way to use kitchen appliances more efficiently, that would make my workload so much easier to manage.”

Amal’s primary goal is to manage cooking, storage and cleaning in a compact Kitchen space for active healthy lifestyle. Her secondary goal is to get extra help from technology, which enables her to stay connected with friends and household activities remotely while at work or on the go so she can spend less time in kitchen and enjoy quality time with her family and friends.

USABILITY TESTING AMAL

89%

RESEARCH

SANDRA

100%

I am a design savvy women and I loved the simplicity, consistency, colors, affordance of dial control, icons and appliance progress feedback.

79%

100%

I like the simplicity and learnability of the interface. Once you know how the dial works, you are good to go!

SABA

89%

SHAYAN

100%

I loved the overall simplicity, consistent dial control, icons, color, and process progress feedback. I wish I could access my music from kitchen.

Paper Prototype Results

100%

I canâ&#x20AC;&#x2122;t wait to see these devices in my kitchen. Will you develop them for me?

Interactive Prototype Results

TASKS MICROWAVE

RESEARCH

COOKTOP

OVEN

FRIDGE

DISHWASHER

1. Warm up your

3. Use the first

5. You want to bake

7. Change the

8. You want to

chicken plate for

burner to cook soup

a cake at 250F for

setting of beverage

clean your dishes

5 minute.

on medium heat.

20 minutes.

compartment to

on a normal cycle in

4. You felt heat so

6. Put oven to self-

fridge setting.

the night, which is

you want to turn on

cleaning mode.

2. You changed your mind now, so stop microwave before

the range hood fan.

after 6 hours from current time.

finish time and then reset timer.

EXPLORATION

IDEATION

EXPLORATION

Guidelines

drawer, food compartments, oven, microwave and

• 7 feet wide x 25 inch deep X 36 inch

a smart app.

• A consumer must be able to refrigerate, cook,

• The refrigerator is equipped with sensors to

and clean with this design. Must include the

notify smart phone or order grocery from store

following items: Cooking surface, Microwave and/

e.g. eggs, milk or juice from fridge and food

or an Oven, Sink, Fridge.

compartments.

• All appliances should connect to a main

• Refrigerator and non-refrigerator food

“counter screen” that will be located on the

compartments of dairy, meat, vegetable and

counter top (embedded and recessed)

spices will talk to app and based on available ingredients app will suggest recipes.

Ideation

• User can select a recipe and order to cook

• Integrated user interface for appliances

remotely via app.

i.e. Microwave, Cooktop, Oven, Fridge and

• User can plan recipes for future and app will

Dishwasher.

notify to buy or order missing ingredients.

• This kitchen is designed for NY or any urban

• User can change interface to multiple languages,

big city downtown life style, to provide solution

as New York City is the most linguistically diverse

for expensive compact apartment with fast paced

city in the world. As many as 800 languages are

social and working environment.

spoken in New York City.

• It is a compact combo of freezer, refrigerator, 11

IDEATION

EXPLORATION

Counter screen

Smart oven/microwave

Plan a meal

• Smart microwave/oven with compartments of

• Select recipe > Check ingredients (Fridge &

ingredients connected with fridge.

pantry) > send shopping list to mobile or grocery

• Capability of cooking remotely through app.

store for missing ingredients. Face recognition • Suggests recipe based on available ingredients. Internet connectivity • Connect to Internet for recipes, cooking video tutorial, sharing with friends and family.

Cooktop • Induction heating system with no designated

Dishwasher • Cleaning and storage together. • Cleans in small cycle i.e. set of utensils for each meal e.g. one spoon, folk, knife, glass, serving and dinner plate. • Intake loading and ejecting slots. • It will have normal cycle, load and unload capability.

burner areas, burner area depends upon the size of utensil. • Foldable extended table to help cutting, chopping and other kitchen work.

KITCHEN SCHEMATICS

EXPLORATION

Front View

Fully functional 7 feet wide x 25 inches deep microkitchen with standard appliances i.e. microwave, cooktop, oven, fridge and dishwasher, integrated with counter screen.

Top View 13

SITEMAP

EXPLORATION

The visualization of hierarchy information of the system. 14

MINDMAP

EXPLORATION

A relationship of appliances in the counter screen. 15

USER JOURNEY

EXPLORATION

User journey map illustrates the persona needs, the series of interactions that are necessary to fulfill those needs, and the resulting emotional states a user experiences throughout the process. This user journey map identifies the tasks persona performs in a daily kitchen cycle. 16

EXPLORATION

SKETCHES

MICROWAVE

EXPLORATION | SKETCHES

Iteration 1

Iteration 2

Iteration 3

Iteration 1:

Iteration 2:

Iteration 3:

• After researching several industry leader microwaves’ user interfaces I sketched out my initial concept. • Leveraged common input UI patterns of a numeric keyboard & numeric counter with a digital display in the center of the circle. • Mini-dashboard to preview appliance status & media centre.

• Improved user interface by grouping action and input elements. • Replaced touch screen i-pod style dial with old numeric counter for input. • Castoff mini-dashboard bar and introduced process icons in global bottom navigation bar for simpler user experience.

• Simplified UI, input elements and actions buttons. • Moved digital display to top of touch screen dial. • Removed start, pause and reset button and moved these actions to central singular dial button.

COOKTOP

EXPLORATION | SKETCHES

Iteration 1

Iteration 2

Iteration 3

Iteration 1:

Iteration 2:

Iteration 3:

• Borrowed UI pattern numeric counter with a digital display of temperature in the center of the circle for inputs from microwave for consistency and learnability. • Mini-dashboard to preview appliance status and media centre.

• Improved user interface elements i.e. labels and input elements. • Removed numeric counter and replaced it with touch screen i-pod style dial for input. • Removed digital temperature display by action labels i.e. MIN, OFF & MAX.

• Improved labels to industry standard intuitive labels i.e. HI, OFF & LO. • Removed start and stop button and moved these interactions to central singular dial button for simpler and intuitive user experience.

OVEN

EXPLORATION | SKETCHES

Iteration 1

Iteration 2

Iteration 3

Iteration 1:

Iteration 2:

Iteration 3:

• Borrowed UI pattern numeric counter with a digital display of temperature in the center of the circle for input from microwave for consistency and learnability. • Mini-dashboard to preview appliance status and media centre.

• Improved user interface elements i.e. labels and input elements. • Removed numeric counter and replaced it with touch screen i-pod style dial for input. • Castoff dashboard bar and introduced process icons in global bottom navigation bar for simpler user experience.

• Simplified UI, input elements and actions buttons. • Moved digital temperature display to top of touch screen dial. • Removed start and stop button and moved these interactions to central singular dial button for simpler and intuitive user experience.

FRIDGE

EXPLORATION | SKETCHES

Iteration 1

Iteration 2

Iteration 3

Iteration 1:

Iteration 2:

Iteration 3:

• Reimagined interactions to control 6 fridge compartments to multiple settings i.e. freeze, fridge, veggie, dairy, drinks and cooked items for intuitive user experience.

DISHWASHER

EXPLORATION | SKETCHES

Iteration 1

Iteration 2

Iteration 3

Iteration 1:

Iteration 2:

Iteration 3:

• After researching several industry leader dishwashers’ user interfaces I sketched out my initial concept. • Used dishwasher cycle actions. • Display dishwasher cycle display in the middle. • Mini-dashboard to preview appliance status and media centre.

• Improved labels and rearrange actions. • Castoff dashboard bar and introduced process icons in global bottom navigation bar for simpler user experience.

• Reimaged interactions and simplified UI input elements. • Borrowed touch screen i-pod style dial pattern from other devices for consistency and learnability point of view. • Moved cycle, start and stop actions to central singular dial button for simpler and intuitive user experience.

SOLUTION DESIGN

DESIGN PRINCIPLES

SOLUTION DESIGN

CLEAR

AFFORDANCE

CONSISTENT

The information of the system is straight forward & understandable with clear navigation, simple language (labels), and icons.

I used Explicit Affordance signalled action buttons by language, Negative Affordance in dial & fridge interactions, Metaphor Affordance by using a real-world knob control as a metaphor.

The consistent use of navigation and action elements i.e. knob control, interactions, labels, on/off states and global actions.

FOCUS

ACCESSIBILITY

WAYFINDING

The UI is singular and focused. It is intuitive because it focuses on basic tasks of appliances e.g. warm-up, cook, bake, fan and clean dishes.

Applied W3C standards e.g high contrast, B/W design, Font size readability and visual hierarchy.

Users can find their way by landmark icons, well-structured paths, and less choices. They know where they are, what they can do, where they are going and where theyâ&#x20AC;&#x2122;ve been through icons,

24 24

SOLUTION DESIGN

WIREFRAMES

MICROWAVE

SOLUTION DESIGN | WIREFRAMES

Iteration 1

Iteration 2

Iteration 3

Iteration 1:

Iteration 2:

Iteration 3:

• Start adding details to final concept sketches. • Introduced visual metaphor affordance of a 3D dial for intuitive user experience. • Standard icons for global navigation.

• Introduced icons for action buttons for intuitive user experience.

• Improved action icons by adding circular affordance of a button. • Created multiple process screens for user flow and usability validation.

SOLUTION DESIGN | WIREFRAMES

MICROWAVE PROCESS SCREENS A

1. Microwave (start) A

2. Microwave (pause) B

3. Microwave (reset) C

LAUNCH PROTOTYPE 4. Popcorn A

5. Popcorn B

COOKTOP

SOLUTION DESIGN | WIREFRAMES

Iteration 1

Iteration 2

Iteration 3

Iteration 1:

Iteration 2:

Iteration 3:

• Introduced visual metaphor affordance of a 3D dial for intuitive user experience. • Designed standard LO-HI heat crescent style dial graphic for intuitive user experience.

• Simplifies UI by removing 1-2-3 icons and Introduced flame icon for ON/OFF/Warm states.

• Created multiple process screens for user flow and usability validation.

SOLUTION DESIGN | WIREFRAMES

COOKTOP PROCESS SCREENS A

1. Cooktop (on-state) A

2. Cooktop (off-state, warm) B

3. Cooktop (off-state, light) C

LAUNCH PROTOTYPE 4. Cooktop (off-state, light) D

OVEN

SOLUTION DESIGN | WIREFRAMES

Iteration 1

Iteration 2

Iteration 3

Iteration 1:

Iteration 2:

Iteration 3:

• Improved button labels and their grouping. • Borrowed heat crescent graphic from cooktop for intuitive user experience.

• Introduced icons for action buttons for intuitive user experience.

• Improved action icons by adding circular affordance of a button and temperature button. • Created multiple process screens for user flow and usability validation.

SOLUTION DESIGN | WIREFRAMES

OVEN PROCESS SCREENS A

1. Bake (set temp) A

4. Timer A

2. Bake (preheat) B

5. Timer (set time) B

3. Bake (timer preview) C

5. Timer (reset) C

FRIDGE

SOLUTION DESIGN | WIREFRAMES

Iteration 1

Iteration 2

Iteration 3

Iteration 1:

Iteration 2:

Iteration 3:

• Start adding details to final concept sketches • Improved button labels and their grouping. • Standard icons for global navigation.

• Introduced icons for action buttons for intuitive user experience. • Rearranged layout by placing compartments in the center and fridge actions groups on both sides.

• Improved action icons by adding circular affordance of a button. • Created multiple process screens for user flow and usability validation.

SOLUTION DESIGN | WIREFRAMES

FRIDGE PROCESS SCREENS A

1. Fridge A

2. Fridge (selection) B

3. Fridge (selection) C

LAUNCH PROTOTYPE

DISHWASHER

SOLUTION DESIGN | WIREFRAMES

Iteration 1

Iteration 2

Iteration 3

Iteration 1:

Iteration 2:

Iteration 3:

• Start adding details to final concept sketches • Improved button labels and their grouping. • Introduced visual affordance of a 3D dial for intuitive user experience.

• Introduced icons for action buttons for intuitive user experience. • Simplified dishwasher actions.

• Improved action icons by adding circular affordance of a button. • Created multiple process screens for user flow and usability validation.

SOLUTION DESIGN | WIREFRAMES

DISHWASHER PROCESS SCREENS A

1. Dishwasher (cycle) A

4. Timer A

2. Dishwasher (cycle off) B

5. Timer (set time) B

3. Dishwasher (timer preview) C

5. Timer (reset) C

SOLUTION DESIGN

COMPONENTS

KNOB CONTROL

SOLUTION DESIGN | COMPONENTS

Knob (timer)

Knob (temp) Knob Affordance

EVOLUTION Numeric counter

Touch dial with digital display inside

Touch dial with digital display outside

Touch dial evolution

Knob dial 37

ACTIONS

SOLUTION DESIGN | COMPONENTS

MICROWAVE

add

60 Sec

30 Sec

60 sec

Popcorn

Potato

Pizza

BROIL

BAKE

GRILL

Broil

Bake

Grill

Freezer

Fridge

Defrost

30 sec

OVEN

Timer

Delay

Temp

FRIDGE

Vegetable

Beverage

Dairy

Ice 38

SOLUTION DESIGN | COMPONENTS

DISHWASHER

Normal

Delicate

Heavy Duty

Rinse

Dry

Lock

Setting

Light

Fan

GLOBAL Self Cleaning

NAVIGATION

SOLUTION DESIGN | COMPONENTS

NORMAL STATE

ON STATE

PROCESS STATE

CONCLUSION

USER CENTERED DESIGN PROCESS

1. Initial Research & Ideation

4. Sitemap

2. Kitchen Schematics

5. Mindmap

CONCLUSION

3. Persona & Task Analysis

6. User Journey 42

CONCLUSION

A full UX interaction design process was explored in the micro kitchen design from research, ideation, exploration, define, design, prototype and usability validation. 7. Concept Evolution Multiple iterations

9. Design Evolution Multiple iterations

8. Concept Validation Paper usability testing

10. Design Validation

Interactive usability testing

The three-cycle interactive process with paper and interactive prototype usability validation refined the product. After multiple iterations I achieved 100% effectiveness, efficiency and satisfaction through user flow interactions, intuitive UI, labels, and icons of the system, which was supported and validated by usability tests. 43