Gamify eCommerce

How gamification helps Tophatter the auction-based eCommerce platform lift 56% in time spent and 5.9 million lift in GTV in a quarter.

Gamify Ecommerce Header


In July 2020, we discovered that Tophatter’s user attendance has dropped when compared to 2019.

How might we keep users engaged on daily basis? Became the top priority for the company as well as the Buyer Team. Meanwhile, our team’s initiative of the quarter was “making the deal-hunting experience a fun game”

Little did we know, these two ideas lead to a whole new world for Tophatter and its customers.

My Role

Sole Designer

Wireframe & User Flow

User Research

Hi-Fi Design


Process & Solution

Phrase 1 - Daily Check-in with a little twist

We want to leverage our learning such as,

  • We tested Daily Check-in and know it does well and improved attendance
  • We know that our users are encouraged by progression
  • Users are willing to come back for rewards such as badges and/or credits

With these learnings in mind, we decided to choose the mini-game type idea “Spin daily for rewards” from the brainstorming session and defined the following mechanic with the team

Treasure Spin wireframe
Treasure Spin Wireframe & Flow
Treasure Spin Hi-Fi 1Treasure Spin Hi-Fi 2
Within a week, we released the MVP for Treasure Spin

We quickly saw a positive signal with roughly 7% increasing time spent and with a couple of minor iterations such as changing the Treasure Spin from daily to hourly and adding my idea of allowing users to set reminders for Spin, the active hours skyrocketed to a +42% lift!

But soon we hit a hard reality, at the rate we are giving out credits,
it’s hard to be profitable for the business

Phrase 2 - Introducing consumable digital goods store & the card game

We saw great success for the Treasure Spin, but how might we continuously engage our customers while maintaining business profitability?

It was time to reconsider other types of value Tophatter can offer aside from just credits. After some research & benchmarking, we want to explore the game-like experience and build an infrastructure that allows users to: earn points (through mini-games like Treasure Spin) then trade things or capabilities of value. We named these capabilities “Card” for easy association with game-like abilities/functions.

We then ran a hackathon on the type of “Cards” we can offer. I worked closely with the lead engineer on defining the infrastructure on the “Card-a-thon” flow.

Card Infrastructure, hackathon flow
Card Infrastructure - "Card-a-thon" flow

As the Card-a-thon is going on I also start working on the initial infrastructure for the card store and define the user journey for different scenarios

Points earned wireframe
Initial user journey for points earned
Card store flow & wireframe
Initial user journey for Card Store
Card Inventory Flow
Initial user journey for Card Inventory

After the Card-a-thon, we picked 2 different types of cards to test with

  • Functional Card: The types of the card that enhance the core auction experience
  • Cosmetic Card: The types of the card that allow user to show off their personalities
Freeze Card Flow
Functional card example
Win Skin Animation
Cosmetic card example - Fire Card

Phrase 3 - The ecosystem of fun mechanics, points, and cards/rewards

  • Build mechanics such as Treasure Spin to motivate users to form a habit of "do stuff on Tophatter".
  • Earn points from the mechanics.
  • Redeem points for cards or rewards at the Storefront.
  • User Rewards/Card to "do more stuff on Tophatter"
Game Loop
The ecosystem of Tophatter's Game Loop

Get user feedback whenever it's possible

Video Tutorial
Tophatter Rewards Portal with educational video

With all the infrastructure ready and shipped, I then use my spare time to run a couple of user surveys to learn where we can improve and I concluded that these two areas are some of the low hanging fruits

  • Card Store is hard to navigate and buggy
    The original modal version was designed when we only had 3 cards and we needed a fast lightweight option for quick testing. Afterward, we’ve been scaling up with more ways to earn points as well as new types of cards, the modal formate is no longer ideal.

    The result was amazing! We were finally able to scale and tie different pieces of mechanics together. That also enable us to work on improving the educational aspect.

  • Onboarding & education
    We created step by step video guides and showcase them in the card store. It slightly increased awareness.

Some of the cards I don’t really understand how to use? I would like more information on some of the others without having to use them in trial & error, so to speak.
Gamify flow - SpinGamify Flow - Live NowGamify Flow - Store
Final Design


To achieve our goal of keeping the users engaging and rewarding we end up creating a whole new shopping experience: gamify auction.

Well we all look for ways to make bidding funner and this totally filled my up my excitement.

Our final result was that we achieved +54% lift in time spent in H2 (positive profitability) and $5.9 million lift in GTV in Q4 (or ~8.5% GTVcontribution in Q4).



Work with tough constraints

Due to the strict timeline (Ship one iteration/feature per week) and technical limitations, we end up making a lot of trade-offs. Sync early with the engineer on what’s doable and plan for potential workarounds would help ease the process.

Let the user back you up

Onboarding & education has always been the first thing that was sacrificed during product development. I used the survey to back my point on how important it is to educate our users about this new feature and it was totally worthwhile.

Tie customer value with the team's KPI

Although the team agrees with me that the storefront needs revisit asap as it’s getting hard to navigate, but because it’s not directly tied to Buyer Team’s weekly KPI, the storefront revisit project always ended up in the backlog.

After weeks of trying, I spot an opportunity and convinced another team to help because it helps them to achieve their goal.

All Projects