Project Baselayer:
Designing and launching 1 feature across a suite of apps with unique branding.

PRODUCT

MapMyFitness,
MyFitnessPal,
Q3-Q4 2020

PLATFORM

iOS & Android

ROLE

Designer (1 of 2)
- Product Designer
- User validation & research
- Unified design language system

BACKGROUND

In 2020, Under Armour was exploring the potential of building a new weightlifting focused app. Unsure of its demand, the leadership team wanted ways to test out interest before investing in resources to build a brand new app. The strategy was to leverage Under Armour’s portfolio of fitness apps to test out interest, and build a user base.

THE CHALLENGE

Despite being owned by Under Armour, all the products operated individually since they were acquired as separate existing products in 2014. While the apps were able to sync user data across the products in 2020, each app had its own unique design system, code base and ux flows. As a result, the task of building a single feature and deploying it across multiple products had its challenges.

In addition to the product experiences and look & feel being totally different, we also had challenges operationally.

  • Product teams were not only located separately (Austin & San Francisco), but had also never worked together.

  • With this being an Under Armour forward initiative, product teams felt obligated to adopt this project, but were not 100% bought in.

  • Teams knew nothing about the other apps – this included working processes, code bases, complexities, dependencies, etc. Even our exercise databases were separate entities.

SOLUTIONS

Creating a theme-able design system.

For the feature to integrate seamlessly into the app and earn favor with the product teams, we made sure to stay true to the app’s design systems and existing behaviors/flows.

Taking inspiration from how Dark Mode worked, we copied the methodology here and created a theme-able library for this feature. I identified the styles used for this feature and mapped the corresponding styles from each design language system. That way, even though the font styles, sizes and colors were different for each app, the use cases remained the same.

Names of styles were tied to function, rather than attributes (eg. color name, font name), to minimize confusion and support the different brand themes. This allows us to add more product themes later on and expand this feature and theme switcher functionality across the board.

Applying theming capabilities to our
workflow to improve efficiency.

For the design team, we leveraged the component library functionality to switch out components such as button and icons. For anything that was limited to color and font variability, we were able to use the figma plugin – Themer to help us auto translate screens with the click of a button. This allowed us to see how designs looked on each product without having to rebuild each screen.

For the dev team: After showing the development team how the design team worked, the dev team was inspired to create their own tool to save them time. They built themselves their own themer tool as well, which made doing visual QA a breeze as we could easily switch between the apps.

 

Deviations in flows to stay true to the app experience and expected behaviors.

Both MapMyFitness and MyFitnessPal had existing logging functionalities. As such, users would expect the flows to behave in a consistent manner. For the sake of maintaining user expectations with consistency of behavior, we chose to deviate each experience to stay true to their parent app. For example, on MapMy, saving a workout requires a user to create a newsfeed post in order for it to be saved. On MyFitnessPal, a user would be taken to the diary instead. No feed post is generated. In another scenario, MyFitnessPal’s legacy code and limitations meant that we were unable to generate a robust workout detail screen. Instead, users are only limited to view the workout’s duration and calorie, with no access to any of the workout routine’s details, such as name, exercise completed, and the rep/load etc records of the exercises performed.

Lessons learnt:

WORKING ACROSS 3 PRODUCT TEAMS

As a designer working for MyFitnessPal based in the MapMyRun Austin office, I was in a unique position of having relationships and familiarity with the teams and products on both sides. Having established relationships and trust enabled me to be the bridge between the 3 teams, alerting my own team to processes, product history, and so much more.

Apart from my fortunate position, several things that made this working model successful:

  • Involving product stakeholders and gatekeepers from each product at every stage. – the transparency helped to build confidence in our “agency-like team,” and built trust with the respective members that we weren’t there to bulldoze our way through. Through our consultations with them, we made sure their concerns were heard and this exchange of information also allowed us to work efficiently.

  • Regular gatekeeping and guardrails helped to ensure things were approved by the product teams before they were merged into builds.

  • Respecting timezones and identifying “friendly meeting times”. This enabled members of each team to attend all meetings so that no one felt like they were inconvenienced by us.

  • Defining the workflow processes, expectations and fears at the start, having regular retros to adjust and obtain feedback from not just our internal team, but with product stakeholders as well.

PROJECT OUTCOMES

This project lasted for 2 quarters before Under Armour and MyFitnessPal divested in Dec 2020, unfortunately putting an end to the project and its future iterative improvements.

That said, there were bonus outcomes from this effort:

  • Both MyFitnessPal and MapMyRun product teams benefited in having a formal design language system that could be used by both designers and devs.

  • Our learnings from this theme switcher set up the foundation for enabling dark mode functionality in both apps.

  • Feature resulted in a 38% increase in strength training type workouts logged in MyFitnessPal compared to the existing functionality.