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.
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.
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.
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.
Introducing components native to Android.
Introducing components native to Android.
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
Updating Sub Navigation, Actions, and Input Fields.
Updating Sub Navigation, Actions, and Input Fields.
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.
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.
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.
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.
Scrappy photo shoot I did in my kitchen.
New Product Family
All dressed up with a new splash screen for mobile and landing page hero for desktop.
Introducing components native to Android.
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