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.
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:
- Establish a world class mobile experience that elevates the Under Armour brand.
- Increase conversion and order size compared to existing direct to consumer channels.
- 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:
- Personalize - Guide the user to the right product for their needs fast.
- Progressive - Provide just enough information for the user to make the decision at hand.
- Focus - Optimize the best path to take on mobile. Particularly when it comes to checkout.
For You Feed
The For You feed established a place for the team to test and develop personalized content in the future.
Product Grid
The Product Grid leverages a rhythm to highlight products and inject energy into what could otherwise become a repetitive grid.
Product Details
The Product Details gradually elaborates on the product and guides the user through the available options.
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.
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.
Variant A
A more advanced interaction model allowed users to access any available size & length from either selector.
Variant B
A more traditional interaction model allowed users to select length first then see available sizes.
Variant C
An inversion of variant B allowed users to select size first then see available lengths.
Findings
- 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.
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.
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.
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.
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.
2015
The original proof-of-concept pitched by the external agency.
2016
Design refinement from user feedback and the development process.
- Mobile Optimizations
2017
Enhanced accessibility and design consistency.
- Accessibility
- Product Clarity
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.
Editors' Choice
In 2015 the Under Armour App received the Apple Editors' Choice recognition.
iOS App Rating
Has consistently maintained a high Apple App Store rating since launch.
Android App Rating
Has consistently maintained a high Google Play Store rating since launch.
Conversion & Order Size
Continuously delivers some of the highest conversion & bag size of all direct to consumer channels for the business.
Learnings
- The importance of internal alignment of expectations and responsibilities when launching a new direct to consumer channel in a large organization.
- The power of being a facilitator and enabler of design on a small team.
- The value of trust and partnership across all disciplines of a team.
Whats Next...
- Continue to progress through the phases of multiple project plans to maintain the best mobile experience while continuing to test different personalization opportunities.
- Bring mobile design & personalization findings back to the core Under Armour website as it enters into a major redesign.