cover_mfp@2x_new

MyFitnessPal

MyFitnessPal

I joined MyFitnessPal in December, 2012. As the first, and for a long time, the only designer, I was heavily involved in helping create an end to end, product design to launch process with the product and engineering teams. During my time there, I was responsible for the redesign of the product family on iOS, Android, and web platforms.  Creating a new UI library, typography, color palette and refreshing and extending the brand. 

Below, are a couple of product projects that stood out from my time there. Redesigning the mobile products for iOS, Android and responsive web, along with updating and extending the MyFitnessPal brand.

Mobile Redesign

Mobile Apps Redesign

Mobile Apps Redesign

img_old_product_family@2x

Original Product Family

Original Product Family

The Problem

What was the problem?

What started as an online tool to help Mike Lee (co-founder) lose weight, organically grew to a product that supported 33 mil users on multiple platforms. However, the original MVP product was not built to scale. Investing the time now would create long term impact of saving time and money in the future.

The redesign was an opportunity to widen our user base by expanding to new countries. It was also a great time to improve the user experience and increase its value to existing users.

img_mfp_original_apps@2x

Considerations

  • How can we make this utilitarian app intuitive, easy to use and beautiful?

  • Who are our users?

  • Being mindful of not abandoning our existing users.

  • How will the new design system look and work across all the platforms today and in the future?

  • How will the brand evolve?

  • Localization was up ahead in the pipeline.

Android App Redesign

Android App Redesign

Dates: 2013
Roles: Product Design and Creative Direction

Dates: 2012 – 2014
Roles: Product Design, Creative Direction, Photography and Art Direction

It made most sense to tackle the navigation first. Because it takes into consideration how the brand will be presented across the platforms. Then design the rest of the Visual/UI based on the approved navigation design.

It made most sense to tackle the navigation first. Because it takes into consideration how the brand will be presented across the platforms. Then design the rest of the Visual/UI based on the approved navigation design.

It made most sense to tackle the navigation first. Because it takes into consideration how the brand will be presented across the platforms. Then design the rest of the Visual/UI based on the approved navigation design.

img_mfp_android_action_bar@2x

Introducing components native to Android.

Introducing components native to Android.

img_mfp_android_iterations@2x

Evolution of Android navigation while the Android Guidelines were still evolving, 2013.

Evolution of Android Navigation while the Android Guidelines were still evolving.

Evolution of Android Navigation while the Android Guidelines were still evolving.

Final Navigation

Final Navigation

img_mfp_android_final_nav@2x

Updating Sub Navigation, Actions, and Input Fields.

Updating Sub Navigation, Actions, and Input Fields.

img_mfp_ui_update@2x

iOS App Redesign

iOS App Redesign

Dates: 2014
Roles: Product Design, Creative Direction, Photography and Art Direction

Dates: 2012 – 2014
Roles: Product Design, Creative Direction, Photography and Art Direction

For iOS, we rolled out the navigation in two updates. The first update was with a Hamburger Menu, which didn't do so well. Our second update (and winner) was the Flyout Menu.

img_mfp_nav2@2x

Bottom nav visual design by David Luhman

Reduce & Simplify

Reduction of Steps 

The app originally had 144 screens and took the user 3-5 levels deep to do any one task, for example, adding a food item. If you can imagine adding a whole meal, the user would have to do the 3-5 steps multiple times. We simplified the Add Food flow from 5 screens deep to just 2 screens deep and replaced all the extra screens with modals and in-line editing.

The app originally had 144 screens and took the user 3-5 levels deep to do any one task, for example, adding a food item. If you can imagine adding a whole meal, the user would have to do the 3-5 steps multiple times. We simplified the Add Food flow from 5 screens deep to just 2 screens deep and replaced all the extra screens with modals and in-line editing.

The app originally had 144 screens and took the user 3-5 levels deep to do any one task, for example, adding a food item. If you can imagine adding a whole meal, the user would have to do the 3-5 steps multiple times. We simplified the Add Food flow from 5 screens deep to just 2 screens deep and replaced all the extra screens with modals and in-line editing.

img_mfp_addflow@2x

Update Branding

Update Branding

Simplifying the logo was the beginning of an updated logo and a new color palette.

Simplifying the logo was the beginning of an updated logo and a new color palette.

Simplifying the logo was the beginning of an updated logo and a new color palette.

img_mfp_logos@2x
img_mfp_colorpalette@2x

New Splash Screen Photo Shoot

Could not launch the new app with an old splash screen.

Could not launch the new app with an old splash screen.

img_mfp_old_splash@2x
img_photoshoot@2x

Scrappy photo shoot I did in my kitchen.

New Product Family

img_new_product_family@2x

All dressed up with a new splash screen for mobile and landing page hero for desktop.

Introducing components native to Android.

img_new_product_family2@2x

New UI for all platforms.

Introducing components native to Android.

Challenges

  • Evolving Android Guidelines

  • Frankenstein moments

  • Supporting the old (iOS6), while designing the new (iOS7)

Results

  • iPhone app featured in the App Store for the first time 2013

  • Best of 2013 iPhone and iPad app, Fitness Revolution category of App Store

  • Best New App, iPad 2014

  • Localized in 10 languages - MFP becomes #1 in all LATAM countries

  • Significant reduction of support team inquiries and reduced complexity of FAQ documentation.

  • iPhone app featured in the App Store for the first time 2013

  • Best of 2013 iPhone and iPad app, Fitness Revolution category of App Store

  • Best New App, iPad 2014

  • Localized in 10 languages - MFP becomes #1 in all LATAM countries and more, coming from top 500.

  • Significant reduction of support team inquiries by bringing the feature set and UI into parity between platforms. Also reducing complexity of FAQ documentation.

Final Thoughts

When I joined MFP, there were close to 30 million users. During my time there,  registered users grew to over 80 million. I’m thrilled to have worked on an app that helped millions of people change their lives for the better. We did our best as a lean team. The MyFitnessPal app is now at a place where it can grow and become even more impactful.

Check out the MyFitnessPal iOS App and the Android App.

Selected Works

GoogleGrowth design

Babylist StorePRODUCT DESIGN

Babylist MobilePRODUCT DESIGN

MyFitnessPal MobilePRODUCT DESIGN

Seamless Partner AppPRODUCT DESIGN

Bloomberg MobileVisual & Interaction Design

@2017 Helen Chi