Gamify eCommerce

Backstory

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

Animation

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

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.

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

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"

‍

‍

‍

Get user feedback whenever it's possible

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.

Outcome

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).
‍

Takeaways

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.