myfitnesspal Re-Design
By: Brian Berg
Tags: Health, Myfitnesspal, Case Study, UX Design, Data Visualization

A sharpened focus on user needs and a new look at business needs.

Challenge:

Re-design four screens on a current iOS or Android product within a two-week timeframe.

Why myfitnesspal?

The myfitnesspal app redesign project was chosen based upon a clear need for user experience improvements. Specifically:

Evolving needs: As the industrie’s current go-to application for calorie tracking, the myfitnesspal app struggles to reflect current user wants and needs

Too many features and a lack of structure to effectively support them

Goals:

Re-design four myfitnesspal screens in a 2-week timeframe

Clean up feature and information hierarchy of the application

Improve access to critical information for calorie tracking while integrating current business goals of the brand

Retain brand consistency of the current myfitnesspal app

Power User

The project’s power user is an individual actively attempting to lose weight by tracking calorie consumption and other nutrition indicators. Quick access to critical information regarding total caloric goals and related consumption is imperative.

Pre-Transformation

The current app features a four-section navigation structure with a FAB (floating action button), which allows the user to input food, exercise, weight, water, or notes.

Home

The current home tab features a small top section dedicated to calorie tracking (Goal Calories, Food Eaten, Exercise, and Remaining). The remainder of the screen is dedicated to the feed, which currently houses the users’ food diary and blog posts (scroll).

Diary

The current app’s second tab features a diary, which is where the primary utility of the application lives. The diary allows the user to track food consumption and activity goals. You have the same element from the home page at the top so you can see your day as well as sections for you to add breakfast lunch, dinner, and snacks.

Progress

The current app’s progress tab features a tool that allows the user to post and track current weight and associated progress pictures, which is reflected in a progressive timeline that affords the user a visual view of performance.

More

The current app’s more tab acts as a menu for the rest of the content, which is quite extensive. Noteworthy tabs include:

Nutrition

My Profile

Blog

Community

Friends

Chosen Pages

For the pages I chose, I decided to stray away from the bottom navigation pages, choosing instead to focus on user goals in three (3) pages and one (1) business goal in the last page.

1 — Home Page

Ultimately, the home page was refined to focus on calorie tracking. The page shifted from a dual focus on daily calories and the feed feature to a sole focus on the caloric tracker, allowing the user to easily glean insights necessary to achieve weight loss goals.

Pages to incorporate into Home from the original application

2 — Progress

The existing progress page currently shows the users’ weight loss progress over time. However, it does not provide the user with immediate insights regarding caloric consumption over an extended period of time. Although the information is currently available on certain sub-pages, it does not allow the user to view an immediate correlation between reduced caloric consumption and related weight loss. Providing the user a visual tool to link the two helps them see how daily choices impact long-term weight loss goals.

Pages to incorporate into Progress from the original application

3 — Add Food

The goal for the Add Food page is to keep the same information but give the user insight into how the food choices and amounts will affect their calorie and macronutrient goals for the day.

Pages to incorporate into Add Food from the original application

4 — Feed

Looking at the product as a whole it is clear that there is a large feature set built out for the social aspects of this application. My original goal for this was to integrate all the social features in a way that met the business and user goals in a new page that would live on the bottom navigation. However, after further iterations, it became clear that more thought would need to go into how these two could be integrated.

Pages to incorporate into Feed from the original application

Re-Structuring

The entire app required restructuring prior to beginning the wireframing work needed to support the app’s redesign. That process began with re-imagining the bottom navigation.

The home tab’s blog and daily snapshot were replaced by the (previous) diary page, providing the user an immediate view of their progress on daily (today’s) goals.

The food diary on the second tab was replaced with a progress tool, showcasing how the users’ daily choices influence the achievement of their goals over time.

Both Home and Progress would have information that would filter into the feed. The feed would be a way for the information from the previous two tabs to be integrated into actionable insights customized to the user while still showing content from the previous version of Home. The actionable insights from here would then influence goals on the final tab, Profile.

The final, newly-created Profile tab features user information and related goals (weight loss, caloric limits, etc) that filters back to Progress page tracking and the Home page.

Wireframes

1 The home screen incorporates a “completing the circle” motif. With the redesign, the user immediately sees an updated snapshot of the remaining day’s calories and macros (protein, carbs, fat). This valuable information, previously hidden inside the Nutrition page, provides the user with a real-time tool to guide food choices.

Although an app-generated suggestion was added in the redesign process, it was later removed in order to retain user simplicity and focus.

2 The progress page was adapted. The page now features a segmented control near the top providing the user with a handy tool that allows them to switch between nutrition and weight goals. Now, users can see their calorie and macronutrient averages, performance (against goals) for a pre-selected date range, in addition to the daily (if selected) progress view housed at the bottom of the page.

3 After much experimentation, the food circle graph, indicating the macronutrients ratio, was removed and replaced with a rectangle graph, which provides a clearer visual. Although an exposed scroll wheel was among viable options, it was dropped upon discovery that it would disrupt the apps scrolling functions.

4 The feed page started as an attempted combination of all the social features myfitnesspal has to offer. I started down the road of a mosaic concept showing blog and diary post as well as showing challenges. Later this concept changed to a much greater solution that more accurately encompasses user and business goals.

Branding

The redesign retained the apps original color scheme (staying true to the brand) while bringing in new colors to drive informative data collection at a glance.

Although the primary color was retained, a gradient was added to specific areas in order to make them stand out. The call-to-action areas are now highlighted with a more energetic blue.

Secondary colors were added to macronutrients (protein, carbs, and fat) to help inform and educate the user. And intuitive red and green tones were added to signal user successes and misses.

The brand’s Helvetica Neue font was retained, but a few variations were added in the text hierarchy to provide navigation cues and call-outs.

Inspiration

Current fitness apps and other apps utilizing the “completing the circle” motif provided inspiration, in addition to study of various color and visual treatments of data.

Final Screens

1 In addition to pulling the nutrition tab out into the open, the home tab now provides the user with a full “at-a-glance” view of their daily caloric and macronutrient goals. The fab (floating action button) was removed from the bottom navigation in recognition of the fact that it did not support the app’s functionality and user experience. It is now only present on the home page.

2 The progress tab now allows for a seamless swiping between nutrition and weight progress cards so you can see how, for the dates you have chosen, your nutrition affects your weight and staying on goal influences your results.

3 Extraneous information was removed from the Add Food tab (example: 1 oz conversion of grams of macronutrients).

Now, the page just shows the percentage breakdown of macronutrients, in the form of a bar chart, as well as insight into how that food will affect your day’s calories and macronutrients.

More salient calls to action on the serving amount as well as the removal of the serving size vs the number of servings simplify the process of adding food while adding more detail to the screen.

4 The feed was altered from a public feed to a private feed, which provides the user a handy tool to see a chronological view of daily progress and related nutrition swaps and affirmational content which better support their individual goals and challenges.

This will add value to the user's experience through adding insights about staying on track for their goals such as suggesting the type of foods or times of the day to look out for.

Recognizing the feature-heavy nature of the myfitnesspal app, the feed incorporated feature suggestions to highlight the availability of additional tools and resources, as well as house sponsored content like blogs, etc., which fulfill important business needs.

Learnings

This type of solo project provides UI/UX designers like me with an important opportunity to witness the challenges associated with redesign projects, which are seldom as simple as they appear to be on the surface.

The interpretation and related incorporation of the user and business goals are always challenging. The additional charge to add value in the redesign process proved as challenging as it was rewarding.

I am particularly proud of the Feed page, which provides far superior value-add elements while retaining critical myfitnesspal sponsored content and user tools available in the previous version of the app.

It’s these type of efforts that feed my passion in UX/UI and provide first-hand experience to improve the critical skills needed to take on ever more challenging assignments.