User Story: Add on Add-ons

A customer at Snap Kitchen can already theoretically have their breakfast, lunch, and dinner taken care of with their subscription to Snap Kitchen. But what about dessert? What about snack time?

 
 

  • Snap Kitchen sells ready-to-eat meals ready in minutes through a weekly subscription you can have mailed directly to your home or work. To expand the offerings beyond meals, we wanted to add the ability to include add-ons to orders.

  • FOCUS: Adjust the Menu page, Shopping Cart, and Checkout process.


    GRAPHIC DESIGN: While there are other design opportunities on the site, we limited changes to areas of the site that weren’t global (i.e. we couldn’t change the layout of the main header). We could not dramatically shift global font/button styles/link styles, etc.

    SERVICE: Half-way through the sprint, we were told we must make the add-on items a part of the subscription model and not one-time offerings.

  • I directed UX designers and project managers through the project. I had final sign-off to move to Development.

    We discussed goals/needs, compared competitor solutions and brands we admire, built a customer journey map, and finally went through rounds of feedback and notes.

 

 First question: Why?

  1. Snap Kitchen already sells snacks/desserts from their retail locations. In an effort to maximize margins and increase order values, we wanted to bring the experience to our national shipping customers.

  2. Users consistently gave us feedback as to the reason they cancel, and a common one was because they want MORE variety and options.

What defines an “add-on”?

A small snack or dessert item that can be added to an order. We wanted to make the process feel enticing and impulsive, to capture that analog experience of being at a grocery store and grabbing mints/candy at the checkout line or a hot fresh donut from the bakery cabinet. You weren’t there specifically for it, but you’re happy to grab it.

Customer Journey Map

End of Sprint Results

On Menu Page

There are no Snacks or Desserts mingling amongst the top in the All section. But we added the categories Snacks and Desserts as a way to navigate to add-ons from the top.

When user has added items to cart, user can see meals counting to their box and the Snacks & Extras section of add-ons.

The item name, calories, and price are indicated. Price badge matches the price badge of our Premium Meals for consistency. User is also able to see Order Summary.

DESIGN CONSTRAINTS: The badge styles and card layouts were considered “global” and could not be adjusted in this UX Sprint. The “remove” button below the counter is also global and is the only way to remove an item, rather than simply “minus-ing” out.

On Cart Confirmation Page - Pop-Up

Pop-up module allows user to click through a carousel of add-ons.

On Cart Confirmation Page

User is able to see quantity and increase/decrease number of items. Cart behind user auto-updates to reflect new add-ons.

As a last touch-point, user can add snacks/desserts in area on left while reviewing their cart.

User is able to see quantity and increase/decrease number of items. Summary automatically updates.

NOTE: The Confirm your cart page layout was considered global and not able to be fully overhaul. There’s an odd division happening on the header and order information. There is a huge emphasis on the order total. Obviously, “add-on” product images will have to have a transparent background.

Challenges along the way

  • Too many items.

    In the early stages, the team presented the below option showing a nice wide carousel of snack options. However, a key question wasn’t asked in Discovery: How many items will we start with? This solution only looks balanced with a large number of snacks, but Snap Kitchen wanted flexibility and to start with just a few items.

  • Cluttered Menu.

    Another early stage issue was mingling snacks with other meal options. This creates confusion for the customer on whether or not this item counts towards their subscription count of 6 or 12 meals. There were also cluttered badges that distracted the user from the main image of the food.

  • Considering Mobile

    Because of obvious mobile space constraints, we didn’t want to take up too much space showcasing add-ons on the confirm your cart/check out page. However, we needed an option that still shows some product imagery to entice a customer to browse the Snacks & Extras category.