Under Armour Shop App icon. Apple App Store Editors’ Choice.

The Under Armour App

The Best of Under Armour Built Around You

The Under Armour App was built from the ground up as a test bed to validate new direct to consumer and personalization strategies for the business.

Download from the Appe App Store Download from the Google Play Store
3D render of Under Armour Shop App.

Objective

Under Armour was seeing an increasing number of its direct to consumer web traffic coming from mobile devices. This mobile traffic was not performing to the level of other channels. The objective was to establish a native mobile app delivering an elevated experience for these mobile users. The smaller audience of a new native app would allow the team to test different design patterns & strategies, then bring successful learnings back to the larger audience of Under Armour's main website. Out of the gate, the team’s three key objectives were:

  1. Establish a world class mobile experience that elevates the Under Armour brand.
  2. Increase conversion and order size compared to existing direct to consumer channels.
  3. Understand what personalization means to the Under Armour customer and develop a personalization strategy that can extend outside of the mobile app.

Role & Team

In 2015, I joined the team as the first individual contributor. Initially the role centered around facilitating, guiding and inspiring multiple design and development agencies to get the product off the ground. After we launched the Under Armour App on both iOS & Android, I had the opportunity to help build out a skilled and high functioning team of in-house designers, developers, product & project managers.

Establishing the Core

In the beginning the team had tight budget and timeline constraints. We leveraged existing research, personas and mobile web data to quickly establish and launch the needed core elements of any e-commerce experience. From this core we would build and test our way into hitting our key objectives. From our existing mobile web data we were able to establish a set of key tenets we knew we needed to get right for the core experience:

  1. Personalize - Guide the user to the right product for their needs fast.
  2. Progressive - Provide just enough information for the user to make the decision at hand.
  3. Focus - Optimize the best path to take on mobile. Particularly when it comes to checkout.
App screenshot of the feed
For You Feed

The For You feed established a place for the team to test and develop personalized content in the future.

App screenshot of a product grid
Product Grid

The Product Grid leverages a rhythm to highlight products and inject energy into what could otherwise become a repetitive grid.

App screenshot of a product detail page
Product Details

The Product Details gradually elaborates on the product and guides the user through the available options.

App screenshot of checkout
Checkout

Checkout builds on patterns established by Apple Pay and is focused and optimized for mobile.

Listening to The Users

As we established the apps core functionality we used many different methods to research, connect with and understand our users' needs and expectations. Some of these methods included user surveys, user interviews, card sorting, monitoring app reviews, data analysis, and actively participating in customer support.

Google spreadsheet with findings from card sorting research
Behavioral framework radar graph graphing two new feature sets

Behavioral Framework

From our internal research and testing, combined with third party research, we established a behavioral framework for evaluating future features in respect to common user behavior patterns.

This framework became a tool to facilitate conversations. The team leveraged this tool to understand when different direct to consumer channels might want to converge or diverge on a feature.

Product Focused
  • The goal is speed
  • Know exactly what they want
  • Clear product identification
  • Effective search
  • Previous purchases
  • Streamlined checkout
Browser
  • Leisurely shopper
  • Wants to see what has changed
  • New, Popular, Sale
  • Recommendations
  • Sharing
Researcher
  • Collecting information
  • Trust is key
  • Consistent information
  • User Reviews
  • Comparison
  • Flag items of interest
Bargain Hunter
  • Best deal possible
  • Sales & discounts
  • Associated discounts
  • Savings at checkout
One-Time Shopper
  • One-time need
  • Unfamiliarized
  • No account
  • Clear navigation
  • Comprehensive descriptions
  • Trustworthiness

Prototyping & Testing with Real Data

I’m a strong advocate of prototyping and testing new interactions with real data. In many cases this allows design to quickly iterate, uncover edge cases, and validate new features or interactions before consuming front and backend development time. We applied this practice on many of our projects.

An example of this is when the business rolled out extended sizing. We needed to re-evaluate our size selection interaction to better support these new options. We used prototyping with real product data to quickly pull together three variants to test. Our research was also starting to reveal users expectations around personalization included simple things like remembering their preferred size. We were able to leverage this extended size user test to better understand users openness and needs around saving their preferred size.

Prototyping extended size interactions with Framer.
Prototype of variant A used for testing.
Variant A
User interaction flow for variant A prototype.

A more advanced interaction model allowed users to access any available size & length from either selector.

Prototype of variant B used for testing.
Variant B
User interaction flow for variant B prototype.

A more traditional interaction model allowed users to select length first then see available sizes.

Prototype of variant C used for testing.
Variant C
User interaction flow for variant C prototype.

An inversion of variant B allowed users to select size first then see available lengths.

Findings

  1. Users mental models consistently aligned with Variant C with length as a secondary option of size.
  2. Users had different expectations for the short & tall options. This was resolved with the addition of the “+/-2in Length” in later testing.
  3. Users were receptive to the app saving their size. Particularly as size options become multifaceted.
User Flow diagram for loading and saving users preferred size.

Developing a Project Plan

As the test findings are understood and holistic user flows created, the team comes together to develop the project plan. At this stage design can play a pivotal role as a facilitator making sure everyone's voice is heard and accurately represented. The cross-disciplinary team works together to break the project down into manageable chunks of work. The team aligns on project phases with clear expectations of what the user's experience will be in each phase of the project.

Diagram of phased project plan.

Component System

The backbone of the Under Armour app is a modular component system. This system allows the app team to quickly respond to user and business needs with updates to a component taking effect across the entire app. The system also gives our merchandising partners a toolkit to tell evergreen and seasonal campaign stories in the app.

3D exploded view of component system coming together to generate the content feed.
Product Cell

The product cell component provides several levels of details depending on the available space and placement.

Product Scroll Component

The product scroll component along with grid and page components allows merchandisers to display specific products or a category of products.

Hero Image Component

The hero image component allows our content design team to tell relevant product stories alongside shoppable product.

For You Feed

The app is powered by a custom build CMS allowing our partners to leverage this same component system used in the feed across the entire app.

Leveraging this component system enables the team to respond fast as business needs change. For example when the business introduced “Coming Soon” and “Selling Fast” statuses the team was able to quickly update all product cell components across the entire app to support this new business logic.

Decision tree diagram for now to support new product cell states.

Design Progress

Over the years as the team transitioned from external partners to internal resources we have been able to take the product a long way. Elevating the design and introducing needed functionality to meet user needs and expectations.

App screenshot of search from 2015.
2015

The original proof-of-concept pitched by the external agency.

App screenshot of search from 2016.
2016

Design refinement from user feedback and the development process.

  • Mobile Optimizations
App screenshot of search from 2017.
2017

Enhanced accessibility and design consistency.

  • Accessibility
  • Product Clarity
App screenshot of search from 2018.
2018

Empower browsing & researching behaviors.

  • Product Favoriting
  • Additional Colors
  • Alternative Images

Impact

Launching the app, building out an in-house team, and pushing the product forward over the years has demonstrated the potential and opportunities for teammates, the business, and the users.

Apple App Store Editors’ Choice 2015.
Editors' Choice

In 2015 the Under Armour App received the Apple Editors' Choice recognition.

Apple App Store average rating of 4.8 out of 5 starts.
iOS App Rating

Has consistently maintained a high Apple App Store rating since launch.

Apple App Store average rating of 4.7 out of 5 starts.
Android App Rating

Has consistently maintained a high Google Play Store rating since launch.

Line graph illustration of growing conversion and order size.
Conversion & Order Size

Continuously delivers some of the highest conversion & bag size of all direct to consumer channels for the business.

Learnings

  1. The importance of internal alignment of expectations and responsibilities when launching a new direct to consumer channel in a large organization.
  2. The power of being a facilitator and enabler of design on a small team.
  3. The value of trust and partnership across all disciplines of a team.

Whats Next...

  1. Continue to progress through the phases of multiple project plans to maintain the best mobile experience while continuing to test different personalization opportunities.
  2. Bring mobile design & personalization findings back to the core Under Armour website as it enters into a major redesign.