🏃🏽‍♀️Under Armour MapMyRun Visual Refresh

My Role

Strategy
UX/UI
User Testing
‍

Platforms

Responsive Web
iOS & Android App

Toolkit

Figma
Miro
UserTesting.com

Under Armour builds products and experiences with a focus on progressing athlete performance.

MapMyRun’s focus is the same, but consumers are struggling making the connection. MapMyRun users are sometimes not Under Armour consumers and vice versa.
‍

The Ask

Maximize user interaction and participation across all of Under Armour's digital products.

The potential

Enhancing the overall appeal, usability, and alignment with current design trends, MapMyRun will attract and retain Under Armour consumers and, consequently, MapMyRun users will convert to Under Armour consumers.

The solution

Update MapMyRun across all platforms to align with the Under Armour brand identity increasing engagement across the omni-channel experience.

Background

With origins dating back to 2005, MapMyRun is a veteran of the online health and fitness space, having built a suite of websites and apps (like MapMyFitness, MapMyRide, MapMyWalk, et al) that allow fitness novices and enthusiasts alike to track and store their running, cycling, walking and hiking activity.

In 2013, Under Armour acquired MapMyRun to modernize and maintain its relevance in a mobile world. With MapMyRun, Under Armour has the foundation on which it plans to build a new, digital training experience.

Under Armour’s MapMyRun offers a comprehensive platform for athletes to track their activity, progress, stay motivated, and connect with a community of fellow athletes. The Visual Refresh project for MapMyRun involved updating every screen product-wide, specifically leading the effort for the web platform, to create a seamless user experience and showing that Under Armour makes athletes better with all their products.

Design system HOMEPAGE WORKOUTS ROUTES COMMUNITY PROFILE MOBILE APP

1 / Building the Baselayer Design System

The design system was built from the ground up, beginning with the core such as color palette, typography, and grid system, and gradually expanding to encompass a wide range of components including buttons, controls, input fields, navigation menus, and modals.

2 / Creating a Higher Impact Homepage

The homepage was redesigned by updating the interface to the new design system, incorporating interaction animations for added dynamism, and implementing a user-centric content strategy aligned with business goals. Collaboration with global creative teams ensured the injection of the brand's voice and aesthetic into the design.

Compare the live redesigned homepage with the old homepage.

3 / Workout Pages for the Detail-Oriented Athlete

The web workout pages provide more detailed stats and a better view of an athlete's long-term progress, making them ideal for a focused performer. That's why it was crucial to strike a balance between functionality and the new minimalist visual design during the redesign to still cater to those needs.

Dashboard

User can see all their activities month-to-month at a quick glance.
Utilize hover interactions and iconography in trade for lack of color choice in new palette.
Add UX improvements like Add Workout button on hover state for each date square.

Detailed stats

User can see their stats during different lengths of time (5 Weeks, Yearly, etc.) easily viewing and comparing their progress.
Update graphs, colors and fonts to new styleguide.
Restructure logic of filters to match user expectations.

Workout Details

User is able to see details of a specific workout and edit, copy, download, cut and share that workout.
Utilize interactions in trade for lack of color choice in new palette for stat graph.
Add stat definition modal for to increase awareness of what to look for and coaching tips to get better.

Cut Workout

User can cut existing working out into 2 segments based on the duration or distance.
Add interactions to emphasize which segment is active and being edited.
Improve responsive design for smaller screen sizes due to feature only being available on web.

4 / Invoking Curiosity and Utility in Route Pages

At the core of MapMyRun lies its route tracking feature, making the routes pages ranked highest in engagement across the entire site. When redesigning these pages, our focus was on enhancing the utility of mapping out running or cycling routes while also evoking the thrill of discovering new routes.

5 / Connection and Motivation Through Community Pages

Within our community pages, athletes engage in friendly competition through the Challenges feature, draw inspiration from their friends' fitness achievements on the Activity Feed, and forge connections with other MapMyRun athletes using the Friends pages.

5 / Setting Up a Personalized Experience with Profile

The profile pages serve as the central hub for athletes to establish their account and preferences for a more personalized experience. Therefore, it was crucial to create a clean and intuitive design, ensuring that athletes can effortlessly comprehend and manage their settings.

6 / The On-the-Go Experience in Mobile App

The Visual Refresh project encompassed all platforms, including the IOS and Android mobile apps. While I spearheaded the web redesign, I actively contributed to revamping the Shoe Home and Profile sections for the IOS app, to ensure a cohesive and visually appealing experience across all platforms.

SHOE HOME

Update fonts and colors to style guide.
Make sure stats are emphasized to show life of the shoe.
Tie colorway of shoe with background.

Profile

Change stat styles and graphs to match across platforms.
Update fonts and colors to Under Armour branding.
Reorganize layout to allow for better legibility.

Outcomes

Celebrating the Wins

There was no page left behind. In total, I redesigned 102 pages, which totaled to 510 variants with the 5 different breakpoints.
‍
For some of our higher impact pages like Dashboard, achieved some notable KPIs:

100% improvement in logging a workout after viewing the Dashboard with adding the new plus button that appears on hover over each day
6.85% improvement in viewing Workout Details from Dashboard
21% improvement in overall engagement on Stats page
On track for improvement in people discovering Lifetime Stats for the first time

Working on this project was a delightful experience as it ignited my system-thinking abilities, allowing me to construct a scalable design system. I had the opportunity to take full ownership of the design work for the Web Team, fostering collaboration not only within the team but also across various departments at Under Armour.

Want to know more? View the work that made it to production.

View LIVE website ➞

old MAPMYRUN homepage

Update included taking out old blue accent color, fonts, and imagery seen below, as well as rethinking the content hierarchy.

Under armour Mapmyrun

My Role

Platforms

Toolkit

Jump to

The Strategy

‍The Idea

‍The Outcome