Snackmagic

OVERVIEW

Snackmagic is a new brand created by Stadium during the COVID-19 pandemic when we had to pivot our business model. Snackmagic is a snack delivery service where users set up a budget for their recipients to use on snacks. The recipients can browse through a selection of snacks and beverages to build their own stash.

I conducted usability tests to explore the landing page and order experience and proposed a redesign.

MY ROLE

Junior Product Designer

TIMELINE

4 weeks

PROCESS

User Interview /​ Usability Testing / Design Studio​ / Wireframing / Prototyping

TOOLS

Sketch / Invision / Zeplin

Background

Snackmagic was experiencing a high drop off rate on the ordering flow.

The goal of the project is to evaluate whether users understood what Snackmagic is and also improve on the ordering experience. I will be breaking this project down into landing page vs. ordering flow.

LANDING PAGE

Goal

We wanted to observe users' first impression of Snackmagic and their understanding of what the product is.

User Interviews

I sent out a screener survey to recruit individuals who has experience purchasing gifts online for others. I selected 5 individuals to conduct usability tests asking the following questions:

  • What are your first thoughts of the landing page?

  • Can you explain to me what Snackmagic is and how the service works?

User Interview Insights

1. Who are the target audience?

The copy on the landing page are tailored towards corporate audiences. With phrases like "remote team", "home office", "favorite client", etc, the landing page could be discouraging other types of customers, for example, gifting friends, family, for themselves, etc.

2. Is this clickable?

2 of 5 users clicked on the icons below expecting to be redirected to the ordering flow, but the icons are static.

3. Now that I've finished reading the page, how do I start an order?

The footer of the page has a lot of blank space with no option to start an order. Users couldn't find CTA to start an order, so they selected "View Full Menu" instead.

How might we be inclusive in our landing page and
help users understand what the product is?
Redesign
1.png
2.png
3.png
1.png

The tag line is changed to cater to a wider audience. Other phrases are modified as shown below:

  • Original: "Treat your remote team, clients & pals"

  • Modified: "Customized snack stash for any occasion, for anyone!"

  • Original: "We ship to everyone's home office nationwide"

  • Modified: "Send to anyone in the US, we ship nationwide"

2.png

Previously this section is focuses on 3 different types of recipients: Colleagues, Friends, or Yourself. I wanted this section to showcase the various occasions that users can think of purchasing Snackmagic.

3.png

Each icon is clickable and leads users to the order flow to begin their purchase.

4.png
5.png
4.png

I added a section introducing Snackmagic and its relations to Stadium. This is to establish trust in this newly established brand, as well as giving context on what makes Snackmagic unique with its highly customizable products.

5.png

A "Start An Order" CTA is added to the end of the page.

ORDER FLOW

Goal

To streamline the order flow and enhance the users' experience placing an order.

User Interviews

I conducted 5 usability tests asking the participants to walk me through their experience placing an order. In each section, I asked users to think out loud:

  • What they expect to happen in each section?

  • What they expect to see after completing each section?

  • Are there anything they expect to be able to do but couldn't?

  • What was their ordering experience like?

Insights

From the user interviews and usability tests, I've gathered the following insights.

Step 1: Login/Signup

Step 1.1: Input email

  • Having to create an account as the first step of the purchasing experience deters users from wanting to place an order from a company that they're not familiar with.

Step 1.2.1: (new users) Create password, provide name and company name

Screen Shot 2020-06-13 at 1.47.25 PM.png
  • Within the same section, users go through 3 transitions which each asks for different information. Users had a hard time following the actions. Some users didn't realize that they just created a new account due to the lack of feedback.

Step 1.2.2: (existing users) Input password

Step 1.3: "Send as" 

  • Section title changed from "Login/Signup" to "Sender" after Step 1.2.

  • Step 3, where users are asked for "Send as" information seemed redundant since users were asked for their names.

Login/Sign up section summary

  • Once this section is completed (Step 4), the section summary displays the users' "send as" info and email. Information regarding first and last name, company name were not displayed and cannot be edited.

Step 2: Budget

Step 2: Select budget

  • It is unclear whether the cost is the total cost or if there will be other taxes and fees added at check out.

Budget section summary

Step 3: Recipients

Step 3: Select recipients

  • The recipient section consists of 3 parts: Add Recipient, Recipient list, and Message.

  • Users expected to be able to import contacts through other platforms, for example, their phones, work directory, etc.

  • Several users expressed that they would like the ability to customize gift message.

Recipient section summary

  • The section summary only displays the number of recipients and emails. Gift message does not show.

Step 4: Payment

Step 4: Order summary and payment method

  • The "add a new credit card" CTA is extremely small and easy to miss.

Step 4: Order summary and payment method

  • After inputting credit card information, Snackmagic saves the card info automatically without getting users permission.

Order summary

Screen Shot 2020-06-04 at 2.54.21 PM.png
  • By selecting "Review Order", users are taken to this page where their order summary is displayed. However, users felt like there were way less information displayed.

How might we create a useful gift shopping experience that's straightforward yet fun and engaging for the users? 
Ideate and Design

With the redesign, I focused on the following aspects of the ordering experience:

1. Reevaluate user flow

Currently users are hesitant to create a new account, resulting in a high drop-off rate (80%) before they begin the order flow. For the redesign, we decided to let users select a budget as the first step in the order flow. This change allows users to get an idea of what their Snackmagic purchase would include and creates a more engaging experience.

Original Steps

process2.png

Redesign Steps

process1.png

2. Include elements and features for a more personalized and engaging experience

I explored the possibility of creating personalized gift message for each recipient and the ability to preview what a gift message would look like on the recipients' side. For this project, we decided to focus on displaying a preview of what the gift message email would look like and adding the functionality of attaching an image along with the message.

Lo-fi Sketches of gift message with preview 

Lo-fi Sketches of gift message with ability to create custom message for each recipient

Adding graphics to the order experience

3. Request and display information at the "right" time:

By ensuring that relevant information is displayed to the users, we create a more trustworthy experience for users.

Original Order Summary Page

Redesigned Order Summary Page

Final Design

Try out the redesigned order flow below!

Next Steps

For next steps, I would like to explore and conduct a redesign for the order experience for users who are placing an order for themselves.