Sugary Dreams
October 2024
4 Weeks
Roles
User research & User interface design
Project Type
Project
Problem Statement
The goal was to create an engaging, functional website for a small custom cake business to improve online visibility and streamline custom cake ordering. With limited online presence, the business needed a website that reflected its unique brand while simplifying the customer ordering process for customized cakes.
Challenges
Strict Timeline and Limited Resources:
Working within a tight schedule meant prioritizing essential features and making design decisions efficiently, often with limited resources.
Design Constraints:
With time and resources limited, design flexibility was constrained, requiring creative solutions to maintain a visually appealing site while keeping development quick and cost-effective.
Product Variants:
Determining a user-friendly way to handle various cake options—such as flavors, sizes, and design preferences—posed a challenge, as this required clear organization and a simplified selection process for customers.
Goals
Online Custom Order Form:
Develop an easy-to-use custom order form to allow customers to specify their cake requirements, simplifying the order-taking process.
Visual Showcase of Cakes:
Create a gallery section to feature a diverse range of cakes, giving potential customers insight into the baker’s style and capabilities.
Responsive, User-Friendly Design:
Ensure the website is intuitive and accessible across devices to provide a smooth experience for all visitors, enhancing user engagement and conversion rates.
Phase 1. Research and discovery
Research
Before starting the project. My partner and I were discussing what the client would like on their custom cake website. We discussed what the constraints were and what was needed on the website. As for the research, we were giving three things:
Flavor Options and Product Variants: A comprehensive list of cake flavors, filling options, and popular combinations was provided. Understanding these variants was crucial for designing an ordering form that could clearly present customizable options without overwhelming the user.
Visual Portfolio: A collection of high-quality images showcasing previous cake designs gave a visual reference for the baker’s style, skill, and versatility. These images served as the foundation for the gallery, ensuring the website highlighted the breadth of the baker's capabilities and allowed customers to see past work that aligned with their own needs.
Brand Personality and Style: Previous branding materials, such as color schemes, logos, and design elements, were reviewed to ensure the website's visual identity aligned with the baker’s unique aesthetic. This research informed color and design choices, creating a cohesive online representation of the brand.
Discovery
After conducting our research, we discovered that since this is a small business basically ran by one person, there will be many constraints in terms of what we can include in the project. We need to keep in mind that since it is only one person operating, the website should have easy communication for both the client and Sugary Dreams. We also discovered that because there is a time constraint, there might be some design objectives that might not be reached.
Phase 2. Design
Beginning Steps
In this project, I collaborated closely with a design partner to ensure we thoroughly understood the client’s vision and needs. My partner played a crucial role in the initial stages by engaging directly with the client. Through these early conversations, my partner was able to capture the client’s requirements, preferences, and overall aesthetic direction, which laid the foundation for our design work.
Using the logo and images gathered in the research phase, my partner start off creating some designs.
My partner began the design process by creating a gallery-style homepage to highlight the client’s custom cakes, presenting them in a format reminiscent of a portfolio. Her goal was to showcase the bakery’s craftsmanship through a clean, minimalistic design that focused primarily on visual content. This initial version featured a simple layout: a series of high-quality images of the bakery’s previous creations, accompanied by a concise description of the bakery.
In another iteration (on the right), my partner experimented with a more playful and vibrant approach. She incorporated a gradient sprinkle background to add a whimsical touch and used blue borders around the buttons to create visual contrast. Additionally, she integrated more imagery to make the page feel lively and engaging, exploring how these elements could enhance the user experience while maintaining a balance with the overall design.
Creating the Layout
After reviewing my partner's initial designs, we gained a clearer vision of the overall look and feel we wanted to achieve for the website. The next step in our process was to define the core purposes of the website and determine the key features needed to fulfill them. We identified three primary functions for the site:
Showcase the Client’s Work: The website’s first function is to highlight Sugary Dreams’ portfolio of custom cakes. By featuring a prominent gallery on the homepage, we aim to immediately impress visitors with the bakery’s craftsmanship and provide inspiration for custom orders. This section not only showcases past work but also gives customers premade options they can choose from if they prefer.
Facilitate the Purchase of Baked Goods: The second key feature is a section dedicated to other baked goods, including fruit tarts, chocolate-dipped fruits, and various snacks. While these items are not Sugary Dreams’ main focus, positioning this section prominently helps draw attention and engage visitors as they scroll. This strategic placement encourages browsing and potentially boosts sales of these secondary products.
Enable Custom Cake Orders: The custom cake order form is the most crucial aspect of the website, reflecting the core of Sugary Dreams' business. We prioritized making this section intuitive and seamless, ensuring customers can easily personalize their orders with minimal friction. The user experience in this section had to be smooth and clear, accommodating the variety of customization options available.
Following the order form, we included two supporting sections: About and FAQ. The About section gives visitors insight into the story and mission of Sugary Dreams, fostering a personal connection. The FAQ section addresses common inquiries and provides a way for customers to get in touch if they need further assistance. These sections contribute to a well-rounded experience, making the site not only functional but also informative and engaging.
First Version
Homepage Design Our initial concept for the homepage centered around the idea of a gallery that immediately captures visitors' attention. We wanted the first thing users see to be a vibrant display of Sugary Dreams’ previous cake creations. This gallery serves as both a visual portfolio and a source of inspiration for potential custom orders.
Baked Goods Section In our first version of the Baked Goods section, we designed product cards that display an image of each baked good along with a brief description. Each card features an “Order Now” button at the bottom, allowing customers to quickly add items to their cart with a single click. This design aims to make the purchasing process straightforward and efficient.
Custom Cake Order Form To make the custom cake order form engaging, we decided to focus on creating an interactive and enjoyable experience for users. Drawing inspiration from competitors, we wanted the form to feel more like a playful journey than a standard form. During our research, we discovered Mia’s Bakery (https://miasbrooklyn.com/wp/) and were inspired by the interactive flow of their custom cake order form. We used their approach as a reference, aiming to replicate a similarly engaging and seamless experience.
FAQ and About Sections The final components we focused on were the FAQ and About sections. The FAQ section is designed to address the top 5-10 questions customers commonly have, ensuring quick access to essential information. The About section doubles as a contact page, providing customers with a way to get in touch with Sugary Dreams for assistance or to discuss any concerns. These sections are crucial for building trust and ensuring a comprehensive user experience.
User Testing and User Interviews
After creating our initial version of the Sugary Dreams website, we realized it did not fully meet our expectations, particularly in terms of user interface design. We felt that certain elements might not appeal to customers and wanted to enhance the custom order form to make it more interactive and enjoyable.
To gain valuable feedback, we conducted user testing with four participants. We divided the testing process into two main sections. The first section consisted of specific tasks for the users to complete:
Order a custom birthday cake with vanilla flavor, buttercream filling, and Nutella novelty.
Add chocolate-dipped strawberries to the cart.
Find two ways to contact the company in case of any issues.
Check if the bakery offers gluten-free cakes.
Our goal was to observe how users interacted with the website and identify any obstacles they faced. Here are some key observations:
Edgar Garcia: Struggled to click the "order now" button due to the moving product cards. He suggested either slowing down the motion of the cards or making them static to improve usability.
Tiffany Yong: Experienced confusion when she clicked the cart and couldn’t navigate back easily. We recognized that the cart's functionality and design were significant issues that needed to be addressed.
Elle Huang: Took extra time exploring each page, often pausing to take in the content. This indicated that the layout's information flow was not intuitive, potentially hindering users from exploring further.
Edward Wong: Wanted to browse more images on the homepage but couldn't navigate through them. He suggested adding navigation buttons to the slider for a smoother experience.
After observing these interactions, we asked the users for suggestions on improvements. Some of the most important recommendations were:
Edgar Garcia: Suggested enhancing the visual design by adding background images and more elements to make the website look complete. He felt that the current design lacked visual appeal.
Tiffany Yong: Recommended including an "other" option in the custom cake section for more flexibility. She mentioned that users might want to input custom choices if the existing options were insufficient.
Elle Huang: Pointed out the cart’s functionality issues, noting the absence of a checkout button or clear navigation options after opening the cart.
Edward Wong: Reiterated the need for navigation buttons on the homepage slider to allow users to view all images more easily.
These insights and suggestions highlighted crucial areas for improvement, guiding us toward refining our design and enhancing the user experience.
Final Version
Homepage Design In our final iteration, we opted for a carousel layout that showcases high-quality images spanning nearly the entire page. This design choice allows users to appreciate the intricate details of Sugary Dreams' cakes. Additionally, we included a card positioned in the bottom right corner with a button that links directly to the custom cake order form, ensuring easy access.
Baked Goods Section For this section, we made significant changes based on user feedback. Inspired by Netflix's layout, we transitioned from a continuous scroll design to a horizontally scrolling format that better showcases the product cards. This adjustment improved usability, making it easier for users to browse and select items without difficulty. The Netflix-style interface provides a clean and efficient way to display the various baked goods while enhancing the overall user experience.
Custom Cake Order Form We refined the custom cake order form to ensure consistency with the rest of the website’s visual style. For inspiration, we looked at Kiesel Guitars' custom guitar builder (https://www.kieselguitars.com/builder/guitar). The interactive features of Kiesel’s tool influenced our approach, helping us create a form that allows users to effortlessly customize their cakes while maintaining a cohesive design throughout the site.
About Section In the About section, we aimed to give visitors a deeper understanding of the bakery and its owner. Although we didn’t receive extensive details about Sugary Dreams or the client, we created engaging content that effectively communicates their story and mission, ensuring a personal connection with the audience.
FAQ and Contact Section We decided to separate the FAQ and About sections after analyzing similar websites, as we noticed they are rarely placed together. The FAQ section now features an accordion-style design, where users can click on a question to reveal the answer. To enhance usability, we also added a simple contact form beside the FAQ section, making it convenient for customers to reach out with additional questions that aren’t covered.
Takeaways and Reflection
Throughout this project, I gained valuable insights into the importance of research and understanding established design conventions. One of the key lessons was that adhering to design rules—such as using familiar interface elements like radio buttons for single-option selections—is essential. People are accustomed to these conventions, and breaking them can lead to confusion and a subpar user experience. This experience highlighted the need to thoroughly research best practices before implementing design features.
I also learned to balance creativity with practicality, especially under the constraints of time and project scope. Working with a small business meant that we had to prioritize a simpler, more functional design rather than exploring elaborate or innovative elements. While I had many ideas for creative features, the reality of the project required us to focus on efficiency and meeting the client’s core needs. This taught me the value of adaptability and designing within the limits of what’s feasible, all while delivering a product that fulfills its purpose.