Category
Food & Beverage
Location
Naples, Florida
My Role
– UI Designer
– Graphic Designer
Tools
Photoshop, Figma, Asana
Stakeholders
Wesley Bloemers, Ellie Stein, Chad Orlich, Rebecca Wells
BistroMD – Snacks
In this project, I solved the key usability issues by reimagining what it’s like for BistroMD’s new customers to learn about how snacks could impact their weight loss journey and how to maximize their ordering experience. The new design improved the checkout process, helped users better understand the product, and the revenue increased by up to 7%.
In reviewing the market prediction, I found that the demand for healthy snacks was expected to continue to grow rapidly.
The Claim
The global healthy snacks market size was valued at USD 85.6 billion in 2021 and is expected to expand at a compound annual growth rate (CAGR) of 6.6% from 2022 to 2030. The healthy snack market has soared in recent years, especially since the global pandemic. As customers become more health-conscious, the need for nutritional yet delicious products has been booming.
The Problem
Most commercially available snacks (even many snacks labeled as healthy) include low-quality, high-fructose ingredients that contribute to weight gain, health issues. This effectively hinders current bistroMD customers from staying on the right track to better health and weight loss.
In a quick usability test, I compared customer experience and comments to find patterns. I discovered that users didn’t notice the snack offering at the checkout and some were not certain these snacks were going to help them stay on track to successful weight loss.
Problems Found in Comments about BistroMD
– Craig
– Jessica
– Ann
I analyzed 3 popular competitors and looked for positive and negative customer experiences.
Competitor 1
Competitor 2
Competitor 3
All websites offer a wide variety of meal programs and snacks.
Missing list of nutrition facts (competitor 2), the user has to scroll a lot to view snacks (Competitor 1), and the checkout process is missing snack offerings during meal selection (all).
I created 2 personas. One that reflected the consumer’s need for a snack that would keep them on the right track to healthy weight loss. The second one with the need for a more user-friendly interface with an emphasis on accessibility issues.
How might we provide a better ordering experience?
How might we empower users to feel good about snacking?
This flow diagram demonstrates the successful state of the necessary functionality of how users go about purchasing the meal program. After logging in users begins the checkout process where they enter their gender. On the next screen, a pop-up appears with snacks offered, optimized for their gender. This solves the missed snack opportunity issue. The fail state flow was also created but due to space constraints was not included. The endpoint of this diagram is where the new flow begins inside the customer portal (former myBistroMD), which includes further customization, preference selection, scheduling, and support (I worked on this in another project).
Once the flow diagram was established, I started creating the low-fidelity wireframes of the main flow.
I made sure that my new designs adhered to the BistroMD style guide in sense of colors, fonts, and UI elements. The style guide is continuously updated with new UI elements, variants, and components using auto layout and interactive features using Figma.
Mockups
5 high-fidelity designs were created
- With the new design, 5 of 5 users were aware of snacks offered at the checkout
- 4 of 5 users found the new dedicated snacks page useful and easy to find
- New designs showed improved ordering satisfaction
Mockups for Desktop, Tablet and Phone
After user validation, I moved on to creating mobile mockups including 2 different Snacks pages that were A/B tested.
