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.
Junior Product Designer
User Interview / Usability Testing / Design Studio / Wireframing / Prototyping
Sketch / Invision / Zeplin
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.
We wanted to observe users' first impression of Snackmagic and their understanding of what the product is.
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?
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"
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.
Each icon is clickable and leads users to the order flow to begin their purchase.
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.
A "Start An Order" CTA is added to the end of the page.
To streamline the order flow and enhance the users' experience placing an order.
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?
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
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.
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.
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
Try out the redesigned order flow below!
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.