Application Design 1 Documentation

Hochschule für Gestaltung Hochschule für Gestaltung Schwäbisch Gmünd Application Design 1 Documentation Interaction Design 3rd Semester Summer 2016 Lecturer: Jürgen Graef Anna Erlewein, Anika Jörke, Sonja Kozik, Chris Yan

1. Research

3

2. Competitors 2.1 Lifesum 2.2 S Health 2.3 My Plate

5 7 8 9

3. Analysis 3.1 Personas 3.2 SWOT 3.3 KANO

10 12 14 19

4. Information Architecture 4.1 Original 4.2 Optimized

21 23 25

5. Target Device

27

6. Conceptional Phase 6.1 Moodboard 6.2 Redefined 6.3 Sketches 6.4 Wireframes Part 1 6.5 Transitions 6.6 Wireframes Part 2 6.7 Icons

29 30 31 32 37 51 54 69

7.

Styleguide 7.1 Grid 7.2 Layout Areas 7.3 Typography 7.4 Icons 7.5 Buttons 7.6 Colors

72 73 74 75 76 77 78

8. Final Screens 8.1 Screens 8.2 Comparsion with MyFitnessPal

79 80 91

9. Prototype

98

10. Conclusion

101

1. Research

1. Research

4

1. Research There are three reasons why our team chose to redesign and refine the mobile application.

The first reason is our own good experience foundation; all of our team members are using fitness mobile applications on a regular basis, we all have a good amount of user experience with different fitness applications.

As we are both users and designers, we found many strengths and weaknesses within the fitness apps we tested.

The second reason is that MyFitnessPal actually has a great data tank. The app has large and comprehensive food and exercise data. However, the method of presenting and using this data is disorganized, inconvenient and needs to be improved.

Last but not least, the workload and challenge of redesigning MyFitnessPal is quite well Apple‘s Health App

Wunderlist

MyFitnessPal

fitting in this course.

That is why we chose this app as our final redesign project.Â

2. Competitors 2.1 Lifesum 2.2 S Health 2.3 My Plate

2. Competitors

2. Competitors Everyone of our group has chosen one competitive app and tested it for one week. After this week everyone had collected some advantages and disadvantages of each app. We created a huge summary of all findings which was really helpful for our ongoing process because we learned about good and bad designed solutions for certain features.

6

2. Competitors | 2.1 Lifesum

7

2.1 Lifesum Home

Water

Breakfast

Lunch

Dinner

Snack

Exercise

Menu

Body

Measurements One Week, Month..

Lifestyle Me My Things Input Quick Search, Barcode Scanner, Categories, Recent, Frequent, My Things, Create New, Simple Calories

Diets

Automatic Tracking, List of Exercise, Recent, Simple Calories

Friends Explore Recipes Automatic Traking Update to Gold Profile Settings Notifications Account Settings Social

Help Log out

Contact us

Homescreen

Information Architecture

Calorie intake One Week, Month..

2. Competitors | 2.2 S Health

8

2.2 S Health Samsung S Health

Information Architecture Anika J. Home

Steps

Profile

Awards

Personal bests

Weekly summary

Training

Process

Trends

Elements

More

Awards

All

Goals

Nutritions Fitness

Homescreen

Information Architecture

Healthy Food

More Sport

Better relaxed

Today

Trends

Awards

Manage Elements

Tracker

Accessories

PartnerApps

Goals

Programs

Health Rest

Settings

More General

2. Competitors | 2.3 My Plate

9

2.3 My Plate MyPlate Home Track

Progress

Workout

Community

Account

Calorie Tacking Condition

Calories Tracking

Workout Plans

Health & Nutrition

Edit Profile

Exercise

Comparison of Reality and Goal

Description of Plans

Support & Motivation

Library

Dairly Meal Plan

Progress Charts with Various Health Data

Individual Workout

Lose Weight

Setting

Workout Video of Plans

Recipes, Diet & Food

Share

Fitness & Exercise

Running

Chris Yan

Homescreen

Information Architecture

Members Tips & Tricks

About

3. Analysis 3.1 Personas 3.2 SWOT 3.3 KANO

3. Analysis

3. Analysis The following chapter illustrates our process of utilizing different methods to gain in-depth knowledge about features of the app MyFitnessPal and competing products, about our user base, their expectations towards an calorie tracking/fitness app and how to achieve their satisfaction with the product.

These different methods where also helpful in the process of creating a new, improved information architecture, since we learned which aspects needed to be redesigned.

11

3. Analysis | 3.1 Personas

12

3.1 Personas Personas are fictional characters that represent different user types. They are used to identify the needs of users, their motiva-

Margarite Beck Age

43 years old

Family status

married, one daughter

tions and their expectations.

Personas are especially useful for keeping focus on the users wishes during the designing process.

The personas created by us place great importance on a simple,

City

Kirschgartshausen/

Profession

Sectretary at a tax consultantcy

Income

900€ / month

Hobbies

reading, cooking,

well-structured interface and the ability to enter and access data

knitting

quickly. They also hope the app helps them lead an overall healthier lifestyle.

Margerite had been struggeling with her weight since early childhood. She tried lots of diets from magazines but never achieved any signifcant change. After she gave birth to her only daughter Simone she quit her job and became a housewife. When her daughter became a teenager she started a part time job as secretary for a tax consultant. Plus she wanted to lose weight again.

Her daughter recommended her to use a fitness and health app to track her calories and sport activity. Margerite has been using a smartphone since she started her new job but actually uses mostly the standard apps. She‘s a bit sceptical about the new app and if she‘ll be able to handle it. Nonetheless she is motivated to get started and in the best way evolve a new and healthy lifestyle that also benefits her husband and her daughter. „I definitely want to lose weight and this time I want to keep going. I hope that the app supports me and provides simple usage that even I can handle as I‘m not a daily user of smartphones and apps.“

3. Analysis | 3.1 Personas

13

Manuel Wahl

Sarah Bauer

Age

28 years old

Age

21 years old

Family status

single

Family status

single

City

Munich

City

Düsseldorf

Profession

Dogtrainer

Profession

Law-Student

Income

1900€ / month

Income

450€ / month

Hobbies

Any kind of sport,

Hobbies

exercising

Cooking

Manuel is a dogtrainer based in Munich. He‘s interested in any kind of sports.

Sarah is a law-student living in Düsseldorf. She spends a lot of her time studying

His favorite sport is basketball, which he plays in a club since he‘s 10 years old.

for university, since her courses are really demanding. The little free time she

Since he‘s 17 years old he is at the FC Bavaria Basketball team. After finishing

has left she spends with doing sports, mainly jogging and going to the gym.

his school in Augsburg he lived in Los Angeles for about 2 years and graduated

She also works part-time in a law-firm.

an internship at DogFit in Santa Monica where he also participated in various

Sarah used to be health conscious before going to university and tries to at

sport teams.

least keep up with doing sports, but with her hectic lifestyle she often times

Since Manuel is a sports enthusiast, he also wants to live a healthy lifestyle

is only able to cook something fast and unhealthy or to grab something from a

regarding his food intake. He doesn‘t know much about nutritional values, but

takeout place.

knows that doing so would also benefit his fitness goals.

Sarah uses an app to track her meals in hopes of combating this problem, but

Manuel also love to socialize and wishes for an app that lets him exchange his

often forgets or is too distractet to log her meals. She also thinks that the pro-

experiences, improvements and success stories with other like-minded people.

cess of logging food takes to long in her current app.

„I want to have an app in which I have a clear overview about my food, its nu-

„I want to have an app that I can track my food with, but that doesn‘t afford

tritions and an app which combines the food aspect, the community aspect as

to much time in daily usage. When I come home tired from university I do not

well as the workout aspect. I don‘t want to use several apps for that - only one.“

want to spend more than a few minutes on an app to track my daily meals. Also, I often need an reminder so I won‘t forget to log my meals.“ Still, I would like to get an good overview of the food I‘m consuming during the week, so I can adjust my meals for a healthier lifestyle.“

3. Analysis | 3.2 SWOT

3.2 SWOT The Swot analysis is a planning method that helps to determine the strengths, weaknesses, opportunities and threats of a project.

Strengths describe the positive factors that give the software advantage over other, similiar products.

Weaknesses uncover characteristics that give the software a disadvantage compared to others.

Opportunities are elements that could, upon improvement or implementation of them, wield a great advantage for the product.

Threats are characteristics that could potentially cause trouble with the software.

For analysing the app MyFitnessPal via the SWOT analysis, we answered specific questions in each of these four categories and thus, gained insight into things that would be important to include into our further work process, but also things we should avoid doing.

The sections that compared competing products with our app were especially helpful since it offered us a great overview about certain features that might be missing in MyFitnessPal.

14

3. Analysis | 3.2 SWOT

15

Strengths What are the strengths of the software compared to compe-

Which functions are well solved?

ting products?

Plus Button for quick access

The possibility to add customized meals, recipes, food-

Barcode Scanner

products and also exercises - quick add option (no need to

The calculation of goals, food and workout.

use the data-base)

Also the placement on the top of the page is very good so the

Fast access to adding meals etc. via plus button (on almost

user always has a quick overview without searching for it.

every screen) Community for motivation Customizable reminders Which characteristics do excel?

Shortcut (via plus button) -> all important options are quickly available - Blog with recipes, recommendations etc.

Social media functions Progress picture function Widget-tool

3. Analysis | 3.2 SWOT

16

Weaknesses What are problems with the software in comparison to com-

Which functions are missing?

peting products?

Nutritional information about consumed food at the diary page

Home screen doesn’t bring you to meal/exercise overview, but

(need to access a di erent page to view these informations)

to blog posts and social media page -> not really logical to see

Health Tips

this by opening the app

Personal food/exercise plans for users

Measurements for food are often in ounces, cups -> possibility to change to metric system is not offered)

In which negative aspects does the software compare to other

There are too many features for which the user has to upgrade

products?

to premium version.

visually not really appealing, confusing structure

Every main page seemed to be very overweight with informa tions. Everything has to be more structured The app could add more goal options - Unattractive Interface Design Which functions are poorly resolved?

Home screen (Community: Notifcations if someone logged in aren’t very interesting) - Some Buttons are too close together Complete Entry-Function could be more personalizable.

Food information pop ups are not always reliable.

3. Analysis | 3.2 SWOT

17

Opportunities Where lie the opportunities of the software?

Sleep has to be entered manually, but it’s complicated to

Combination of food and exercise in a well structured app can

enter a time for the beginning of your sleep.

give a good overview and support the user leading a healthy

There is no aim function concerning your weight. You can

lifestyle.

type in your weight but you can’t say „I want to lose x kg, what do I have to do?“

Which functions are currently not offered?

Other apps have a common problem adding information of

App should suggest food to eat depending on your nutritional

meal and exercise.

intake.

The possibility that the user can personalize the main page

Which user wishes could we use for the benefit of the

Workouts per day for the user and how they are to be done

software?

(short implemented video clip).

recommendations for special diets (vegetarian, vegan,

Calculator functions (when cooking for multiple people)

low-carb etc.) - categories for easier food searches

In which way can the strengths be optimized? through a clearer structure and a simpli ed interface adding tutorials or further informations on certain topics Where are the problems of the competing software? no activation of camera light when scanning products in a dark environment no search function for example in the sports list Step counter doesn’t work reliable.

3. Analysis | 3.2 SWOT

Threats Where are the potential risks and dangers in redesign?

Because there are so many functions it could be difficult to structure them in a clear way.

We have to be careful that we don’t lose track on what’s really important for the user.

Where are the competitors superior? better design, often more customizable Which features should be avoided? measuring option (neck, waist etc.) is not really important

18

3. Analysis | 3.3 KANO

3.3 KANO The KANO model is used to gain an understandment about how attributes of a software are percieved by customers and how they affect the satisfaction or dissatisfaction with a product.

To achieve this, the user is asked questions revolving around the features of the app. The user is given a certain set of five answers that range from total satisfaction to total dissatisfaction.

We formulated a questionnaire with the intention of gaining further knowledge about functional requirements of our future app and about demands the users might have.

We answered the questions for ourselves but also asked fellow students about their opinions. We evaluated the results and where then able to locate features in the different categories of the KANO modell.

19

3. Analysis | 3.3 KANO

20

Must-be Quality - the features that the product must have in

One-dimensional Quality - results in satisfaction when fulfilled

order to meet the users demands. If left out the user will be left

and in dissatisfaction when not fulfilled

dissatisfied.

Feedback on your food choices

Calorie overview

Step Counter

Exercise

Community

Quick access to entering data and to most important functions

Create own Meals

Barcode Scanner Meal-history Nutritional Information

Indifferent Quality - attributes refer to aspects that are neither

Progress overview

good nor bad, and they do not result in either customer satisfacti-

Setting personal Goals

on or customer dissatisfaction. „complete diary“ button add notes to certain days

Attractive Quality - Additionally incorporated “excitement”

displaying hip/breast/neck-size

attribute. Excitement attributes are for the most part unforeseen by the client but may yield a great amount satisfaction. connect to other fitness-gadgets

Reverse Quality - These attributes refer to a high degree of

workout tutorials

achievement resulting in dissatisfaction and to the fact that not all

Personalizing the home screen

customers are alike.

choose between diets/habits

messaging function

health tips from the app

sharing progress pictures

progress pictures

friends activities on main page

4. Information Architecture 4.1 Original 4.2 Optimized

4. Information Architecture

4. Information Architecture With the insights gathered in the analysis-phase, our next goal was to have a closer look at the current information architecture of MyFitnessPal. By doing so, we learned about the structure, about the way information and options are accessed by the user and how he navigates within the app but it also revealed structural problems.

In the next step we reorganized, restructered and improved the original information architecture towards an optimized version.

22

4. Information Architecture | 4.1 Original

23

4.1 Original Home

Blog

Diary

Friend Progress

Breakfast

Lunch

Dinner

Snacks

Progress

Exercise

Step Counter

Nutrition

Notes

Complete Entry

Steps

Weight

Neck

Waist

More

Hips

Share

Add Picture

Premium

My Profile

Go Premium

Edit Profile

Goals

Nutrition

My Recipes and Food

Reminders

Edit Profile

Add Reminder

Apps & Devices

Steps

Blog

Community

Friends

Shop Fitness Gear

Messages

Our other Apps

Settings

Help

Sync

Comment Add Food

Search

Barcode

Recent

Frequent

Add Exercise

More

My Foods

Meals

Recipes

Options

Add multiple

Smart-Copy

Save Meal

Copy Meals

Quick Add

Add Food Search

History

Cardio

My Exercises

Add Exercise

More

Strength

All Exercises

Manage Step Tracking

Create Exercise

Learn More

View Partner Apps

Options

Copy from Date

Add More

Calories

Nutrients

Macros

Day View

Week View

Change Date

Entry Complete

1 Week

1 Month

2 Months

3 Months

6 Months

1 Year

Since Starting Weight

All

Starting Weight

Current Weight

Goal Weight

Weekly Goal

Activity Level

Calorie Goals

Nutrition Goals

Workout/ Week

Minutes/ Workout

Forums

Notifications

Search

Bookmarks

Create Post

Add

All

Requests

Inbox

Sent

Write

Profile

Diary Settings

Sharing & Privacy

My Exercises

Nutrition Settings

Push Notifications

Logout

About Us

FAQ

Terms of Service

Troubleshooting

Beta Programm

4. Information Architecture | 4.1 Original

4.1 Original The prevoius page displays the current information architecture of the app MyFitnessPal. It becomes apparent that the structure is really complex, spanning over multiple layers with functions that are hidden insinde different menus.

Another aspect that got our attention is the homescreen; it is the first screen the user sees when opening the app, yet their is not much helpful information or any possibility to view data, except for the calorie overview. The user has to switch to a different categorie to view more specific informations.

Our analysis in the pervoius chapter revealed that the two sections offered on the homescreen, the blog and the friends daily posts, are not important to the user base; most even claimed to be dissatisfied with this information being displayed on the homescreen.

Since our goal is to design an app with quick access to important data, informations and functions, the homescreen needed to be redone to offer better usabilty within the app.

24

4. Information Architecture | 4.2 Optimized

25

4.2 Optimized

Personalizable Area

Progress

Calorie Overview

Nutrition

Breakfast

Food

Lunch

Dinner

Snacks

Drinks

Add Exercise

Water

Add Food

Exercise

Community

Exercise

Food

Home

Cardio

My Exercises

Strength

History

Exercise Suggestion Tutorial Videos

Main Forum

My Posts Create New

More

Friends Posts

Search

Add

Requests Edit Profile

Steps

Blog

Weight

Barcode Scanner

Share

general Advice

Add Picture

Food Suggestions

Calories

Water Intake

Nutrients

Macros

Search

Barcode

Recent

Serving Size Nutrition

Frequent

My Meals

Search

All Exercises

Create Exercise

Goals

My Profile

Starting Weight

Current Weight

Goal Weight

Weekly Goal

Notifications

Help

Activity Level

Calorie Goals

Nutrition Goals

About Us

FAQ

Terms of Service

Troubleshooting

Beta Programm

4. Information Architecture | 4.2 Optimized

4.2 Optimized Our main focus for redesigning the app was on the homescreen, the diary-screen and the exercise-screen.

We also decided to change the categories offered in the navigation bar. The progress screen didn‘t need to be a categorie on the navigation bar but will rather be displayed on the homescreen.

We replaced the progress option with a community option, since we considered this as an important tool in keeping up motivation and exchanging expierences with other users.

Our homescreen is personalizable, the user can pick the information or options he wants to be displayed and also the order in which they are located on the screen. These options link the user to the corresponding sections where he can put in data. For us, this is the optimal solution to get a quick overview but also to enter data quickly.

We also changed the structure inside the food and the exercise section. We added more categories and optimized the arrangement of certain options (e.g. options like „My Exercises“ should be accessible from the main exercise page. In the original architecture it was located on the fourth layer of the exercise page).

The new architecture is not as complex and overwhelming as the original one and offers the user to optimize the app regarding his personal preferences.

26

5. Target Device

5. Target Device

28

5. Target Device

1334 px

750 px Technical data

http://media2.giga.de/2014/09/iphone6_iphone6plus.jpg

6. Conceptional Phase 6.1 Moodboard 6.2 Sketches 6.3 Wireframes 6.4 Transitions

6. Conceptional Phase | 6.1 Moodboard

30

6. Conceptional Phase | 6.2 Redefined

31

6.2 Redefined To analyze the general layout of MyFitnessPal, we used a method to visualize the different area filled with informations on the main screens.

We learned that a lot of space is wasted with often times unecessary information that could be arranged in a more efficient way.

Header Calorie Calculation Header Calorie Calculation

Diary Overview

Header

Header

Graphs

Progress Options

Blog Posts & Friends Posts

Progess Pictures

Nutrition Menu

Complete Entry Menu

Notes Menu

Menu

6. Conceptional Phase | 6.3 Sketches

6.3 Sketches Quick handsketches are very useful to show first ideas of the later layout or to visualize a certain interaction. In our case we tried different styles of the general calorie overview, thought about the personalizable area on the homescreen and tested our three different navigation styles. On this basis we can now decide what we think is the best solution and even show it to others for more user research.

32

6. Conceptional Phase | 6.3 Sketches

First sketches of navigation bar variants.

33

6. Conceptional Phase | 6.3 Sketches

34

Sketches of Home Screen and Food Overview.

6. Conceptional Phase | 6.3 Sketches

Sketches of Home screen and Food overview.

35

Sketch of a hidden navigation bar.

6. Conceptional Phase | 6.3 Sketches

Sketches of interactive navigation bar.

36

Sketches of Home screen ...

... and Food overview.

6. Conceptional Phase | 6.4 Wireframes Part 1

6.4 Wireframes Part 1 We created Wireframes to get a sense of the ideal arrangment of the different elements on the screen.

First, we tried out different styles of navigation possibilities, such as a navigation bar at the bottom of the screen, a slider navigation at the top of the screen and a sandwich menu.

Furthermore, we compared different visualizations for the calorie and nutrition view and for the personalizable area on the home screen.

37

6. Conceptional Phase | 6.4 Wireframes Part 1

38

9:00

9:00 Search

Search

793 KCAL LEFT

362

826

BURNED

EATEN

CARBS

PROTEIN

FAT

269g left

81g left

70g left

826 EATEN

793

362

KCAL LEFT

BURNED

CARBS

PROTEIN

FAT

269g left

81g left

70g left

Water

Coffiene

1400 1200 1000 800 600 400 200 29/4

Water

30/4

1/5

2/5

3/5

Coffiene

4/5

5/5

6/5

7/5

Weight

Layout 1: Home Screen and Navigation (bottom bar)

Weight

6. Conceptional Phase | 6.4 Wireframes Part 1

39

9:00

9:00

Search

Search

CALORIES LEFT

STEPS

793

Proteine 84%

9:00

CALORIES LEFT

362

Carbs 79%

Fat 64%

Search

STEPS

793

Fibre 30%

Proteine 84%

CALORIES LEFT

362

Carbs 79%

Fat 64%

793

Fibre 30%

1400 1200 1000 800

Coffiene

Water

STEPS

Weight

600

Proteine 84%

Carbs 79%

362 Fat 64%

Fibre 30%

Breakfast

314

Cereals 60g

250

Milk 120ml

74

400 200 29/4

30/4

1/5

2/5

3/5

4/5

5/5

6/5

7/5

1400

Water

Coffiene

Weight

1200 1000 800 600 400 200 29/4

Layout 2: Home Screen and Navigation (bottom bar)

30/4

1/5

2/5

3/5

4/5

5/5

6/5

7/5

Lunch

502

Spaghetti 200g

304

Chicken Soup 450ml

198

Dinner

602

6. Conceptional Phase | 6.4 Wireframes Part 1

40

9:00

9:00

Search

HOME

9:00

Search

FOOD

EXERCISE

SOCIAL

793

826

EATEN

MORE

HOME

HOME

FOOD

EXERCISE

793

826

362

KCAL LEFT

BURNED

EATEN

CARBS

PROTEIN

FAT

269g left

81g left

70g left

SOCIAL

MORE

FOOD

EXERCISE

SOCIAL

MORE

Search

826

362

KCAL LEFT

BURNED

EATEN

CARBS

PROTEIN

FAT

269g left

81g left

70g left

Water

Coffiene

793

362

KCAL LEFT

BURNED

CARBS

PROTEIN

FAT

269g left

81g left

70g left

Water

Coffiene

1400 1200 1000 800 600

Weight

400 200 29/4

Water

30/4

1/5

2/5

3/5

Coffiene

4/5

5/5

6/5

7/5

Weight

1400

1400

1200

1200

1000

1000

800

800

600

600

400

400

200

200 29/4

Layout 3: Home Screen and Navigation (top slide)

30/4

1/5

2/5

3/5

4/5

5/5

6/5

7/5

Weight

6. Conceptional Phase | 6.4 Wireframes Part 1

41

9:00

9:00

Search

9:00 Search

Search

Chris Yan

826

793

362

826 HOME

KCAL LEFT

BURNED

EATEN

CARBS

PROTEIN

FAT

CARBS

269g left

81g left

70g left

269g left

EATEN

FOOD

Chris Yan

793 KCAL LEFT

362

826

BURNED

EATEN

PROTEIN

FAT

81g left

70g left

793

362

KCAL LEFT

BURNED

CARBS

PROTEIN

FAT

269g left

81g left

70g left

Water

Coffiene

EXERCISE

SOCIAL Water

Coffiene

Weight

Water

SETTING

Layout 4: Home Screen and Navigation (burger menue)

Coffiene

Weight

Weight

6. Conceptional Phase | 6.4 Wireframes Part 1

Variation of quick access on ‚Home Screen‘

42

6. Conceptional Phase | 6.4 Wireframes Part 1

Variation of quick access on ‚Home Screen‘

43

6. Conceptional Phase | 6.4 Wireframes Part 1

Testings of tiles and lists on light and dark background.

44

6. Conceptional Phase | 6.4 Wireframes Part 1

Variations of ‚Home Screen‘

45

6. Conceptional Phase | 6.4 Wireframes Part 1

Variations of ‚Home Screen‘

46

6. Conceptional Phase | 6.4 Wireframes Part 1

Variations of ‚Home Screen‘

47

6. Conceptional Phase | 6.4 Wireframes Part 1

Variations of ‚Home Screen‘

48

6. Conceptional Phase | 6.4 Wireframes Part 1

Variations of quick access on ‚Home Screen‘

49

6. Conceptional Phase | 6.4 Wireframes Part 1

Variations of ‚Community‘ page

50

6. Conceptional Phase | 6.5 Transitions

6.5 Transitions For our type of navigation we wanted to actually see how it would look like to get a better feeling which would be suitable for our application and which not. So we tried to animate differnt navigation types in Axure. We kept the original navigation for comparison and tried related as well as completely different navigation styles.

51

6. Conceptional Phase | 6.5 Transitions

52

6. Conceptional Phase | 6.5 Transitions

53

6. Conceptional Phase | 6.6 Wireframes Part 2

6.6 Wireframes Part 2 The following screens display our process after we made the final decision on our general layout regarding the home screen. We made variations of the home screen, the exercise screen, the community screen and the settings page.

There were no huge changes regarding the page layout during this phase but rather some revisions concerning the details of the design.

Later on in the process we started adding color to get a feeling of the overall look of the application.

In the next step, we added two different variations of icon sets to replace the placeholders located mainly on the home screen. We then chose the most fitting icons.

54

6. Conceptional Phase | 6.6 Wireframes Part 2

55

...

Home Screen

Add Breakfast

Search for Food

Adjust serving size and nutritions overview

6. Conceptional Phase | 6.6 Wireframes Part 2

Variations of the Exercise Screen

56

6. Conceptional Phase | 6.6 Wireframes Part 2

Home Screen

Add Breakfast

57

Edit weight and add progress picture

Drinks

6. Conceptional Phase | 6.6 Wireframes Part 2

Food screen

Nutritional values of a meal

58

Exercise screen

6. Conceptional Phase | 6.6 Wireframes Part 2

Community Page

Setting Page 1

59

Setting Page 2

6. Conceptional Phase | 6.6 Wireframes Part 2

Manage elements on home screen

List of elements

60

Edit weight and add progress picture

Exercise Screen

6. Conceptional Phase | 6.6 Wireframes Part 2

Variations of the settings page

61

6. Conceptional Phase | 6.6 Wireframes Part 2

Home screen with color 1

Home screen with color 2

62

Manage elements on homescreen

List of elements

6. Conceptional Phase | 6.6 Wireframes Part 2

Adding Breakfast

63

6. Conceptional Phase | 6.6 Wireframes Part 2

Food screen

Nutritional values of a meal

64

Exercise screen

Create new exercise

6. Conceptional Phase | 6.6 Wireframes Part 2

Community screen

Settings page

65

Edit profile

6. Conceptional Phase | 6.6 Wireframes Part 2

Icon set 1

66

6. Conceptional Phase | 6.6 Wireframes Part 2

Icon set 2

67

6. Conceptional Phase | 6.6 Wireframes Part 2

Variations of typography color

68

6. Conceptional Phase | 6.7 Icons

6.7 Icons In this chapter we show two different variations of our own icon sets.

We asked potential users which icons they percieve as the most fitting for the information displayed and decided accordingly on a combination of both sets.

69

6. Conceptional Phase | 6.7 Icons

70

6. Conceptional Phase | 6.7 Icons

71

7. Styleguide 7.1 Grid 7.2 Layout Areas 7.3 Typography 7.4 Icons 7.5 Buttons 7.6 Colors

7. Styleguide | 7.1 Grid

73

7.1 Grid 26 x 26 px

7. Styleguide | 7.2 Layout Areas

74

7.2 Layout Areas Header - Height: 76 pt

Content - Height: 536 pt

Navigation Bar - Height: 55 pt

7. Styleguide | 7.2 Typography

75

7.2 Typography Headline Text Text Numbers 1

Headline DIN Round Pro, Medium, 21 pt

Subheadlines DIN Round Pro, Medium, 16 pt

Text

Text

Numbers 2

DIN Round Pro, Regular, 14 pt

Text in lists DIN Round Pro, Regular, 16 pt Text Text in lists

Numbers 1 DIN Round Pro, Medium, 40 pt + 30 pt

Numbers 2 Subheadlines

DIN Round Pro, Regular, 12 pt

7. Styleguide | 7.3 Icons

7.3 Icons The final icons are the result of our user survey. We made some of them less detailed so that they can be still recognized at small size. However we decided that the icons should be accompanied by an explanatory text since we have a wide range of functions that do not have an international or common symbol. It is also benefical for a fast visual perception. We keep all icons as outlines with 1pt stroke width which changes into our highlight color if clicked.

76

7. Styleguide | 7.4 Buttons

7.4 Buttons We wanted our buttons to be unobtrusive so we choose two different types of buttons. The first are round buttons with small Icons and a stroke width of 1pt when they‘re unactivated. If they get clicked they become filled with the highlight color for a better feedback. The buttons for the food quick add turn into filled buttons with white checkmark icons.

We needed the second icons to make some screens editable. We decided to use typography instead of icons for this button to make it clearer for the user. To make them seem clickable we used a light shadow underneath a white rounded rectangle.

77

7. Styleguide | 7.5 Colors

78

7.5 Colors White #ffffff RGB: 255 255 255 CMYK: 0 0 0 0

Grey

Light Grey

#46504E

Transparency: 15%

RGB: 70 80 78 CMYK: 70 48 54 47

Green

Light Green

#24BA9D

Transparency: 15%

RGB: 36 186 157 CMYK: 91 0 52 0

8. Final Screens 8.1 Screens 8.2 Comparsion with MyFitnessPal

8. Final Screens | Screens

8. Final Screens For the final screens we included our chosen icons and eliminated the last inconsistancies regarding buttons, colours and the sizes of some elements. We finished every relevant screen and also defined the transitions of clickable elements in terms of movements and speed. On this basis we started to create a prototype.

80

8. Final Screens | Screens

81

8. Final Screens

Home Screen 1

Home Screen 2

Home Screen 3

8. Final Screens | Screens

Manage elements on home screen

82

List of elements

List of elements

8. Final Screens | Screens

Home Screen 1 with new element

83

Home Screen 2 with new element

Home Screen yesterday

Home Screen tomorrow

8. Final Screens | Screens

Home screen: - quick access of breakfast - overview of recent food

84

Editing breakfast - adding Baguette

Editing breakfast - Detail informations of Nutella and adding Nutella

8. Final Screens | Screens

Overview of just added food

85

Adding drink with Barcode Scanner

Detail information about Coca Cola

Adding Coca Cola to breakfast

8. Final Screens | Screens

Editing drinks (water)

86

Quick access to weight

Weight with progress gallery

Two pictures selected for comparsion

8. Final Screens | Screens

Detail information about daily meals

87

Detail information about breakfast

8. Final Screens | Screens

Exercises page - adding Jogging

88

Overview about all exercises

Editing time of one exercise

Creating a new exercise

8. Final Screens | Screens

Community page - Newsfeed

89

Settings page - Overview

My Profile page

My Goals page

8. Final Screens | Screens

Detail information about Calorie Goal

90

8. Final Screens | 8.2 Comparsion with MyFitnessPal

8. Comparsion with MyFitnessPal On the following pages we compare the most important screens of our redesign with the old version of MyFitnessPal.

91

8. Final Screens | Comparsion with MyFitnessPal

92

The home screen ist completely reorganized. There used to be blogposts and friends statuses with calorie information at the top We kept the calorie information at the top, but chose it to be displayed bigger and in a graph for better recognition.

Additionally, we included nutritional informations.

The user sees the important details about his daily food intake right on the opening screen.

Through the option to customize the homescreen, the user has quick access to data inputs deemed as most important for his personal needs and can switch between stats such as weekly calories and weight changes right on the homescreen. The whole process of adding food and viewing information gets quicker.

Home Screen

8. Final Screens | Comparsion with MyFitnessPal

93

We tried to waste less space through not listing each food item individually. These are editable on a following screen.

We included direct feedback about meal choices with recommendation if nutrients are missing or how much calories are recommended for each meal. This is also visualized through a thumbsicon.

By tapping on the different meals, underlayed with a grey rectangle, the user can see all the nutritonal information about each meal.

This feature was also not included in MyFitnessPal.

Food Overview

8. Final Screens | Comparsion with MyFitnessPal

94

The entering of food data in our redesign is happening right on the homescreen. Recently consumed food is displayed.

There is also an calorie overview included at the top which changes accordningly to the food added.

The user also can add more than one food item in one sitting.

Food is also easily deletable by tapping on the green checkmark.

Hence, the list of consumed food is immediately editable through a tap on the item name or a tap on the plus/checkmark-symbol.

The process of adding food becomes much quicker.

Food Search

8. Final Screens | Comparsion with MyFitnessPal

95

The exercise screen used to be included at the bottom of the diary page in MyFitnessPal. We decided to create a new exercise page, since it is an important feature to monitor personal physical activities.

The user can switch between My Exercises, exercises the user created or added to my exercises, history and a workout plan. We made my exercises the most prominent feature on the page since these are the exercises ones the user usually performs.

Again, there is an overview about burned calories at the top.

We wanted to give the user the possibility to quickly add exercises without the need to go to another screen with the option to add either cardio or strength training for a better overview included.

Exercise Page

8. Final Screens | Comparsion with MyFitnessPal

96

The community page used to be hidden away in the more section of MyFitnessPal. We decided to create a new community page within our redesgin, since interacting with others and sharing knowledge about weightloss or exercises can be a great motivation for the user.

The user can switch between newsfeed, which used to be on the home page in original MyFitnessPal, the forum and my posts, posts created by the user.

Overall, our redesign looks more appealing and is consitent to the rest of the apps design.

Community Page

8. Final Screens | Comparsion with MyFitnessPal

97

We decided to include less setting options to guarantee a better overview. To achieve this, we put some of the options and pages offered in the more section on the community screen and the home page to make it less cluttered with links to different pages.

We also added a profile picture and a personal quote to make the user feel more involved with the app and the community.

Settings

9. Prototype

9. Prototype

9. Prototype We did our prototype in Axure RP 8. We wanted to give a feeling of the genral behaviour of the app and we focused on the food quick input to demonstrate how it will work. As the file sizes became very big we decided to split it and have several prototypes rather than one. We prototyped a overall navigation through the app, the food input, the adding of a beverage with a barcode and setting a new weight.

99

9. Prototype

100

10. Conclusion

10. Conclusion

102

10. Conclusion As a healthy and fitness oriented-lifestyle is increasingly gaining

health and since physical health also affects the mental health this

importance especially for the younger generation, demands for

does not only apply for overweight people.

ways to maintain such a lifestyle are on the rise.

Good mental health offers a feeling of well-being, inner strength

A multitude of promising different diets and fitness programs are

and the capability to deal better with stress and unrest. To achieve

offered through gyms, the internet and the advertisement indust-

this it is important have a combination of proper foods and regular

ry. Yet still, many people are having difficulties regarding long-las-

exercises. Ingesting diversified foods containing neither an excess

ting lifestyle changes and procrastinating their goals.

nor an insufficiency of fundamental nutrients provide the energy

Companies try to get a green thumb on their products by promo-

for the body that is needed.

ting them as low in fat or sugar free. A psychological trick that

A lack of energy can cause tiredness, sadness or even anger.

works fine in a fast-paced world where nobody has the time to

Physical activities are beneficial in several ways as they increase

pay attention what is really behind those products. The design and

the mobility of the body and on long-term provide independence

packaging counts in first place which is also why overweight

as one ages. Moreover it can relieve stress and prevent depressi-

people are often judged by their outer appearance and get discri-

on due to the endorphins produced during the physical activity.

minated against others e.g in job interviews. These people suffer under a social pressure that results in an unhappy and unsatisfied

It is proven that the simplest, yet most effective way to lead a

life with the strong intention to change their current situation

healthier lifestyle is to monitor consumed and burned calories as

leading to crash diets and various other weight loss tips praised

well as exercises. The first step towards maintaining weight or

by the industry. Following a fad-diet for a few weeks and seeing

loosing weight is to understand how the bodies’ metabolism is

results on the scale does not automatically mean that these short

functioning.

term successes are meant to last. More often than not, people

The body burns a certain amount of calories during the day; the

who completed a time-limited diet and returned to their former

basal metabolic rate. If a person consumes more calories than

lifestyle will soon be confronted with a decrease in weight after a

their basal metabolic rate they will inevitably gain weight. Additio-

few weeks - their lifestyle changes were too short-lived.

nally exercise is helpful to increase the daily available caloric

Only a permanent change of one’s lifestyle is the key to good

amount, since calories will be burned during activities.

10. Conclusion

103

Receiving an understanding of the calories and nutritions consu-

des in a more simple navigation and a smoother handling in use.

med and how certain foods have higher caloric values than it

Combining the outstanding features of the individual apps and

might be expected can be an effective tool for loosing and main-

reorganizing the contents will yield improved usability and user

taining weight.

experience.

To reach a wide and diverse range of people the app provides a

Most people’s everyday life is stressful and filled with lots of

clear interface with the most important data shown at fist sight. It

duties impeding to keep track of such an healthy lifestyle which

blends unobtrusively into your daily routine allowing the user to

requires a lot of documentation. However, almost everyone owns

enter and edit his data fast. Statistics like weight and steps taken

a Smartphone today which was designed to facilitate tasks and

during a day illustrate to the users how much progress they have

manage them more efficient. The obvious solution is to assist

made during the usage of the app. Positive results in these

people documenting their nutrition and activity by creating a

categories can serve as a motivation to maintain the changes in

mobile application. It helps the user continuing along an healthy

diet.

lifestyle even with little knowledge about nutrition.

One has to understand that success and visible results are not Apps such as My Fitness Pal already offer features to track and

going to be achieved in a short amount of time, but with steady

monitor nutritional data and physical activities. However, the app

and continuous changes. Using an app that offers the possibility

does not provide a good user experience due to a too complex

to document these changes and gives feedback according to the

and unclear structure in conjunction with redundant information.

users choices of food and exercise can make the difference

Yet, the app offers the biggest data base compared to competing

between giving up on ones goals and reaching them with the

apps. On the other hand, those offer a variety of useful features

knowledge of having done so in the most healthy way possible.

that could replace unnecessary features in My Fitness Pal such as

To conclude the app accompanies the users on their journey and

creating workout plans, the ability to personalize the home screen

helps them to maintain the new healthy lifestyle later on. It raises

and general feedback about daily intake and activities.

awareness for the essentials of nutrition and physical activity

Additionally a restructuring of the information architecture conclu-

contributing to a long-lasting change regarding the user’s health.