Redesign Snackmagic check out experience
1 Product Designer
The existing Snackmagic shopping experience feels impersonal.
Snackmagic is a snackbox gifting service. It allows individuals to place orders which then the recipients can customize their orders by following a link to the Snackmagic site. After launching in April 2020, we were experiencing a high drop-off rate in the checkout flow.
Creating a digital shopping experience that feels like a real life gifting experience.
The solution focuses on bringing the personal and emotional interaction of a gifting experience into the Snackmagic experience. Through user interviews and testings, I discovered that although the existing checkout process is streamlined and clear, it stripped the fun, emotional connection in a gifting experience that one would find in a traditional gift shopping experience. The redesign also emphasized on presenting relevant and useful information timely to customers regarding their orders.
Snackmagic is created by Stadium - a group lunch delivery company that services lunch in offices in the NYC area. With the COVID pandemic forcing Stadium to shutdown. With snacks leftover from the menu and having to pivot the business to adapt to the new remote work setting, Snackmagic was created to help customers to continue to connect with their clients, coworkers, and loved ones stay connected through food. Since the site was launched with a short timeline, we wanted to explore and improve the experience for our users.
As a newly founded company, every small changes to the website experience could drive a lot of impact and we wanted to get feedback and implemented changes frequently. With the uncertainty with how the pandemic was developing, we wanted to release updates with a 3 week timeline, focusing on increasing user retention and order completion rate. Due to the time constraint as well as engineering constraint, we prioritize med-low effort features that would create impact.
We identified two main user groups:
Corporate: These users typically have a set budget from their employers and gift in larger quantities. Some occasions which users would use Snackmagic are: WFH snacks for teams, client appreciate gifts, virtual events/happy hours, etc.
Jimmy is a finance manager who leads a team of 5 analysts across the US. Since the pandemic started, they've all been working from home and all interactions have moved online. Jimmy knows how hard it's been for his employees and wants to gift each of them something they'll enjoy with his allocated budget without having to spend too much time and effort coordinating.
Family & Friends: These users typically want to send more personalized gifts with specific events or dates in mind. Some occasions would be holidays, birthdays, anniversary, celebration, etc.
A Good Friend
Sarah has a few friends whose birthdays are coming up. She wants to give them presents that they will love and a one-stop-shop where she can do personalized gifts for them all. She would like to be able to plan ahead and get all her shopping done.
I sent out a survery to gather users who have experience gifting online to assess their behaviors and experiences with online gifting. I conducted 6 user testings where I tasked them to walk through and complete a task on the Snackmagic site. Below are some core insights and grievances among users:
What am I signing up for?
As the first step to place an order, users are asked to create an account or sign in. Without a good understanding of the company and product offerings, users are reluctant to provide personal information and create an account. Most users expressed that if a website requires them to create an account just to make a purchase, they would typically just find another business to shop at.
How do I check what information I just provided?
There are inconsistencies between information that customers filled out and what displays on the order summary page. After inputting recipients' email and gift message, only the recipient list was displayed in their order summary. Users expressed that they don't know whether the gift message will be included in an email, be printed out and included in their snack box, or other methods. It felt really impersonal and robotic.
Recipient step: user input vs. order summary
Users fill out recipients emails and gift message
Existing flow displays recipient list, but gift message is not shown
It doesn't feel like I'm gift-giving, it just feels like I'm spending money.
Users said that shopping for gifts that have personal connections is an important and fun part of the gift-buying process. As an online checkout experience, Snackmagic's process was easy to follow. However, users expressed that with Snackmagic being a gifting service that is helping customers connect with their recipients, it lacks the personal and emotional connection that one gets from a traditional gifting shopping experience. The 4 step check out process felt like tasks to complete.
Streamlined 4 step check out process but lacks the emotional connection that is expected in a gifting experience.
Through user testings, I realized that we cannot approach Snackmagic’s experience as just another E-commerce check out experience where the focus on a quick, streamlined flow. Snackmagic is a gifting service and their shopping experience experience needs to reflect the emotional and personal connection that our customers have with their recipients.
To kickoff the ideation process, I conducted market research. This step is important as we reevaluate the gifting experience we want to provide our customers. I researched online gift businesses and below are some insights and patterns from their website:
Postable - mails physical cards for you
Bouqs - online floral delivery
Winc - online wine subscription box
All three business have large and eye-catching graphics that shows their product offerings and what the recipients would expect to see when they're gifted. This is crucial for an online business - users are unable to see and feel the products so having clear images and information on what the product looks like and how their recipients will receive their gift helps establish trust between the businesses and their customers.
Winc subscription box has 3 different default amounts that users can choose from. Once the recipients receive their gift, they are able to complete a wine palate test that analyzes their wine preference, and makes recommendations to the users.
Bouqs not only sells bouquets of flowers, users can also pay extra to add on vases to spruce up their orders.
Postable allows users to personalize their card by having options to switch up the typeface, color, backdrop, and more. The changes they make are reflected in the "preview" section on the right side, allowing them to have full transparency on how the end product will look.
REEVALUATE USER FLOW
Original check out flow:
Redesign check out flow:
Users often have a set budget when they are purchasing gifts, especially with our corporate user groups who have company allocated budgets for their teams or projects. In the original check out experience, Snackmagic’s product offerings are displayed only after a user has signed up or logged into their accounts (where there is an 80% drop off rate).
See the products first, sign in later.
In the redesigned user flow, users are able to see all product offerings and make their selection, before being prompted to sign up/login. This not only provides the visual cue for users to establish trust with the company and product they’ll be spending money on, but also gives users more incentive to complete the check out process since they’ve already completed step 1.
NOT JUST A SNACK BOX COMPANY, BUT A GIFTING EXPERIENCE
We discovered in user interviews that the personal connection a user builds with the product and their recipient in a gifting experience is important. Snackmagic is not just a snack box service, it is helping our users connect with their recipients through snacks, and our online experience has to align with our mission.
We added visual elements and features that allows our users to personalize their orders.
Idea 1: personalized gift message for individual recipients
Pop-up window for custom message
Idea 2: message separated from recipient step, display message preview, change message backdrop, and attach image
I explored the possibility of creating personalized gift message for each recipient and message customization and preview.
Due to time constraint, we decided to limit new features and focus on displaying a preview of the gift message and adding the functionality of attaching an image along with the message, as well as gift scheduling. Recipient step was also refined where the "add from contact" button is The final design shown below -
Add Recipient Redesign:
"Add from contact" button is made secondary and pops up with a list of Snackmagic contacts the user previously has gifted. The search function allows users to quickly filter.
"Add myself to recipient" checkbox is added for users who are also purchasing for themselves.
Gift Message Redesign:
Gift message is separated from Add Recipient step to put emphasis on the gift message experience. Users can see how their message will show up on the preview on the right side. They can also attach photos or their company logo along with the gift.
We added the scheduling functionality based on the insights we gathered from user testing, users expressed that being able to plan ahead is important.
RIGHT INFO, RIGHT TIMING
Customers need to have enough information to make an informed purchase decision. By effectively communicating product information, shipping information, and having clear sections and summarization at each step of the check out process help establish trust between the customer and Snackmagic. This is important to help facilitate the purchasing decision since the user can’t ask questions right away when shopping online. With the redesign, I had the goal of ensuring that users can complete the check out process with no questions left unanswered.
Original: Payment Step
Cost, payment information, promo code are all in one section with no clear separation, making it less scannable for users.
CTA to enter credit card information is easy to miss and requires an extra click
2 CTA buttons in the same area creates visual clutter.
Redesign: Payment Step
Sectioned with a colored background for readability
Users no longer have to go through another step to input their payment info
Promo Code and Credits
Cost information is sectioned with a colored background for easy scanning and clear separation between information (cost) and action (input credit card information)
Credit card fields displays by default
Only 1 CTA that is associated with the step available to avoid confusion. "Place Order" CTA will show in the next step after users reviewed their orders.
Original: Review Order
Missing Gift Message, no information regarding shipping.
Redesign: Review Order
Left panel contains information that users inputted where they can verify and make edits if needed.
Right panel contains information regarding cost and shipping, as well as CTA to place order.
Total cost is hard to read.
Learnings & Next Steps
Working at a newly founded company, I was excited to be a part of a team that was creating a new service from scratch, however this also means priorities were changing every day. I started the project not knowing what I will discover about our existing user flow - from initially viewing Snackmagic as an E-commerce, it made sense to have a checkout flow that is as streamline and quick as possible so users don't feel like they have to spend too much time checking out. Through conducting user testings and talking to my users, I truly witnessed that shopping, especially gift shopping, is an emotional experience where the "success" cannot be determined by just quantitive metrics. Users don't necessarily want something "efficient," they want a brand that will help them connect, and our check out experience needs to reflect that and bring in the emotional aspect of gifting.
With the limited time and resources, I also had to learn to balance and prioritize between user goals and business goals. By communicating frequently with the PM and staying up to date with the business roadmap and priorities (which were changing every day, ha!), I was able to do a better job prioritize features that will not only create the most impact for our users, but will also drive revenue for the business.
I unfortunately didn't get to see the new design implemented due to a shift in business priority and the timeline. If I had one more month, I would:
conduct user testing on the new design and keep track of user conversion rate to validate the design
reevaluate user flow -explore moving account creation step further down the check out process and how we can incentivize users to feel comfortable creating an account
Continue to gather user insights through our feedback channel and user testings to brainstorm features to help create a personalized Snackmagic gifting experience