Miles: Tier Membership Redesign
We all travel: whether by foot 🏃♀️, by car 🚙, or by plane ✈️. Since it is something we all do, why not get rewarded at the same time?
How might we better reward the users who go the extra mile and level the playing field?
Solutions
• Implement new rules in which 50%, 35%, 10%, and 5% of the users will be in the order of the lowest to the highest tier respectively
• Introduce new benefits
• Provide useful information for the users to learn and actively engage in activities
Success Metrics
What to measure in the next 3 months after release:
• 50% of the users fall in ~5% of the intended tier userbase.
• 20% monthly increase of miles spent.
• 20% increase in the number of trips taken.
Team
UX Designer (Me)
PM
Engineers
Duration
3 months
Scope
Information Architecture
Interaction Design
Visual Design
B2C
Tools
Figma
Principle
Pen & Paper
How do we engage users with the new membership experience?
Currently, over 70% of the Miles userbase is in the highest tier, Platinum. Our team at Miles believes that obtaining the highest tier this easily will lead to disengagement and increase user churn.
Therefore, we decided to use this chance to revamp our membership program to make it more challenging so that users can earn hard, reap the benefits harder.
Diving into the problem
After conducting some preliminary research with the internal team:
🙅♀️ Unfamiliar with the Home screen (where membership status is located)
🙅♀️ Does not see the relationship between higher status and better benefits
🙅♀️ Lack of personal achievements or progress
To these users, the lack of discovery and curiosity for the rest of the app besides the Rewards screen prevents them from wanting to explore the full functionality of what they can do with their mileage.
Since we already have the new rules and benefits, we now need to understand how to implement them in a way that makes sense to the users.
Step 1: Revamping the structure
From the survey sent out, most participants believe the most important features are as followed:
In addition, after interviewing some internal users, their needs can be summarized as:
Card Sorting
I implemented a quick and efficient way for card sorting using Figma Jam. This allowed the participants to freely move the cards around to help me understand what is their priority when it comes to possible features for this project.
Interestingly enough, most users ranked terms relating to rewards and benefits the highest, followed by the visual appeal and user information, which to some also includes membership status.
However, this means that to these participants, membership status only comes after benefits and rewards, the complete opposite of the product goal here:
To highlight membership status as the ultimate goal in which a user can enjoy more benefits the higher their status.
Information Architecture
Based on the information above, I created a new structure prioritizing the user's membership progress status, their available mile balance, and personalized features.
Step 2: Testing the waters - Home Screen
After having some initial understanding of how users interact with the existing product and the stakeholder's view on the new tier membership, I then created some very high-level wireframes based upon this knowledge to test with more internal team members and get their first reactions.
Since we want to prioritize the user seeing their progress, we decided to go with the option that includes visibility on both progress bars.
In addition, we also provided easy shortcuts for users to explore our rewards, challenges, raffles, donations, and many more, as these are our main features that engages and monetizes for the app.
Wireframe Evolutions
Branding
Considering the mission of Miles and its features, I wanted to create a fun yet clean UI for the users to enjoy. Some ideas sprouted from looking at apps such as Uber, Trip Advisor, and Duolingo.
Hand-off Documentations
There were many documents that had to be handed off since many of the new features have rules that did not exist before.
In addition, with many new designers and engineers on the team, and the complexity of earning and moving up a membership status, I documented all the scenarios that a user may be in throughout the months.
Having this type of visual timeline not only helps with clarification during implementation but also allows the team to understand how a user's interaction with our product would be.
See the example below:
Results
Current Update
Conclusion
At the start of this project, I did not realize how big of a task this feature would be. Although the main focus really was to redesign the architecture of the app for this new tier membership, a big part of it also rests on creating a more engaging UI that would excite our users to visit the Miles app more often. This meant having to think outside of the box 99% of the time but also aligning it to reality by learning about engineering constraints and budgeting resources.
Key Takeaways
• Organize, organize, organize! Organize all the files and create clear hand-off documents for other team members to refer to.
• Learning to clearly communicate with visual design so that our visions align.
• It really comes in handy to be able to handle not just UX, but also visual and interaction design!
