Nikko-Ryan Santillan's profile

MyFitnessPal // iOS Sign Up Flow Redesign

Overview
In April 2016, I began working on phase one of Under Armour Single Sign On (known as, “SSO Minimal”) for MyFitnessPal. Though initially thought to be a simple reconfiguration of field boxes and copy updates within the sign up flow, the project soon expanded because I recognized a prime opportunity for the iOS product—a quick redesign.

Two factors led to this design opportunity:
1. Since the then existing iOS sign up flow was mostly legacy code, the iOS Engineer assigned to the project had to rebuild the flow from scratch before reconfiguring anything.
2. At the time, MyFitnessPal essentially had 5 different versions of their sign up flow for each platform (iPhone, iPad, Android, Web, and mobile-optimized web), and they all looked different from each other—there was no consistency.
The many versions of MyFitnessPal's sign up flow per platform. 
Because the Lead Product Manager didn’t want to expand the scope of this project too much, I championed for simple “quick wins” that illustrated the significant value increase for updating the iOS design. These quick wins aligned not only with the in-app experience of the MyFitnessPal product, but also aligned with the recent Android Material redesign. In my mind, the sign up flow is the point of entry for new MyFitnessPal users. Therefore, it was important to me that this gateway to the product match the actual in-app product experience and product updates that continuously happen across platforms—again, consistency.
Original Task
Reconfigure the existing MyFitnessPal sign up flow to reflect SSO Minimal.  
Expanded Task
In addition to reconfiguring the MyFitnessPal sign up flow for SSO Minimal, redesign the sign up flow for iOS to be more consistent with the app aesthetic and the new Android Material sign up flow design.
Understanding the space
For the purpose of this project, I’m going to focus solely on the iOS redesign for mobile. Since, again, MyFitnessPal had five different versions of a sign up flow for each platform, I took an inventory of what was “out in the wild” and used the latest Android Material redesign as a starting point.
iOS design inconsistencies.
Additionally, I established some design goals for the project and created some parameters to make this as quick and easy as possible for the Engineer.

My design goals were to create something that was:
Clean—reduce the amount of grey, which made the experience feel dark and pre-historic, and freshen things up.
Consistent—reflecting the in-app experience and Android, this meant making the colors, spacing, sizing, and typography consistent with the actual style guide.
Simple—these updates shouldn’t take a lot of time to implement or require heavy coding.

Parameters:
•  Limit the redesign to quick CSS updates that reflect the latest version of the style guide.
•  Start infusing the 8dp Android Material grid system into iOS to reflect platform alignment. This was a design decision made across the Product team level.  
Explorations
After recreating the sign up flow in Sketch, I collaborated with four other members of the Design team to gather feedback and decide on a direction to go in.
Final Design
Redesigned iOS sign up flow. 
Typography, sizing, and spacing specs for the Engineer to follow.
Video walk through of the implemented design with some adjustments made by Engineering. 
MyFitnessPal // iOS Sign Up Flow Redesign
Published:

MyFitnessPal // iOS Sign Up Flow Redesign

.

Published: