United Airlines: MilePlay
Mile Play, originally launched by United in 2019, is a gamification program designed to boost customer engagement. It generates $6 million annually through three targeted challenge types offering rewards like bonus miles, seat upgrades, and free food/drinks. These challenges are customized based on customer profiles, favoring frequent flyers. United's marketing team aimed to rebrand Mile Play with updated visuals and UX to align with the app's new look. Hey now you’re an All Star, get your game on, go play 💫
United Airlines app available on Apple App Store and Google Play Store
Role ——
Senior UX Designer on mobile
Duration Length ——
5 months (Feb 2024 - May 2024)
Launched ——
September 2024
Responsibilities ——
Partnered with off-shore developers to understand feasibility and lend a guiding hand to new design direction, Lead a virtual workshop with UX research, marketing team and design management, Helped ID UX functionality issues for a potential 2nd release, Exchanged friendship bracelets with a principal designer to understand roadmap for features, Validate with in-house accessibility team on compliance for mobile.
Previous Design
As the self-proclaimed ‘rebrand queen’ wrestling to establish dominance with the rebrand efforts for mobile (see my case study for that one) proved to be a challenge in its self. I was one of the first designers to go ham with altering an already existing feature in the United app with the new rebrand. I mean no pressure, right?
— Design was riddled with lengthy corporate jargon language, which caused confusion by 52% of customers.
— 33% of customers said they would give up the challenges based on forgetting they started them or the challenges were too hard to complete.
— Customers loved incentives that would drive them to keep going with the challenges. They especially like challenges that offered flight discounts or similar discount pricing on other flight reward platforms (Ex: Chase Travel).
What’s the problem?
How can we update the Mile Play offer type to reflect new branding standards while also creating a more intuitive and accessible experience?
Usability goals ——
Ensure that users can easily understand and track their progress within the Mile Play challenges, clearly comprehend what actions were required to complete activities, and navigate the interface effortlessly to find necessary information.
Business goals ——
Increase user engagement with the game by updating the experience with new branding, encourage users to redeem their reward codes more effectively and introduce new challenge types for customers to complete. If you ask me the Wade Bogg’s challenge a la It’s Always Sunny in Philadelphia would’ve been a hit.
Predicted outcome ——
By applying the rebrand, more customers would be enticed to interact with the United brand. With upgrades to both the UI and UX, the game challenges customers would have a better chance at completing the challenges, thus racking up moment and start to play for bigger rewards.
Workin’ on the Shop
The team began with a virtual Figjam workshop to assess current and future needs for MilePlay. Here’s some of those ideas ID’d in the workshop.
- New game types based on user preferences to reach newer audiences.
- New rewards types like free Polaris lounge access, were considered cool but deemed out of scope for the initial release.
- Stylize the progress bars to match the game types.
Cookin’ up the UX and UI
First was to compile a UX flow chart of how MilePlay works and how to play for rewards. Focus then shifted to redesigning how users access challenges, updating app home and offers page entry points with cards showing key info like time remaining, progress, and rewards. Additionally, UX improvements were proposed to simplify gameplay, making task participation and progress tracking more intuitive.
UX Flow Chart
How MilePlay integrates with one another and how to play for rewards based on task type.
Game Challenge Cards
I developed color schemes for each challenge type based on rebrand colors variations that influenced the overall palette of related screens. Animations and colors were used strategically to highlight offers and attract more participants. Since me and After Effects have beef with one another, all animations were created by a brand designer. Card animations were capped at less than 3 seconds and played only once for accessibility compliance.
Stay the Course : Complete the same activity multiple times to earn the big reward. Due to the repetitive nature of Stay the Course challenges, we opted for a numerical approach, allowing customers to easily track how many times they need to complete the activity.
Level Up : Complete activities to win rewards along the way, with a bonus for completing all activities. In the Level Up challenge, users earn miles for each game they complete. To help them visually track their progress, we created a segmented progress line with numerical annotations showing how many miles they've earned so far.
Do It All : Complete all activities to win reward. In the Do It All challenge, users have unique activities but only earn a reward at the end. To represent the activities that are in progress or yet to be completed, we used icons from the design system.
Earlier Card Designs
In earlier designs, the game cards had less emphasis on animations, game names and layout of challenge content on the cards. The idea was still to keep the tri-color bar as this was a new design created for the United brand by the brand team to use in many places on the mobile app and website experience. Do It All has a yellow treatment originally but based on brand color pairing and accessibility concerns using lighter yellows, it was a choice to step away from these colors. Also just straight up look like I’m rootin’ for the Packers with this color choice. Go Pack Go?
Challenge Pages
After registering for the challenge, customers can complete activities through the offer detail page. Here, they can tap actions that directly guide them to the correct path for each activity. While the offer detail pages share the same template, they vary slightly depending on the challenge type. Header animations were capped at less than 3 seconds and played only once for accessibility compliance.
Stay the Course ——
Features a single activity card, designed to make it clear to users that they only need to complete one type of activity.
Level Up ——
Divides activities into different block links, allowing users to see how much they can earn for each type.
Do It All ——
Similar to Level Up, but without numerical annotations, as users don’t earn rewards along the way. Instead, we provided a checklist to help users track their progress to ensure they complete the challenge.
User Testing
Testing was done using a moderated session on usertesting.com with 9 participants, 3 per game type, using Figma prototypes on their smartphones.
Got it, chief 🫡 ——
7/9 participants found the progress bars easy to understand, and the actions needed to complete the challenges were clear.
Let’s get physical ——
The games were perceived more as fitness challenges, similar to Fitbit, rather than traditional games.
FAQs on FAQS ——
Participants still found the FAQ section overly legalistic and challenging to navigate, particularly when trying to find specific answers.
Trippin’ on trips ——
Participants struggled with understanding what constituted a “trip” within the challenges. Do I book the trip and get my points or do I book and take the trip then get my points after I do both of those actions?
Final Design
Launch & Metrics
Mile Play released in September 2024 on the United Airlines native app and website with the following predicted metrics/future opportunities:
Who are you people?! ——
With a more approachable design, we aim to attract new users to Mile Play.
Flying high with increased bookings ——
We anticipated a rise in flight bookings that contribute to user challenges especially with Stay the Course as the most popular/revenue generating.
Decode this ——
Enhanced clarity around reward codes should lead to increased usage, encouraging users to participate in more Mile Play challenges.
Big plans for the future ——
Integrate Mile Pool with Mile Play challenges allowing users to combine miles earned from Mile Play directly to other MileagePlus® members. Introduce a leaderboard to motivate users to engage more frequently. Make flights actually tolerable from crying children, Karen’s and turbulence by doing a drinking challenge 30,000 feet in the air. Complete this challenge to get put on the ‘no fly’ list. (Kidding on this last one).