Application Design 1 Documentation by Chris Yan

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

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

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

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

10. Conclusion

101

1. Research

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â&#x20AC;&#x2DC;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.

2. Competitors | 2.1 Lifesum

2.1 Lifesum Home

Water

Breakfast

Lunch

Dinner

Snack

Exercise

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

Homescreen

Information Architecture

Calorie intake One Week, Month..

2. Competitors | 2.2 S Health

2.2 S Health Samsung S Health

Information Architecture Anika J. Home

Steps

Profile

Awards

Personal bests

Weekly summary

Training

Process

Trends

Elements

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

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

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.

3. Analysis | 3.1 Personas

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

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.

3. Analysis | 3.2 SWOT

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

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

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

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.

3. Analysis | 3.3 KANO

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.

4. Information Architecture | 4.1 Original

4.1 Original Home

Blog

Diary

Friend Progress

Breakfast

Lunch

Dinner

Snacks

Progress

Exercise

Step Counter

Nutrition

Notes

Complete Entry

Steps

Weight

Neck

Waist

Hips

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

Barcode

Recent

Frequent

Add Exercise

My Foods

Meals

Recipes

Options

Add multiple

Smart-Copy

Save Meal

Copy Meals

Quick Add

Add Food Search

History

Cardio

My Exercises

Add Exercise

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

Bookmarks

Create Post

Add

All

Requests

Inbox

Sent

Write

Profile

Diary Settings

Sharing & Privacy

My Exercises

Nutrition Settings

Push Notifications

Logout

About Us

FAQ

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.

4. Information Architecture | 4.2 Optimized

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

Friends Posts

Add

Requests Edit Profile

Steps

Blog

Weight

Barcode Scanner

general Advice

Add Picture

Food Suggestions

Calories

Water Intake

Nutrients

Macros

Barcode

Recent

Serving Size Nutrition

Frequent

My Meals

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

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â&#x20AC;&#x2DC;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 â&#x20AC;&#x17E;My Exercisesâ&#x20AC;&#x153; 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.

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

6. Conceptional Phase | 6.2 Redefined

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

Graphs

Progress Options

Blog Posts & Friends Posts

Progess Pictures

Nutrition Menu

Complete Entry Menu

Notes 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.

6. Conceptional Phase | 6.3 Sketches

First sketches of navigation bar variants.

6. Conceptional Phase | 6.3 Sketches

Sketches of Home Screen and Food Overview.

6. Conceptional Phase | 6.3 Sketches

Sketches of Home screen and Food overview.

Sketch of a hidden navigation bar.

6. Conceptional Phase | 6.3 Sketches

Sketches of interactive navigation bar.

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.

6. Conceptional Phase | 6.4 Wireframes Part 1

9:00

9:00 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

9:00

CALORIES LEFT

STEPS

793

Proteine 84%

9:00

CALORIES LEFT

362

Carbs 79%

Fat 64%

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

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

9:00

HOME

9:00

FOOD

EXERCISE

SOCIAL

793

826

EATEN

HOME

FOOD

EXERCISE

793

826

362

KCAL LEFT

BURNED

EATEN

CARBS

PROTEIN

FAT

269g left

81g left

70g left

SOCIAL

FOOD

EXERCISE

SOCIAL

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

1200

1000

800

600

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

9:00

9:00 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

6. Conceptional Phase | 6.4 Wireframes Part 1

Variation of quick access on ‚Home Screen‘

6. Conceptional Phase | 6.4 Wireframes Part 1

Variation of quick access on ‚Home Screen‘

6. Conceptional Phase | 6.4 Wireframes Part 1

Testings of tiles and lists on light and dark background.

6. Conceptional Phase | 6.4 Wireframes Part 1

Variations of ‚Home Screen‘

6. Conceptional Phase | 6.4 Wireframes Part 1

Variations of ‚Home Screen‘

6. Conceptional Phase | 6.4 Wireframes Part 1

Variations of ‚Home Screen‘

6. Conceptional Phase | 6.4 Wireframes Part 1

Variations of ‚Home Screen‘

6. Conceptional Phase | 6.4 Wireframes Part 1

Variations of quick access on ‚Home Screen‘

6. Conceptional Phase | 6.4 Wireframes Part 1

Variations of â&#x20AC;&#x161;Communityâ&#x20AC;&#x2DC; page

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.

6. Conceptional Phase | 6.5 Transitions