Tophatter Loyalty & Progression Case Study

The Problem

When users first discover Tophatter, they find the shopping experience exciting and fun as they compete to win the auction.

Overtime that excitement gradually decreased and resulted in low retention. How might we spark that excitement & sense of accomplishment in the longer term?

My Role

Wireframe Supervision

Art Direction

UI & Hi-fi Design

The Badge Maker

Process & Solution

Based on user research, personas & previous learning, we have discovered that

• Our user is highly motivated by the desire to win, challenge, achieve and comparative.
• By adding challenges and rewards, it increases user retention.

So we want to leverage the learning and build that into the core shopping experience.

We decided to test the theory by building a badge reward system which can encourage our user to continuously progress & win rewards.

MVP - Winner Badge

Due to the time constrain, we decided to start with an MVP version to get early insights on whether motivating users with a sense of achievement (earning badges) can improve attendance.

• Start with only one type of badge - "Winner Badge" where users earn credits & badges by winning and paying for [numbers] of product[s].
• I designed a fun & delight "Badge Earned" header in the "Order Confirmation" page, to inspired a moment of of excitement & achievement. It also prompt the user to open the "Rewards Page".
• Create a dedicated "Rewards Page" to showcase badges the user has won for the sense of accomplishment & progression.
• Inspire users to collect remaining badges by showing unearned badge in a transparent format.
• User can open up a modal and learn more when tapping onto the badge.
  
• Showcase the user's latest achievement in the header, so they can view it regardless which section they are on.
  

Badges, Badges and More Badges

With Winner Badge, we saw an increase in purchases and we want to further test whether the sense of achievement (collecting badges by completing tasks) itself is motivating enough for the user. As well as keeping up the engagement by offering different types of achievements with more badges that don't offer any credits.

‍

Badge design decision:

• Define grid & keyline shapes to give out sense of unity
• Use the same shape for the badges that are related, differentiate them by color to inspire a sense of "leveling up".
• Use the flat design for brand consistency as well as decrease development time, it's also easier to identify regardless of display size.
• Use brand color to ensure visual consistency.
  

We saw a 13% increase in retention & a 10% increase in the purchase. In which, proved our initial hypothesis that we can increase retention by motivating users with challenges & a sense of accomplishment.

Lastly, with the intention of tying in the sense of achievement, progression, as well as the desire for comparative and competition into core auction experience, we decided to

‍

• Add badges next to the winner's name and allow users to view the winner's profile where all their badges will be showcased.
• Added user avatar & their recent badge onto the header, so the user has easy access to the Rewards page.
• Include stats in Rewards page so user can track their progress at a glance.
  

‍

As result, we saw a large positive impact on return users. Overall a 10% increase in the purchase, and a 7% increase in retention.

Outcome & Learning

Although this is a largely successful project and is still growing strong, there are of course challenges & limitations throughout the process.

MVP

Under the goal of "one feature a week", the team was challenged to break the project down into smaller MVP, in result not only helps us move fast but also gives us much clearer learning throughout the process.

There's NO Perfect Design

During this project, we spent a lot of time going back and forth trying to narrow down a "perfect design" and attempted to address different feedbacks from all stakeholders. What we should do differently for the future is prioritizing low fidelity prototypes and conduct user tests to get early insights quicker.