Let's build something legendary together
SnackMagic
Improving mobile conversion through visual design
Overview
The project focused on enhancing the UX of SnackMagic, an online snack delivery platform, by simplifying the tedious ordering process for new users through improved navigation and clarity.
Building on this success, the solution was extended to returning users, ensuring a seamless and intuitive ordering experience across all user segments. This improved retention and engagement on the platform.
Role
Design Co lead
Duration
November 2022 - January 2023
Industry
SAAS, CPG
Tools
Figma, Miro, Looker
The Problem
SnackMagic faced a significant challenge with the ordering process being tedious for new users. They would often reach out to customer success managers to ask for help in placing orders. Other times, they drop off mid way into the order process and never make it to checkout. This resulted in high drop-off rates, increasing the work load of CSMs and impacting the company's overall profitability.
Research
The main objectives for this research was to identify specific pain points and frustrations encountered by new users during the ordering process, and to observe how users interact with the platform to uncover patterns, behaviours, and areas of confusion. To do this, we conducted one-on-one interviews as well as usability testing with to observe their interactions with the platform, and delve deeper into their challenges and needs. We also analyzed competing snack delivery platforms to benchmark against industry standards and identify best practices.
Key Findings
- Complex Order Form: Users found the ordering process to be lengthy and a bit confusing, leading to frustration and drop-offs.
- Lack of Information: Users expressed a desire for more detailed information while setting up the orders. They wanted more visibility into how far along they are in the process, and what's left.
SnackMagic before study
Ideation and Brainstorm
Based on the research findings, we focused on simplifying navigation and enhancing clarity throughout the ordering journey. This involved rethinking the information architecture of the user flow, optimizing the user interface, and providing clear guidance at each step of the process.
Current user flow
Clearly, this is a very long flow just to place an order. It's important to note that each box on the image above represents a page of the order form. We decided to sort each box according to their functions. Afterwards, we created larger box sets by grouping similar boxes together. This exercise was to help us streamline the flow without losing any part of the original flow.
Simplifying the User Flow
From the affinity map, we were able to identify key themes from the order form. We but these boxes back into the initial flow, moving the pages according to newly mapped categories.
While this looked much better and easier to understand, we decided to shorten it even more by merging the shorter flows (treat set up and order details) together.
High Fidelity Design
From the above flow, it was easy to decide on a navigation view that could provide visibility of the process to users. Because there were two flows (vertical and horizontal), we decided to have two navigation bars. The horizontal navigation shows the overall steps to complete the form, while the vertical navigation shows the steps within a page of the form.
1. Treat settings
2. Recipients
3. Customizations
4. Review
5. Payment
6. All sent orders
7. Order Dashboard
Growth Design Thinking
Seeing as this refreshed order form was very seamless and loved by new users, we decided to replicate the same form for returning users. After testing however, we realized that it may not be as easy as we thought to create and fill out these forms if a user has multiple orders to place for different reasons (events, locations, etc). We decided to explore a way to duplicate order forms to make the process of creating and placing an order even faster.
Duplicate Order Exploration
How do we create a process where users can create and customize previously created orders with less effort than creating an order from scratch? Here are some considerations we made:
- Duplicate recipients?
- Review and duplicate customizations or take to dashboard?
- Edit treat expiration link?
- Treat title
- Edit recipient list
Duplicate order exploration
Duplicate Order Design
Though we explored various ways to add adequate customizations to the duplication process, we ended up removing most of it and simplifying it based on the user's choice. That meant a user only needed to make 3 clicks to duplicate a previous treat. That was a significant time saver that impacted our numbers after this feature rolled out.
Impact
The implementation of these solutions led to a significant improvement in the ordering experience for new users on SnackMagic. Drop-off rates decreased, while user engagement and satisfaction increased. The platform saw a notable increase in new user sign-ups and repeat orders, indicating a positive impact on business metrics.
Metrics, 1 week after launch of this feature
Overall, the project was successful in achieving its goal of enhancing the UX of SnackMagic's ordering process for new users. Through a user-centered design approach and iterative refinement, the team was able to address the identified pain points and deliver a solution that positively impacted both user experience and business outcomes. Ongoing monitoring and iteration will be key to maintaining and further improving the platform's usability and effectiveness in the future.
Interested in working together?
Why work with me?
I prioritize user needs and experiences, ensuring the product is user-centred
I use research and analytics to inform my design decisions
I focus on delivering measurable impact with every design initiative
© 2024 All Rights Reserved, Dera Okemeziem
