Grove First Order

Solving customer confusion while increasing conversion

Project Goal

Ensure app visitors quickly get oriented to shopping with Grove and complete their first order.

Background

Grove is a sustainable home and body care ecommerce platform that enables subscriptions to products we all use like hand soap, household cleaners, pet products, and face cream. People love Grove because of its product selection and commitment to reducing plastic waste and carbon emissions. Most customers use Grove as a subscription service in the following way:

• Customers subscribe to products.
• Grove builds a recurring order based on those subscriptions, typically monthly.
• Grove automatically ships your order to you.
• Customers save time and get sustainable necessities on their doorstep. Hooray!

The Problem

Grove is known for giving generous incentives to first time customers. Marketing data also proved that a cart pre-loaded with popular products is an effective way to encourage category exploration. This is not a standard practice, however, and led to confusion for customers who did not understand why some products were in their cart at all.

First Order Experience

The first notable element of the flow is what we called “How It Works” – three steps that explain the Grove value proposition in simple language. These are a series of pithy sentences about shopping on Grove and the service model. I had to take special consideration of the parallax in the swiping animation so objects did not obscure the critical text.

This is followed by the Gift Picker. This step helped accomplish two goals in one interaction: 1) Give the customer an explicit gift-picking step so they would feel more in control of the products in their cart; and 2) encourage email submission by coupling it with a very friendly offer.

The next step of the onboarding flow is the box filling animation. This is intentional friction that serves as a delight moment, taking a moment to explain that Grove is literally filling your cart for you (visually and in words). I built this animation in After Effects using existing brand assets for the products and ”ingredients” in the cart. My favorite part is the little green tube that flips in at the end.

Once the customer gets through onboarding, there are coachmarks on the home screen to help orientation. The first order experience also features a stripped down navigation to focus the experience on what we believed were the top concerns for new customers: finding products and checking out. After first order, this turned into a 5-tab navigation with additional features such as favorites and subscription management.

Finally, on the first cart load, there is another friendly message to the customer that we have put their gifts and freebies into the cart already. This was important because we heard from customers (and saw usage data) that it was common to visit over several sessions before completing a first purchase.

Here’s the entire onboarding flow, all the way through.

Results

While I can’t share specific signup metrics, we saw app-first signups grow approximately 5x over the 6 months after launch. Current signup rates average around 20x where they were initially. We know from customer service records and user interview that there is also far less confusion with how Grove works and first order carts than before.