Elli's Desserts
Sole UX/UI Designer, UX Researcher, UX Writer
Figma, Figjam, Maze, Trello
Background
Elli's Desserts began in a small kitchen, born from a simple love for baking. What started as a family tradition of sharing homemade treats with friends and neighbors quickly blossomed into a passion for creating delicious, handcrafted baked goods. From their first loaf of challah to the diverse selection of pastries and cookies they offer today, Elli's Desserts always prioritized using the finest ingredients and traditional recipes. As Elli's Desserts continued to grow, both its menu and customer base expanded. Initially, orders were managed through a Google Form, but this method provided minimal capabilities, restricting the overall customer experience and that's where I came in!
The Challenge
To create a website for Elli’s Desserts that enables users to seamlessly order baked goods, enhancing their overall shopping experience while effectively showcasing the bakery’s offerings.
The Problem
Elli’s Desserts, known for its mouth-watering treats and strong social media presence, had an outdated system for processing orders. The Google Form used by the bakery offered limited functionality, preventing customers from seeing product images and creating a fragmented ordering experience. This lack of visual engagement and seamless interaction left customers unable to fully explore and appreciate the bakery’s offerings, reducing the likelihood of repeat orders and limiting overall customer satisfaction.
The Solution
Elli’s Desserts’ new website, will transform the way its customers browse and order baked goods. Customers can now visually explore the bakery’s products, view detailed descriptions, check ingredients and allergen information, and customize their orders. The website provides a seamless shopping experience that elevates the ordering process, ensuring customers can easily navigate, select, and purchase their favorite treats while helping Elli’s Desserts improve business efficiency and customer satisfaction.
The Design Process
Sifting Through the Competition
Competitive Analysis
To understand how existing bakery’s structure their eCommerce platforms, I conducted a feature analysis of By the Way Bakery, Milk Bar, and Billy’s Bakery. This analysis aimed to identify market gaps and uncover key features that could enhance the overall user experience for Elli’s Desserts.
Results indicated that Elli's Desserts should explore:
1. Prominently displaying ingredients and allergen information.
2. Utilizing clear and enticing product images.
3. Providing the ability to customize orders.
4. Showcasing product reviews to instill confidence in purchases.
5. Offering product filtering options for easier navigation.
Baking Up User Insights
User Interviews
I conducted user interviews to gather insights into individuals’ experiences, preferences and pain points when interacting with and purchasing baked goods online.
I analyzed the results of the user interviews and identified the key motivations, behaviors and frustrations.
Who’s Eating the Treats?
User Persona
Meet Ethan!
Ethan is a mindful consumer who diligently checks product details and allergen warnings to make informed food choices that keep his health in check.
“Before I buy anything, I need to know exactly what's in it, especialy if it could trigger and allergy.”
Goals:
- To easily reorder favorite items.
- Understand what products will look like before ordering them.
- To access ingredients and allergen information when searching for products.
- Communicate with customer service when issues arise with orders.
Behaviors:
- Reads the product details, including nutritional information and allergen warnings.
- Writes special requests and/or notes when ordering products online.
- Explores recommended products.
- Likes to review previous purchases.
What’s Burning in the Bakery?
Problem Statement
Ethan needs a better way to place orders with Elli's Desserts so that he can continue enjoying his favorite baked treats with ease.
Let’s Cook Up Some Ideas
How Might We
How might we improve the online ordering experience at Elli’s Desserts?
How might we create a way for users to visualize and understand products before placing orders?
How might we present allergen information clearly and effectively to guarantee users' safety when ordering baked goods online?
Follow the Cookie Crumbs
User Flow
Based on Ethan's goals, I created a user flow that outlines the path Ethan would follow on Elli's Desserts.
Ethan would sign into his account and explore the wide range of products offered on Elli’s Desserts. After browsing, he would select a product that interests him and have the ability to review the detailed ingredients and allergen information to ensure that the product meets his dietary needs. Once satisfied with the selection, he would choose the quantity, select pickup or shipping, add the item to his cart, and include any special requests or comments for customization. Ethan would then proceed through the checkout process and receive a confirmation at the end.
The Bakery Blueprint
Information Architecture
Keeping Ethan in mind, I created a hierarchy site map to display how information will be organized as well as to depict the relationship between various sections and pages that users could interact with in Elli's Desserts.
Whisking Up Designs
Sketches
Keeping the user flow in mind, I created sketches, refined my ideas, and presented them to my client in a collaborative design studio setting.
Tasting the User Experience
Usability Testing
Utilizing mid fidelity prototypes, I conducted usability testing to discover the pain points users had when searching for and purchasing baked goods on Elli's Desserts.
After analyzing the data and identifying key patterns and insights, I made iterations within the high-fidelity design.
Pattern
Participants overlooked the required pickup and shipping options on the product detail page before adding items to the cart.
Insight
Users need key actions to be prominently displayed to ensure they can complete tasks smoothly.
Solution
Increased the visibility of the pickup and shipping buttons by resizing, re-styling, and adding distinct colors and labels to ensure users choose an option before adding an item to their cart.
Before
After
Pattern
Participants used the dropdown feature to review their information before finalizing their purchase.
Insight
Users prioritize the ability to easily verify their information to ensure accuracy before placing their order.
Solution
Eliminated the dropdown arrow and made the checkout information always visible, enabling users to easily review their details without any extra clicks.
Before
After
The Sweet Reveal
Final Version
The Recipe Book
Style Guide
For the design, I aimed to strike a balance between professionalism and playfulness, reflecting both the serious nature of the business and the joy that baked goods bring. I chose shades of blue for trust and stability, with pops of pink adding a fun, inviting touch, creating a palette that balances warmth and vibrant energy. For typography, I selected Cormorant for its elegant, classic feel, perfectly capturing the brand’s sophistication. To complement it, I paired it with Montserrat, a modern and clean typeface that represents the forward-thinking vision of the business. Together, they create a harmonious and engaging visual experience.
Sweet Access for Everyone
Accessibility Considerations
Inclusive Palette
Ensured that the chosen color palette passed accessibility standards, enhancing visibility for users with visual impairments.
Sufficient contrast
Selected fonts that provided sufficient contrast with the background colors, ensuring optimal readability for all users.
Interactive Feedback
Added hover states for clickable text and buttons, allowing users to easily identify interactive elements and enhancing overall usability.
Familiarity
Used simple and familiar microcopy on buttons to improve comprehension and included recognizable icons to guide users in their interactions with the website.
Reflections
Working on the Elli's Desserts website reinforced the critical importance of clear communication and collaboration with clients throughout the design process. Engaging in open discussions with my client allowed us to align her vision with user needs effectively, ensuring that the final product truly reflected her brand while serving its audience. Additionally, this experience highlighted the necessity of streamlining processes for users, enabling them to complete their tasks seamlessly, regardless of when or where they accessed the site. Furthermore, I gained a deeper appreciation for the balance between aesthetics and accessibility; it became clear that selecting colors and typography not only needed to adhere to accessibility standards but also needed to resonate with the client’s creative vision. Working for Elli’s Desserts ultimately enhanced my ability to create designs that are both visually appealing and inclusive, demonstrating that effective collaboration and user-centered thinking are essential for successful outcomes.