Visioning for UA MapMyRun
After 10+ years on the market, MapMyRun was barely holding itself together with a decaying tech stack and a myriad of mismatched app experiences, none of which really aligned with the Under Armour brand. Multiple surveys over the years made it very clear that there was a distinct disconnect between the fitness-tracking apps we owned and Under Armour as a whole. It was time for an upgraded and aligned product. Engineering teams started planning to completely overhaul the tech stack, ripping out old unused code, rebuilding databases from the ground up, and optimizing the overall responsiveness of the app, with a dual goal of reducing costs and improving the user experience to guide them. Our design team took this opportunity to help improve the user experience and increase brand affinity by giving the app a complete visual refresh.
Visioning for UA MapMyRun
Our goal was to envision what a true Under Armour running app could feel like, elevating the existing product features into a true performance and coaching service. Our 3-5 year plan was to shift MapMyRun from a casual consumer-level run tracking app into an essential tool for our core audience - what we dubbed the “Focused Performer”. Tracking your activity was only a small part of the overall experience - the true value came in the analysis, insights and coaching we offered. Under Armour is a performance company and our app needed to embody that.
After months of iterating and testing new visual and UX directions we landed on some key themes, leveraging Under Armours well-established brand guidelines into a comprehensive visual language for digital products. All we needed to do was update the app interface... without completely disrupting the core experience. We decided it was time for a true Design System - one that would embody the Under Armour brand through the interface, and scale across multiple digital products, from web to wearables. We dusted off an old attempt at a styleguide called Baselayer and pivoted it into a foundational design system.
Principles keep a project focused and aligned and on-track. We established some basic ones right away, and adapted them as we went:
Start with system components. - Material Design and HIG - as basis for surface-level components and interactions. Introduce custom components at brand-specific touchpoints.
Keep the Focused Performer at the forefront. Everything we did had to, at the very least, not disrupt the progress any of our users had made in their fitness journey. We couldn’t overhaul a critical training feature in the middle of a runner’s couch-to-5k efforts. Our visual changes had to enhance them. We did this by elevating the truly important parts of our features through larger, bolder more prominent elements like training stats and graphs. The data was all the same, just easier to read.
Introduce branded moments at key points. We couldn’t just slap a logo on a page and say this was branded. We had to be a conduit into the brand team to truly position MapMyRun as an extension of the brand. We would carefully craft or select imagery and styles from brand team that connected the two entities, overcoming that disconnect that kept users from seeing the app as an Under Armour property. We created branded components that supported campaigns, so the aesthetic you saw in the app matched what you encountered in the stores.
Under Armour’s official font is called Neue Plak UA, a custom version of Neue Plak. We were already using a variation on the family that was fine tuned to our mobile app-based interface, but we kept seeing visual discrepancies. I dug in with engineers to identify the source of the issues and fix them once and for all.
Font Styles for MapMyRun
Fixing discrepancies in the code
Possibly our biggest change was when we decided to ditch the MapMyRun Blue. It wasn’t easy to say goodbye to a color strategy that played a big role in the overall earlier success of the MapMyFitness suite of apps, but it was clearly a necessity to achieve our goal of bringing the apps into the Under Armour brand. We didn’t have an equally impactful option to switch to... Under Armour’s brand palette was primariliy shades of grey with a solid black and a solid white at either end. The only interesting brand color we had to play with was a red, and given the negative connotation of a red UI element, we had to be incredibly intentional with when and where we used it. Our first challenge was to replace the vibrantly-colored elements of MapMyRun with a cleaner palette, before we could introduce a new, more brand-aligned color. We also had to avoid just relying on UA Brand Red as our primary identifier. I began reorganizing our color palettes into intentional uses, establishing a new UA Digital family of colors that would eventually complement and support the primary Brand palette.
Separating and organizing colors by application. A WIP that never got to its final stages.
Following our principle of adhering to system-level basics, we built out components that felt natural in their given platform but also clearly an Under Armour asset. We did this using brand fonts and colors, and leveraging brand imagery when possible. This make a clear and distinct connection to the app and all the other campaign materials Under Armour would produce.
Snapshot of the Baselayer components
Our design system had it’;s own design system, including helpful resources that kept our files clean and organized and consistent. I created a set of spec elements for VQA purposes.
Useful file markup components, all auto-layout’d
Detailed layout and behaviour specs
One of my personal principles while building baselayer was to keep the end users of the system - our design team - in mind. I would regularly check in with the team to make sure everything was working as expected, tweaking the file structure and organizing elements in a logical manner that allowed for quick search and place by my teamates.
File organization for end users of the library
We worked closely with product, project and engineering teams to bring UA Baselayer to life using a phased, targeted approach that updated key features with minimal disruption to the overall experience. Any desired UX updates were carefully vetted and conservatively implemented. This kept the app familiar to our users, avoiding any of the typical backlash against major app updates. We rolled out these changes over about 6 months, combining efforts with the code cleanup projects taking place across our infrastructure. These combined upgrades and improvements resulted in better user experiences across the product, and positioned the app as a true extension of the Under Armour brand.
Updated Training Plans feature
Updated Workout Details screen using Baselayer components
Updated Workout Details screen using Baselayer components
The first success we had with our new design system was when an engineer found a sub screen that hadn’t been included in our design documents and was able to just apply the new components to it without needing a fully spec’d out design file for it. It was a minor screen buried under some settings that our users barely ever saw, so an engineer updating the interface with little or no input from design team was very low-risk, but it revealed the potential of a full design system: build and ship quality on-brand interfaces faster. It shifted the dynamic a bit from designer->developer handoff to developer->designer review. We just had to give the final ok on the new interface and boom it was done.
A much more impactful success was found with our Friend Challenges feature. Engineering had subcontracted the revamp of the codebase for this feature and unfortunately the result was an even worse experience in terms of on-brand ui. I worked with our engineers to address the issues from mismatched fonts, misaligned margins, incorrect colors - pretty much everything needed fixing! Lucky for us we had most components already built and could easily just swap out the chaotic custom coded versions for the new Baselayer elements. A visual refresh of a main feature that would have taken multiple sprints worth of back and forth between design and engineering now took a week.
