Transitioning to a Points-Based Loyalty Program for Westside App
In this article, I share my experience with a 72-hour design challenge aimed at enhancing my UX and UI skills by transforming the Westside app’s membership program into a points-based loyalty system.
Problem statement
Transition the current membership program to a points-based system that allows users to redeem points for discounts and other incentives. Additionally, redesign key user interface pages to enhance user experience. I chose this problem statement because it involves complex challenges that provide an opportunity to effectively utilize my UX and UI design skills.
Solution
The proposed solution replaces the paid membership with a dynamic points-based loyalty club. Users earn points on purchases and advance through tiers, unlocking rewards such as discounts and free shipping. This system not only incentivizes spending but also enhances user engagement and retention.
Why did you decide to replace the paid membership program with a points-based system and add it to the cart page?
The first step was understanding why a shift from a paid membership to a points-based system was necessary. Through research and user feedback, I identified several key insights:
- Many users abandon their purchases due to a lack of immediate rewards. A points system could counter this by providing instant gratification.
- Users generally prefer free rewards over paid memberships. Highlighting potential rewards at the cart stage could encourage them to complete their purchases.
- Leveraging the Zeigarnik effect, a progress bar on the cart page could motivate users to finalize their purchases to achieve their rewards.
- The rewards’ cost would be offset by higher sales and improved customer retention, making the new system financially sustainable.
These insights formed the foundation of my decision to replace the paid membership program with a points-based system and implement it prominently on the cart page.
Learning from the Market (Competitive Research)
To validate my approach, I conducted a competitive analysis of similar loyalty and reward programs in the market. I focused on direct competitors like Myntra and Nykaa Beauty to understand how they structure their loyalty programs.
Competitive analysis of Myntra and Nykaa revealed that their successful loyalty programs offer tiered rewards, immediate points on purchases, and clear progress tracking. These elements were incorporated into the Westside app to ensure a competitive edge.
Then, I made some assumptions regarding both user impact and business metrics, aligning them with relevant heuristics and metrics.
Evaluations and Surveys
Armed with competitive insights, I proceeded with heuristic and non-heuristic evaluations of the existing app. Given the time constraints, I expedited the evaluation process, making educated assumptions and conducting a quick survey to gather user insights.
I distributed the survey through my WhatsApp groups to collect rapid responses. The survey aimed to understand user preferences, shopping behaviors, and expectations from a loyalty program.
Key Survey Insights
- 63% of participants had heard of the Westside app.
- 59% prioritized discounts and offers, while 46% valued product ratings and reviews.
- New trends or styles attracted 69% of respondents, and 75% preferred free memberships.
- Exclusive discounts, free shipping, and early access to sales were among the most desired perks.
- 71% of respondents found ratings and reviews very important in their purchasing decisions.
These insights were crucial in shaping the new loyalty program and ensuring it aligned with user expectations.
Due to time constraints, I’ve synthesized key assumptions and insights from my survey to propel myself forward into the wireframing phase. Let’s dive into the wireframing process armed with these insights!
Wireframing
The wireframing phase focused on key screens: Categories, Product List, Product Description, and Cart. Here are the initial wireframes and the final UI designs, emphasizing simplicity and user engagement
Before starting the UI design, I looked at different platforms to see how they use various UI elements.
From Concept to Reality
The final UI design was informed by best practices and insights from successful loyalty programs. It emphasized simplicity, clarity, and user engagement.
🤔 Still wondering why I opted for a dynamic points system with a moving progress bar over focusing solely on paid membership? Let’s delve into more detailed insights.
Implementing a dynamic points system along with a progress bar serves multiple purposes:
- Gamification and Excitement
- By visualizing their progress through a dynamic progress bar, users experience a sense of achievement and excitement as they move closer to the next tier.
- The quantifiable progress enhances the gamification aspect of the loyalty program, making it more engaging and enjoyable for users.
2. Transparency and Motivation:
- Users can easily track their points accumulation and understand how close they are to reaching the next tier.
- The visibility of progress motivates users to continue engaging with the program to unlock higher rewards.
Scalability of the Points System
To ensure scalability and alignment with business objectives, the points system is structured as follows:
- Tier Progression and Points Required
- Each tier has a progressive number of points required to advance, reflecting increasing levels of customer loyalty and engagement.
- For example, to reach Silver (Stage 2), users need to accumulate 50 points, equivalent to spending ₹5000.
2. Gradual Spending Increase
- Users progress through the tiers by gradually increasing their spending, aligning with the incremental benefits offered at each level.
- Spending requirements for each tier ensure that users are making significant purchases to avail themselves of the rewards, contributing to the business’s sales targets.
3. Ensuring Business Profitability
- The structure ensures that the business generates sufficient sales revenue to offset the cost of rewards.
- By setting spending thresholds for each tier, the program encourages users to make meaningful purchases over time, ensuring that rewards are earned through sustained engagement and spending.
👉Ok! Let’s see the Spending Scenarios
- Level 2 (Silver):
- Users need to spend ₹5000 to accumulate 50 points and reach the Silver tier.
- This represents a significant but achievable spending milestone for users, encouraging them to continue engaging with the loyalty program.
2. Level 3 (Gold)
- To progress to Gold, users must spend an additional ₹10000, totaling ₹15000.
- This higher spending threshold reflects the increased benefits and rewards offered at the Gold tier, incentivizing users to increase their spending to unlock greater perks.
3. Level 4 (Diamond):
- Users need to spend ₹10000 more on top of the previous ₹15000, totaling ₹25000, to unlock the Diamond tier.
- This highest spending requirement signifies the exclusive benefits and rewards reserved for top-tier customers, driving continued engagement and loyalty.
The dynamic points system with a progress bar adds excitement and transparency to the loyalty program, ensuring scalability and aligning with business objectives. Encouraging gradual spending increases and offering incremental rewards fosters long-term customer loyalty and boosts profitability.
You can Prototype it here:
Explanation of the UI
Usability Testing
I had the chance to test my product with two great guys, Bhaskar and Rohit. We did some thorough testing. I gave them a basic idea of what I was working on without too many details. Then, I asked them to look at everything they saw on the screens while I took notes on their observations. It was a fun and insightful experience!
Usability testing with Bhaskar and Rohit revealed that users found the purpose of the Loyalty Card unclear initially. We added introductory text and visual cues, enhancing user understanding and engagement. Here are some of the insights:
- Enhanced the introductory text or visual cues to make the purpose of the Loyalty Card immediately clear. Users now understand the Loyalty Card faster, improving initial engagement.
- Added clear explanations or visual indicators of the rewards and benefits for joining each level. Users now understand what they gain from each level, enhancing motivation to progress.
- Kept the effective color scheme for segregating levels but enhanced the contrast where necessary. Continues to provide clear visual differentiation of levels.
Key takeaways
- User Insights: Prioritizing user needs and preferences ensured high engagement and satisfaction.
- Design Process: Leveraging data-driven insights and an iterative approach led to effective design solutions.
- Business Impact: Aligning the design with business objectives enhanced project success and delivered tangible value.
Conclusion
The transition to a points-based loyalty program not only improved user engagement and satisfaction but also aligned with business goals by driving higher sales and customer retention. This case study demonstrates the importance of user-centric design and data-driven decision-making in creating successful digital products.
Thank you for taking the time to read this case study! Your feedback is valuable to me. Feel free to share your thoughts by reaching out to me at umamahesh.chinchula@gmail.com
