Sonja Kozik

UX/UI Designer


MyFitnessPal Redesign

The goal of this course was to redesign an existing application and to improve its user experience.

Project 01
  • Co-Students: Anika Jörke, Anna Erlewein, Chris Yan (Erasmus)
  • Supervisor: Jürgen Gräf
  • Course: Application Design (2016)
  • My role: Research, Informationarchitecture, Personas, Wireframes, Interaction, Experience Design, Prototyping

As a fit and healthy orientated lifestyle is becoming more important especially for people of the younger generation, ways to pursue such a lifestyle are requested. The most effective way to achieve a long-lasting change towards one's fitness and physical health is to keep track of exercises and nutrition. Apps such as MyFitnessPal already offer features to document and monitor this data. However, the app does not provide a good user experience due to a too complex and unclear structure in conjunction with redundant information.

Pain Points

Through a profound analysis of the app and several user tests, we were able to define the following weaknesses of the MyFitnessPal app:

MFP

Data Ink

Only a small part on top of the screen is dedicated to the nutritional information although this should be the main focus.

Accessibility

The app does not make it easy to change for example from imperial to the metric system. This is a hidden option in the menu.

Cluttered Interface

There are many functionalities within the app; unfortunately they are without any logical structure.

User Needs

Sarah Bauer, 21, Law student

„I want to have an app that doesn't afford too much time in daily use. When I come home tired from university I do not want to spend more than a few minutes to track my meals. Also, I often need a reminder so I won't forget to log my meals. Still, I would like to get a good overview of the food I'm consuming during the week, so I can adjust my meals for a healthier lifestyle.“

Margerite Beck, 43, Secretary

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

Goals

Easy to use

A clear structure and a reduced design will help first-time users to understand the functionalities much faster. This assures a less time intensive data input, too.

Customization

Everyone has an individual goal therefore the app must give the possibility to personalise the content to one's preferences.

Feedback

It is important to get feedback on meal choices as well as getting suggestions about improving the diet. A community can help with motivation.

Features

Details about the daily calorie intake have been given more space and are therefore more visible to the user. It is also possible to see the weekly progress by swiping left on the element.

As user can be interested in different outcomes concerning their changes in lifestyle and have individual preferences when it comes to food, users now have the possibility to add and rearrange shortcut icons on their home screen.

Food can be easily added by scanning the barcode of the product. It will directly give the nutritional values such as calories, nutrients and some general feedback about the product. In the meal overview users will get more detailed feedback about each meal they have eaten.

This is an example how meals can be documented by using a shortcut on the home screen. There are different options to choose from, either searching the database for food or choosing one from recently consumed foods. These can be added by simply clicking the plus button on the right-hand side. The item will be added to the list and can be edited anytime.

Information Architecture

The information architecture of the redesigned app is less cluttered and more structured. Some features had been removed if they were obsolete, others had been rearranged if they were useful but not accessible enough.

Design Process

Sketches:

By sketching some quick wireframes we could try out the screen allocation and different navigation types to work through the logic.

Wireframes:

We let potential users evaluate our screen layouts and colour concepts and test first interaction patters.

Conclusion

From the beginning we set our focus on improving the user experience rather than the UI. It was crucial to get a deep understanding how the current architecture works and to identify its pain points. MyFitnessPal offers many functionalities and is a great platform for people to track their eating habits. However, the information density of the application tends to overwhelm users very quickly. Building a logic structure that is easily understandable for the user is essential. People do not want to spend a lot of time on the data input therefore the key functions have to be easily accessible.