Onboarding tutorial

I led Google Ventures’ five-day Design Sprint to tackle Tophatter’s onboarding challenges. Launching a Design Sprint was something completely different for Tophatter — it symbolized a paradigm shift to building new features with a customer-centric approach. I published a Medium post about the Design Sprint process.

Through the Design Sprint, I learned the value of A / B testing and iterating based on the metrics. We tested many ideas and the majority of them didn’t work. I learned how it takes usability testing, acting on customer insights, and multiple iterations to build a design solution that resonates. The revised design resulted in a 8.4% lift in new user payer conversion.

RESPONSIBILITIES

• Design sprint leader. Spearheaded and facilitated the 5-day design sprint

• Interaction design. Mapped out the user journey and flow

• UX / UI design. Created the wireframes and hi-fidelity designs

• Prototyping. Developed hi-fidelity prototype

• Usability testing. Wrote usability questions and gathered in-person feedback with real shoppers

About Tophatter

Tophatter is a mobile discovery shopping marketplace that connects buyers and sellers from around the world in real-time 90-second auctions for jewelry, electronics, beauty, and household items. Most of Tophatter’s auctions start at $1 and are designed to generate excitement and competition among shoppers. Tophatter has roughly 20 million shoppers and sells 100,000 items a day. 

Context and Measurement of Success

The first time a shopper visits Tophatter, they may be confused about auction marketplaces and unfamiliar with what the mindset of discovery shopping entails. For first time shoppers, there is a lot happening and little guidance.

These are the Sprint questions that framed our first Design Sprint.

“How Might We:”

• Show first-time shoppers that we’re different, exciting, and fun?

• Elevate our company profile so that people trust us when they have not heard about us before?

• Educate new shoppers about discovery shopping and the mechanics of Tophatter without being intrusive?

The hypothesis was that an onboarding tutorial would convert more new visitors to paying customers. The key measurement of success was new user payer conversion.

Personas

I worked with the Marketing team to define our target new shopper. We came up with Shelly the New Shopper, a bargain hunter who seeks value and trustworthiness.

Competitive benchmarking

I looked for inspiration from direct competitors, design thought leaders, and industries with similar problems.

I found that the best tutorial guidance is contextual and paced out, where the user learns the core mechanics through visual interactions.

Design sprint process

I led a diverse and dynamic sprint team that consisted of two designers, three engineers, and two product managers. Here are the incentives we wanted to experiment with to see if they build trust and orient first-time shoppers:

1. Delaying auctions

2. Interactive tutorial with personality that educates how Tophatter works

To fit in the Sprint 5-day timeframe, Sheng and I built two quick and dirty prototypes using Sketch and Keynote in the span of 6 hours. Our designs tried to instill trust by educating how Tophatter works, delaying registration until after checkout, and asking for push notifications in context.

Prototype 1 - Delaying Auctions

Prototype 1 had a subtle design and tried to ease anxiety by only showing upcoming auctions. The goal was to give new users time to browse and set reminders on products that they’re interested in bidding on.

Prototype 2 - Interactive tutorial

Prototype 2 took elements from the gaming industry with a personable interactive tutorial that explained how to navigate Tophatter while building trust and credibility. The smiling hat was a friendly icon/character that we thought would appeal to a broad audience, including our 70% female, 30% male demographic.

Shopper feedback on prototypes

We tested the two prototypes with 6 people in person, who had never heard of Tophatter before. We found that the interactive tutorial tested best in terms of building trust and orienting first-time shoppers.

Prototype 1 - Delaying auctions

Neutral response. Previewing upcoming auctions did not reduce anxiety enough to be worth the risk of delaying live revenue-generating auctions.

Prototype 2 - Interactive tutorial

Positive response. Our testers had a good response to the interactive tutorial but the animation and tophat personality was a bit intrusive and did not resonate.

Trade-offs and decision-making

In iterating in the interaction tutorial direction, the team considered showing a simulation of someone winning. However, I had reservations because simulations can make Tophatter feel less trustworthy and further concerns over shoppers competing against “bots” and not real people. In addition, a simulation would require more design resources and a greater investment.

In advocating for my position, I tied-back to our user research and shopper goal to earn trust. I decided to trade-off creativity for keeping the solution simple and straightforward and to keep in mind the goal to reduce shoppers’ confusion.

Hi-fidelity designs

I took feedback from usability testing and iterated. We wanted to phase in our experiments so we could better understand what was working and what wasn’t. We decided to build an interactive tutorial with plans to redesign push notifications and delay registration until after checkout as future experiments.

We iterated on the smiling tophat personality to still be magical but less intrusive. We aimed to take an incremental approach to teaching; giving guidance along the way as shoppers figure out the app.

Here are the trust-building questions we wanted to address:

• How long do auctions last?

• What is Tophatter?

• What deals can I get?

• What’s the bidding process look like? When do I need to pay?

Working with our visual designer, Sheng, on visual assets and our marketing team on content to answer the trust-building questions, here’s the solution we came up with:

Hi-fidelity prototype

I created an internal Flinto prototype to show Gabriel, our Android developer, the animation and autoforwarding timing.

Nielsen Norman Group has a recommended guideline of 3 words per second for the average user to read text. With the prototype, I experimented with the cadence of our tutorial screens and found that our average user took double the recommended time to read and process each screen. As a result, I made the autoforwarding transition every 6 seconds with the option to manually swipe through the content as well.

Usability testing

We A/B tested the tutorial and the experiment tested flat in terms on new user conversion, i.e. the tutorial failed.

To get qualitative insights on what worked and what didn’t, I tested the tutorial design with 10 new Android users through UserTesting.com. To mirror our demographics, I selected 3 males and 7 females, ages 35-65.

I wrote usability questions to determine what extent testers found the interactive tutorial educational, exciting, and trusting. I also wanted to understand what questions testers still had about how Tophatter works.

I watched 10 different testers interact with the prototype. I tracked their movements, listened as they spoke their thoughts on the experience, and aggregated individual insights into big-picture trends.

Performance

What worked well

• Of the trust-building content, “Bids are Free, Pay if You Win” was the most compelling to testers, especially given that many competitor auction sites require payment for bidding.

• The tophat personality created a magical and playful introduction.

• Shoppers liked that the tutorial did not block the screen and is dismissible.

What needs improvement

• Shoppers still wanted answers to:

  • Why are the prices so low?  

  • Do you have “100% Satisfaction”?

• 4 out of 10 testers asked for a video that simulates someone going through the process:

Next iteration

In my usability testing, 40% of testers asked for a video that simulates someone go through the process of winning and buying a product on Tophatter. Based on feedback, we repurposed a “How I Shop on Tophatter” marketing video and added it to the top of the screen for first-time users on their first visit to Tophatter. We A/B tested the experiment in production on both Android and web.

 The video builds trust by:

• Showing someone going through the process of winning and buying a product on Tophatter

• Highlighting the checkout flow and our payment providers

• Describing the types of products we have available

We updated the banner messaging to display “Bids are Free, Pay if You Win” since that content resonated the most with new shoppers.

The tutorial video and new banner message had an 8.4% lift in new user payer conversion.

Takeaways

What I did well

Through spearheading the Design Sprint, I created a team synergy and aligned my teammates’ on a common goal that leveraged multiple approaches and ideas.

I was not discouraged by flat metrics, but instead looked to find growth from our failure. I provided qualitative data to give color to metrics and was able to give possible reasons why the first iteration was flat. I acted on feedback from the two prototypes and the interactive tutorial to fuel future iterations. From this, we built the onboarding video that performed well with a 8.4% increase in payer conversion.

What I would improve

I learned the importance of UX writing and how integral it is to the performance of the design. Our copy in the tutorial was driven by intuition, but likely would have been more successful if it was instead driven by data and UX research. If I were to build a tutorial again, I would do more research on customer pain points and have a tighter feedback cycle that tests the copy earlier on.