onboarding_Fullonboarding_Full

Club Soda Onboarding

How might we motivate users to create an account?

Some Background

Club Soda is an early stage lunch ordering app, that delivers food straight to a cart inside your office. Back in Summer of 2019, our team was launching in offices across Boston and I was brought on to continue building features post MVP.

Problem

We work with office managers who offer Club Soda as a perk to company employees, and usually have visibility into the headcount of an office. We were finding that the total users-to-prospective eater count was significantly lower than we’d hope. In addition, repeat users were even a lower percentage.

The Goal

The UX outcome were aiming for was to have customers place their first order, by creating a more engaging user onboarding. In addition, we wanted to prevent users from creating fraudulent accounts to take advantage of sign-on promos.  

Approach
We would achieve this goal by doing a few things: 

  1. Adding an engaging onboarding tutorial, to clearly communicate the value proposition 
  2. Redesigning the office location selection, to hide exposed office data 
  3. Creating phone validation upon sign up to add friction to fraudulent account creation
  4. Creating custom notification prompts to increase opt-in rates of notifications.

I jumped into a competitive design audit of other app onboarding flows to begin. 

I identified onboarding features available in food and on-demand marketplaces. I’m a strong believer in validating designs with users, but also in moving fast— we skipped user interviews, and I made assumptions based-off researching best practices for features such as phone validation and notification preferences prompts. 

From there I proposed 2 onboarding experiences the team could implement. One that was quicker to implement, and used an app tutorial to explain the value proposition to our customers. The 2nd option  allowed customers to browse the restaurant offerings before creating an account. We had gotten a lot of feedback about wanting the ability to see the restaurants offered on the platform before signing up, but ultimately the lift would require us to refactor the account creation flow, which we didn’t have time to afford.  

On to visual design

Because we relied heavily on customers signing up for our platform before browsing, I devoted my time to making the app tutorial an engaging as possible. I wanted to create delightful visuals that restated our value proposition, leaving customers curious to see more.

We also created a restaurants carousel that showed logos of popular restaurants on our platform, because we weren't able to let customers browse restaurants before account creation.

I began experimenting with different visual communication executions, one that relied heavily on interface (and ended up looking like Netflix), and another that used bold iconography with red overlays.

Product illustrations 

From there, I began refining the metaphors we used that highlighted the value of our service. We wanted to include a more “human-touch” to the visuals, so I began sketching characters to use. We wanted to portray approachable and diverse characters interacting with elements of the ordering experience.

I worked closely with my team to solicit feedback from PM’s, operations, devs, other designers to make sure these visuals  and language represented the brand the we had begun to build over the course of 1 week. Here was the final app tutorial we landed on.  

Hand sketches helped us move quickly to refine the metaphors we wanted to use to heighten our value proposition. 

What we landed on

This part of being a Product Designer was extremely exciting. Being a UX generalist with strengths in research, interaction, and visual design are all a part of my design process, but I especially love when I get to create work that envokes an emotional response through moments of delight with our customers. We landed on a simple 3-slide onboarding tutorial with a carousel of restaurant logos featured on our app. 

Screen Shot 2020-04-06 at 11.23.30 PMScreen Shot 2020-04-06 at 11.23.30 PM

After the MVP 

UX improvement features that we could not prioritize for an initial release were implemented next. We incrementally pulled in tickets such as adding phone validation and redesigning the location selection.

Results

We found these moments of delight were also good for our bottom line. We saw an increase in NAC’s compared to app downloads and an increase in average conversion of NAC’s to NCC’s to ~70% across the variety of office buildings we were in.

 

Thanks for reading!