Black Under Armour app icon with the Under Armour logo in the center Apple’s AppStore Editors’ Choice badge

The Best of Under Armour Built Around You

The Under Armour app was built from the ground up to deliver a world class experience for a growing mobile audience. In parallel the product created a space for the business to test and optimize personalization strategies.

Floating iPhone mockup of the Under Armour shopping app displaying a users favorited products in a personalized content feed

The Under Armour app gets you moving fast with instant recommendations of stylish products tailored to your favorite sports and activities. Gorgeous photography’s a given, but the app's design is really the all-star—it makes it so easy to find new gear.

—Apple App Store Editors’ Notes

Objective & Role

Leading up to 2015 Under Armour was experiencing an increase in mobile web traffic. Our objective was to quickly establish a native, world class iOS and Android experience for this growing audience. In 2015, I joined the Direct-to-Consumer team as the first individual contributor. Initially I facilitated, guided, and inspired multiple design and development agencies to bring the product to market. After the launch I had the opportunity to help build out a high functioning and cross-disciplinary internal team to maintain and refine the product.

Establishing the Baseline

The initial timeline was tight so we leveraged existing research, personas and mobile web data to define our approach. We established three key tenets to guide our decisions as we built a scalable baseline for the product.


Guide the user to the right product for their needs.


Provide just enough information for the user to make the decision at hand.


Elevate the best path for the user to take when on mobile.

Under Armour app mockup of the For You feed displaying personalized product recommendations

For You Feed

A place for personalized content and recommendations.

Under Armour app mockup of a product grid utilizing a pattern with variable product image sizes

Product Grid

Leverages rhythm to highlight and inject energy into the experience.

Under Armour app mockup of a minimalist product detail page

Product Details

Elaborates on and guides the user through the available options.

Under Armour app mockup of the checkout process contained in a single UI bottom drawer


Focuses and optimizes the process for mobile.

Listen to The Users

As the baseline functionality launched the team monitored app reviews and product analytics. This observation period helped the team identify our blindspots and align on the best research methodologies to bring more light to these blindspots. One initial focus area was understanding the users’ different needs when in a browse vs. purchase mindset.

Google Spreadsheet of heat mapped ranked results from a card sorting exercise
Radar chart of the coverage area for two different product features mapped to the user behavioral framework

Behavioral Framework

From this initial research, combined with secondary research, we established a behavioral framework. This framework became a tool for the team to evaluate features and understand when and why different Under Armour channels may converge or diverge on an approach.

Test & Iterate

I’m a strong advocate of prototyping and testing new interactions with real data. From our research we identified the opportunity to improve the size selection functionality. The initial size selection functionality did not fulfill our key tenets nor our users needs. After stakeholder interviews and a team brainstorm session I pulled together three prototypes powered by real data. The prototypes were tested with users to understand their mental model and the best path forward for this functionality.

Integrated development environment with prototype code displayed next to working native prototype
Price and color selection portion of the Under Armour shopping apps product detail page
Simplified diagram of variant A where users can select any size or length option from either picker

Variant A

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

Price and color selection portion of the Under Armour shopping apps product detail page
Simplified diagram of variant B where users select a length option before selecting a size option

Variant B

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

Price and color selection portion of the Under Armour shopping apps product detail page
Simplified diagram of variant C where users select a size option before selecting a length option

Variant C

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



Users' mental models consistently aligned with Variant C with length as a secondary option of size.


Users had different expectations for the short & tall options. This was resolved with the addition of the “+/-2in Length” in later testing.


Users were receptive to the app saving their size. Particularly as size options become multifaceted.


With a clear direction forward the cross-disciplinary team came back together to develop a phased project plan. At this stage design plays a pivotal role as a facilitator making sure everyone's voice is heard and accurately represented. Clear visual documentation is vital for alignment and understanding of what the user's experience will be at each phase of the project release.

Decision tree and wireframes outlining the implementation for length and size selection along with saved size preferences Phased implementation project plan with clear experience summary and hypothesis for each phase of the projects rollout

Product Progress

Over the years this agile and collaborative approach has empowered the team to fluidly build on the baseline product as the team, business, and user needs and expectations shift. This progressive and achievable improvement can be seen in every corner of the app.

The Under Armour apps search results page from 2015 with large bulky UI elements


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

The Under Armour apps search results page from 2016 with UI optimized for smaller mobile devices


Design refinement from user feedback and the development process.

  • Mobile Optimizations
The Under Armour apps search results page from 2017 with improvements to contrast, accessibility, and layout


Enhanced accessibility and design consistency.

  • Accessibility
  • Product Clarity
The Under Armour apps search results page from 2018 with new power user features like product favoriting


Empower browsing & researching behaviors.

  • Product Favoriting
  • Additional Colors
  • Alternative Images


Launching the apps, 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’s AppStore Editors’ Choice badge from 2015

Editors' Choice

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

Reviews and ratings stars with 4.75 of 5 stars active

App Rating

The iOS (4.8) and Android (4.7) apps have consistently maintained high App Store ratings since launch.

Simplified line graph of increasing conversion and order size overtime


The apps continuously deliver the highest conversion & order size of all Under Armour direct-to-consumer channels.