2 UXD. Ermi Isais / 2016 /

Size: px

Start display at page:

Download "2 UXD. Ermi Isais / 2016 /"

Hugh Holmes
6 years ago
Views:

1 2 UXD 8 _+ Ermi Isais / 2016 /

2 Project Statement Many people, regardless of their fitness levels and health food knowledge, need motivation to reduce their junk food intake, keep fit, get fit and curb their junk food habits.

3 Meet Richard

4 Richard likes to go to the gym. Most times.

5 Richard likes to go to the gym. Most times. but he also likes to eat junk food. sometimes.

6 Richard likes to go to the gym. Most times. but he also likes to eat junk food. sometimes. how can Richard find out what he needs to do to burn Those calories? any time.

7 Let s find out Richard Jack From our Participants Chantelle Ashleigh

8 Richard Jack Chantelle Ashleigh Occupation Manufacturing Team Leader National Sales Manager Stay at home Mum (Freelance Designer) Junior Medical Receptionist Background 37 years Married, 2 children Shift work (sleep deprived) Martial arts training Part time personal trainer 33 years Married, 2 children High pressure job Eats fast food weekly Plays soccer weekly 29 years Married, 2 children Works from home Maternity leave Used to be fit 21 years Single, living at home Active social life Recent interest in health and fitness GYM: 2-3 times a week GYM: 2-3 times a week GYM: doesn t have time to go GYM: 3 times a week Goals Cut down on junk food Less take away food Drink more water Cut down on regular fast food Increase veg and fruit intake Planned, healthy meals I just tell myself to cut down It s a conscious decision Improve both fitness and food intake overall I m interested to see how I can change/improve, feel better

Richard Jack Chantelle Ashleigh Exercise is more for When I m at the

If my mind I feel like I m gaining motivation or time towards

If I had it feels rewarding. body will be OK.

9 Richard Jack Chantelle Ashleigh Exercise is more for When I m at the gym, I don t have Now that I m working the mind. If my mind I feel like I m gaining motivation or time towards something, is right, then my a competitive edge to exercise. If I had it feels rewarding. body will be OK. ahead of all the more time away I feel good. I live by Just do it. lazy people not from my kids, I d be working out. exercising more.

Insights Richard and Jack confident and proud when talking about their fitness regime. When talking about junk food, they said it matter of factly, knowing they could burn it off quickly or soon.

10 Insights Richard and Jack confident and proud when talking about their fitness regime. When talking about junk food, they said it matter of factly, knowing they could burn it off quickly or soon. While Chantelle and Ashleigh seemed embarrassed when admitting what junk food they ate. Although, they were at different fitness levels, both felt guilty after eating junk food. Those who were more active, displayed more confidence and were more positive in their outlook.

11 USer flow User Clicks on ios phone app Clicks Search icon Enters food name Clicks Search button search results image view Selects food image Clicks Calculate exercise button Exits ios phone app Back to Search views exercise options Exits ios phone app User flow shows the path or paths a user can take to complete a task. Pages show up in viewing order for the user, not with a categorical hierarchy.

Competitive analysis Nogo Fooducate Eat this, not that!

control by training them to select healthy images in the app, which

App that helps people get motivated about improving their diet in a

App game providing nutritional information about grocery food informing

12 Competitive analysis Nogo Fooducate Eat this, not that! Home remedy shop Why they exist App game helps users exercise mental control by training them to select healthy images in the app, which helps them make healthy choices in real life. App that helps people get motivated about improving their diet in a supportive, community environment. App game providing nutritional information about grocery food informing why they should or shouldn t eat certain food. Simple, interactive online calculator. Users can find out how much exercise it would take to work off each meal. Calorie Calculator / Tracker customised Exercise options side by side food comparison Nutritional content More info Usability Modern visual design

13 Site map Home My Profile Search My Favourites Menu Edit my profile low intensity exercise Food hunts Settings Recent food hunts med intensity exercise Fitness Tips Privacy Calorie Tracker high intensity exercise Nutrition Tips Feedback Site map differs to a user flow, where it is the hierarchical structure of a site organised by categories. Exercise Tracker Recipe tips Video fitness Videos

14 paper Prototype Landing page Search Search by brand / Category Search results list Search results detail More info Landing page Quick Search / Sweet or savoury Search results list Search results detail More info Paper prototyping is a widely used method in the user-centered design process that helps developers to create software that meets the user s expectations and needs creating rough, hand-sketched, drawings of an interface to use as prototypes, or models, of a design. While paper prototyping seems simple, this method of usability testing can provide a great deal of useful feedback which will result in the design of better products.

15 Feature prioritisation MINIMUM VIABLE PRODUCT MVP Feature Quick Search Refined Search Calorie convertor > exercise calculator User profile Search results image view User Goal I m at a cafe and I m about to purchase a brownie, but there s no dietary information on display. I want to find out how many calories are in this brownie before I make my purchase. The search results came back with various portion sizes and flavours of brownies. I need to find the exact one or close to it so I can calculate the calories accurately. I want to find out how much exercise I need to do to burn the calories I may consume. To find out what type of exercise I need to do to burn those calories, I should have a customised profile so the app can calculate the exercise as accurately as possible based on my level of fitness. I want to be able to see the food image quickly and not spend time reading a list.

16 Rationale 5 key features were selected based on user testing. The sole purpose of the product customised food search which converts junk food to fitness activity in a large image format. Customised user profiles allow accurate calculations matching the user s current fitness level.

17 Product Vision Board Project Proposal Vision Target Group Needs Product Business Goals Inspire and help motivate people of different levels of fitness to gain daily knowledge. Showing shocking nutritional content aims to motivate users to change their junk food habits and see how much fitness activity they need to do to burn those consumed calories. Time poor people who eat junk food on-the-go, but genuinely want to improve their diet. Range from people who are very active to no exercise at all. Tend to snack on junk food depending on their moods, time of day and are trying to make small improvements. Solves the problem of providing nutritional content in a quick, onthe-go app. Saves people time reading packaging, this app provides a quick food search, converts food into fitness activity for the amount of calories needed to be burned if consumed. Benefits time poor users convenient, on-the-go, quick search/reference app and calculating total calories instantly. It is a junk food calculator. It stands out because it offers customised content based on a user s profile. It is feasible to develop the product because nutritional information and how that s converted to fitness activity is already available. Both need to be developed into an simple, quick search format that is convenient for the user to use daily. It benefits the company by motivating users to keep coming back, through a points system and track their progress. Business goals are to increase functionality: Daily Fitness Tips, or Recipes they can do at home as healthier food options, partnering with major food chains. Fitness demos can be supported by major fitness franchises and can cross promote gym classes mentioned in the fitness video demos.

18 Annotated wireframes 750 pixels wide 750 pixels wide 750 pixels wide 750 pixels wide Landing page new user / Create account page new user / Welcome page 1 new user / Welcome page 2 1 BURN logo 2 Log in button BURN LOGO Back button 2 BURN logo BURN LOGO Back button 2 BURN logo 1 BURN LOGO 2 1 Back button 2 BURN logo BURN LOGO 1 3 Join now button Password First Name Last Name Heading Subheading Close button 4 Heading text 5 Subheading text 6 field 7 Password field Heading Subheading Category 1 Category Heading text 4 Subheading text 5 Category 1 button 6 Category 2 button 7 Category 3 button Heading Body copy. Body copy. Body copy. Body copy. Body copy. Body copy Heading 1 4 Body text 5 Feel the burn button Date of birth 10 Select country 11 8 First name field Category 3 7 Log in 2 3 Join now Create account 12 9 Last name field 10 Date of birth field Feel the burn 5 11 Select country dropdown 12 Create account button 750 pixels wide 750 pixels wide 750 pixels wide 750 pixels wide new user / Welcome page 3 new user / Welcome page 4 Search Page Search results page BURN LOGO 1 2 Heading Subheading Back button 2 BURN logo 3 Icon 4 Heading text 5 Subheading text 6 Get started button BURN LOGO 1 2 Heading Category 1 Category 2 1 Back button 2 BURN logo 3 Heading text 4 Category 1 button 5 Category 2 button 1 BURN LOGO 2 3 Search 4 1 Back button 2 BURN logo 3 Menu 4 Search Heading text 5 Enter food field 6 Search button 1 BURN LOGO 2 3 Search Result 1 of 1 4 Food name 150g Back button 2 BURN logo 3 Menu 4 Search results copy 5 Food image 6 Food name text Get started 6 Enter food Search 5 6 Enter food refine Search or Search Enter food field 8 Refine search button 9 Search button

19 User testing medium Hi-fidelity Prototype Su Dami

20 1 2 3 User test med-hifidelity prototype 3.0 Participants Both Sue and Dami felt the first 6 welcome screens were easy to use, simple, clean design and flowed well and navigated through all screens with ease. Su Dami

User test med-hifidelity prototype 4 5 6 3.

21 User test med-hifidelity prototype Participants Both Sue and Dami felt the first 6 welcome screens were easy to use, simple, clean design and flowed well and navigated through all screens with ease. Personal touch in the text. Su Dami

User test med-hifidelity prototype 7 8 9 3.0 earch button.

Dami onfused with having both C Refine Search and Calculate Exercise

earch Results heading font size S too small users weren t aware what

22 User test med-hifidelity prototype earch button. S Search Icon sufficient. Participants Su Wants text instructions. Dami onfused with having both C Refine Search and Calculate Exercise button on same screen. earch Results heading font size S too small users weren t aware what screen they landed on. W ants More Info button on the Food Item. S ide by side comparison and felt it was easy to understand.

23 Insights Take aways Iterate 3.0 Both users found the prototype easy to use. Overall, they had a positive experience. I observed Su and Dami using left, right swipe gestures instead of the intended click for buttons. Simple and clean visual design with a clear visual hierarchy assisted in making the prototype intuitive for the users. Although, the intention was for the prototype to be have basic functionality, both Su and Dami wanted More Info on food searches. Include a More Info button. Remove or move Refine Search button. Add instruction text on the Search screen.

24 Feedback medium Hi-fidelity Prototype Simple, clean design. Can you include height and weight? Can I see more info once I ve searched for food? Feels intuitive and easy to use. Doesn t need a Search button.

User test 1 2 3 4 5 6 7 8 hi-fidelity prototype Richard and Rian really

easy to use. Both users navigated through the screens with ease. 4.

Unnecessary button Search Icon sufficient.

25 User test hi-fidelity prototype Richard and Rian really liked the welcome screens, use of colour, clean and simple layout, felt easy to use. Both users navigated through the screens with ease Clicked logo (not a button). Unnecessary button Search Icon sufficient. Unnecessary button Search Icon sufficient. Confused by Sneaker Icon s functionality. Food imagery. Nutritional info displayed clearly. 3 exercise options and flicked through all 3 repeatedly. Felt colour was smart and simple solution to show the different levels. 17 Participants Richard Rian

Insights Take aways Iterate 4.0 Both users found the prototype easy to use. Overall, had a positive experience. I observed Richard and Rian using left, right swipe gestures which are now incorporated.

26 Insights Take aways Iterate 4.0 Both users found the prototype easy to use. Overall, had a positive experience. I observed Richard and Rian using left, right swipe gestures which are now incorporated. Simple and clean visual design with a clear visual hierarchy assisted in making the prototype intuitive for the users. Both were confused by the Sneaker icon which was meant to represent Calculate Exercise. Remove Sneaker Icon. Add Log Out screen to complete the flow. Both stopped at the More Info page.

Iteration 1 2 3 4 5 6 7 8 hi-fidelity prototype 4.

Users can calculate exercise once on the More info screen.

27 Iteration hi-fidelity prototype Removed colour from logo so it doesn t get confused as a button. Removed button. Search Icon only. Removed button. Search Icon only. Removed Sneaker Icon. Users can calculate exercise once on the More info screen Changes to Screens: Additional screens: Additional Screens:

28 What i originally assumed...

29 ...users are happy with a very basic app, search function and limited functionality

30 ...And what is proven through testing and discovery

31 ...users want customisation in their onboarding, more choices in the exercise options and a more tailored experience.

32 4.0 Prototype invision App Video demo

33 Next Steps

34 Thank you Ermi Isais / 2016 /

The SmartWithFood app, for food to suit your needs

The SmartWithFood app, for food to suit your needs The project Are you a vegetarian or vegan? Are you looking for gluten-free or lactose-free products? Or do you just want to quickly and easily find the