A BETTER WAY TO SATISFY YOUR SWEET TOOTH
Sugar Stack is a design-led project done in collaboration with Coursera's Google UX Design Certification program. Sugar stack is a website that allows users to browse, customize, and order cakes.
As UX designer, I contributed to the overall design process and oversaw aspects related to product scoping, user flows, wireframes, prototyping, and usability testing.
Additionally, I conducted user research and synthesized research findings to produce evidence-based design outcomes.
To design an easy-to-use responsive website that provides a seamless user flow to browse, customize, and order cakes in the easiest way possible.
6 weeks
User research consisted of conducting interviews and creating empathy maps to understand the users I'm designing for and their needs. A primary user group identified through research was working adults who have ordered cakes online. The user group confirmed initial assumptions about online shoppers, but research also revealed that a responsive website would create a better user experience for those who order from various types of devices.
"Cakes are usually for fun, enjoyable events. The process of ordering a cake should feel that way too." - Lisa H.
During user interviews, I asked questions like: what is important to you when ordering a cake online? What frustrates you when ordering a cake? What could make the cake-ordering process easier or more enjoyable? These questions allowed me to gain insight on user pain points.
Taking the time to draft iteration of each screen of the website ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy way to find cakes to help the user save time by incorporating large picture elements and CTA buttons.
Initial sketches focused on the main user flow. Browsing cakes, customizing, adding to cart, and designing a scheduling feature, were all top priorities during this phase. Designing for quick views and floating menus allows the user to easily compare options without straying too far from the main user flow.
Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies. One usability study revealed some frustration with hidden shipping fees. I created the ability to enter a zip code earlier in the process and provide a shipping cost prior to checkout.
Preparing for another round of usability studies meant creating a low-fidelity prorotype that allowed testers to complete the main user flow. This was initially designed for desktop but the results of the study would be implemented across the board.
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a low-fidelity prototype and revealed what aspects of the mockups needed refining.
I included considerations for additional screen sized in my mockups. I felt it was important to optimize the browsing experience for a range of devices.
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy. Next steps include conducting follow-up usability testing on the new website, identifing any additional areas of need, and to add more functionality for any future products.
This was the first project that allowed me to really get familiar with AdobeXD. I am so grateful this project allowed me to design for different screens so I can see what the process is actually like. On that note, a few of the things I've learned:
1. Research is crucial when trying to build on existing business models. People have been ordering cakes online for quite some time now. In the beginning stages, I explored many different options to improve on user flows that people were already familiar with. I wasn't trying to reinvent the wheel, I was looking to improve it and enhance the user journey.
2. Collaboration cannot be taken for granted. Creatively designing Sugar Stack meant thinking of the brand with a startup mentality. What did I want the brand to feel like? How can pictures add to the brand identity and user experience? How can the user experience encourage a loyal community? These are all things I considered when designing and listening to user feedback.
3. Focus on real needs. User testing showed me that users care about making sure the product they ordered would be exactly what was pictured on the website. The user experience goes beyond the point of purchase. In the end, I designed all three screen sizes as best I could and made decisions that were truly best for the user.