UXD8

2

Ermi Isais / 2016 /

_+

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.

Meet Richard

Richard likes to go to the gym.

Most times.

Richard likes to go to the gym.

Most times.

but he also likes to eat junk food.

sometimes.

Richard likes to go to the gym.

Most times.

how can Richard find out what he

needs to do to burn Those calories?

any time.

but he also likes to eat junk food.

sometimes.

JackLet’s find outFrom our Participants

Richard

Chantelle Ashleigh

Jack Chantelle AshleighRichard

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

GYM: 2-3 times a week

• 33 years • Married, 2 children • High pressure job • Eats fast food weekly • Plays soccer weekly

GYM: 2-3 times a week

• 29 years • Married, 2 children • Works from home • Maternity leave • Used to be fit

GYM: doesn’t have time to go

• 21 years • Single, living at home • Active social life • Recent interest in health

and fitness

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

Jack

Exercise is more for the mind. If my mind is right, then my body will be OK. I live by “Just do it”.

When I’m at the gym, I feel like I’m gaining a competitive edge ahead of all the lazy people not working out.

I don’t have motivation or time to exercise. If I had more time away from my kids, I’d be exercising more.

Now that I’m working towards something, it feels rewarding. I feel good.

Chantelle AshleighRichard

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.

User Clicks on iOS phone app

Clicks Search icon

search results image view

Clicks Calculate exercise button

Clicks Search button

Back to Search views exercise options

Exits ios phone app

Exits ios phone app

Enters food name

Selects food image

USer flow

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! 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

My Profile

Edit my profile

Recent food hunts

Calorie Tracker

Exercise Tracker

Fitness Tips

Nutrition Tips

Recipe tips

Video fitness Videos

Food hunts

My Favourites

Privacy

Feedback

Settings

Menu

Home

Search

low intensity exercise

med intensity exercise

high intensity exercise

Site map

Site map differs to a user flow, where it is the hierarchical structure of a site organised by categories.

paper Prototype

1.0

2.0

Landing page Quick Search / Sweet or savoury

Search results list Search results detail More info1 2 3 4 5

Landing page Search Search by brand / Category

Search results list Search results detail More info1 2 3 4 5 6

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.

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.

Feature prioritisation MVPMINIMUM

VIABLE PRODUCT

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.

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, on-the-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.

Product Vision Board

Project Proposal

1 Back button2 BURN logo3 Icon4 Heading text5 Subheading text6 Get started button

750 pixels wide

new user / Welcome page 3

HeadingSubheading

BURN LOGO1 2

3

4

5

Get started6

1 Back button2 BURN logo3 Heading text4 Category 1 button5 Category 2 button

750 pixels wide

Category 1 Category 2

Heading

BURN LOGO1 2

3

4 5

new user / Welcome page 4 Search results page

1 Back button2 BURN logo3 Menu4 Search results copy5 Food image6 Food name text7 Enter food field8 Refine search button9 Search button

750 pixels wide

BURN LOGO

Search

refine Search

Search Result 1 of 1

Enter food

or

Food name150g

1 2 3

4

5

6

7

8

9

1 Back button2 BURN logo3 Menu4 Search Heading text5 Enter food field6 Search button

750 pixels wide

Search Page

BURN LOGO

Search

Search

Enter food

1 2 3

5

6

4

1 Back button2 BURN logo3 Close button4 Heading text5 Subheading text6 Email field7 Password field8 First name field9 Last name field10 Date of birth field11 Select country dropdown12 Create account button

new user / Create account page

750 pixels wide

BURN LOGO

Create account

HeadingSubheading

Email

Password

First Name

Last Name

Date of birth Select country

1 2 3

4

5

6

8

7

9

1110

12

750 pixels wide

BURN LOGO

Log in Join now

1

2 3

1 BURN logo2 Log in button3 Join now button

Landing page

1 Back button2 BURN logo3 Heading text4 Subheading text5 Category 1 button6 Category 2 button7 Category 3 button

750 pixels wide

Category 1

Category 2

Category 3

HeadingSubheading

BURN LOGO1 2

3

4

5

6

7

new user / Welcome page 1

1 Back button2 BURN logo3 Heading 14 Body text5 Feel the burn button

750 pixels wide

new user / Welcome page 2

BURN LOGO

Feel the burn

1 2

5

HeadingBody copy. Body copy. Body

copy. Body copy. Body copy.

Body copy.

3

4

Annotated wireframes

Dami

User testingmedium – Hi-fidelity Prototype Su

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.

1 2 3

Participants

DamiSu

User test med-hi-fidelity prototype

3.0

Personal touch in the text.

64 5

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.

User test med-hi-fidelity prototype

3.0

Participants

DamiSu

7 8 9User test med-hi-fidelity prototype

3.0

Search button. Search Icon sufficient.

Wants text instructions.

Confused with having both Refine Search and Calculate Exercise button on same screen.

Search Results heading font size too small – users weren’t aware what screen they landed on.

Wants More Info button on the Food Item.

Side by side comparison and felt it was easy to understand.

Participants

DamiSu

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.

“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.”

Feedbackmedium – 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.

1 2 3 4 5 6 7 8

17

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.

9 10 11 12 13 14 15 16

Participants

RianRichard

User test hi-fidelity prototype

4.0

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.

• Both stopped at the More Info page.

• Remove Sneaker Icon.

• Add Log Out screen to complete the flow.

1 2 3 4 5 6 7 8

17 18 19 20 21

Changes to Screens:

Additional Screens:

Iteration hi-fidelity prototype

18 19 20 21

9 10 11 12

Removed colour from logo so it doesn’t get confused as a button.

Removed Sneaker Icon. Users can calculate exercise once on the More info screen.

9 10 11 12 13 14 15 16

Removed button. Search Icon only.

Removed button. Search Icon only.

Additional screens: 18-21

4.0

What i originally assumed...

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

limited functionality

...And what is proven through testing and discovery

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

tailored experience.

Prototype

4.0

invision App Video demo

Next Steps

Thank you

Ermi Isais / 2016 /