your friendly neighbor who bakes for your taste and health
Doux Cake - building an end-to-end responsive website for a local bakery
Research
Ideation
Branding revisions
Wireframing
Prototyping
User Testing
Iterations
3 weeks
Doux Cake is a local home bakery specializing in custom cakes and canele.
I recreated their website to help the business broaden its market and help customers access the business information such as menu, availability and order forms more easily and efficiently.
.png)
Doux Cake provides custom homemade cakes and baked goods. Many of the cakes are based on Korean traditional tastes. Doux Cake’s vision is to bake mildly sweet and affordable cakes and baked goods.
Doux Cake needs to expand their business by having a more convenient, accessible platform to attract customers. The current platform Doux Cake uses is limiting in providing all the needed information for the customers, starting from browsing to putting in an order.
Rebuild Doux Cake's website to clearly display types of cakes and baked goods and to provide convenient means to put and receive orders.
I went through a convergent and divergent double diamond process. The latter half was cyclical, with repeated cycles of testing, redesigning, and testing again.
.png)
Understand how people access Doux Cake and make orders to find ways to increase the number of customers locally by offering a convenient, usable platform that provides consistent user flows to understand the business, contact them, and make orders.
- Learn how customers find out the business.
- Understand the customer satisfaction in terms of contacting business.
- Understand the customer satisfaction in making orders.
- Find out which aspects customers rely on to make a decision to purchase - pictures, cake designs, flavors, easy to contact, reviews, etc.
- Find out the business pain points.
- Find out the customer pain points.
- Learn customer retention rate.
- Customer Survey
- User Interviews
- Competitive Analysis
To achieve the research objectives, I conducted a competitive analysis of local bakery websites, both direct and indirect competitors. This research was valuable in helping me, as a designer, to brand the website in a way that is both user-friendly and easy to navigate, ensuring a pleasant experience for customers interacting with the business.
.png)
Users can benefit from the following strengths of the websites:
- Clean, consistent UI
- Professional pictures of products (with use of cards or carousels)
- Clear CTA’s at the top or in the hero
- Detailed order form
- Availability feature
In order to have a better understanding of users, I interviewed 5 participants between ages of early 20s to 50s. Participants' experiences with custom order varied.
- 4 out of 5 respondents indicated they would not have easily found the business, except possibly through Instagram hashtags or Googling “Chicago custom cake.”
- All respondents found contacting the business easy, with most familiar with Instagram DMs and Kakao.
- Preferences varied for payment methods, with some favoring an official website transaction method, Zelle, or Venmo. Others were curious about the order form process.
- 4 out of 5 users would consider Doux Cake for special occasions, appreciating the unique Korean flavors, moderate sweetness, and minimal use of artificial flavors and food dyes.
- 3 out of 5 respondents believed that non-Koreans would buy from Doux Cake if they were familiar with Korean traditional flavors, but even those unfamiliar might still appreciate the taste and designs.
- 4 out of 5 would consider ordering a cake from Doux Cake depending on factors like pricing, designs, or just for the experience.
- 4 out of 5 would return if the design matches the request, the cake tastes great, and the customer experience is positive.
- One respondent emphasized the difficulty of finding bakeries offering custom cakes with Korean traditional flavors or moderate sweetness - appreciate Doux Cake's options!
- The business is hard to find online, therefore not accessible.
- Communication is sporadic
- Curiosity and uncertainty about the order form process and how transactions would be handled.
- Want to see pictures of the kitchen and baker to ensure professionalism and hygiene.
- Want to see a menu, price range, and hours of operation.
- Value the uniqueness of Korean flavors, moderate sweetness, and minimal use of artificial flavors and food dyes.
- Expect a seamless payment process, whether through an official website, Zelle, or Venmo.
.png)
Based on the research, I developed two user personas for The Couch, each reflecting the motivations, pain points, and desires of the target users.
Prioritizing users' needs and look for's, I designed the sitemap below.
.png)
Doux Cake's vision is to provide a selection of healthier cakes and baked goods with a hint of Korean traditional flavors with affordable price. In doing so, the client wanted the design of the website to bring out Doux Cake's vision of simplicity, clean ingredients, and warmth. After consulting with the client, I've created a moodboard and discussed with the client again before creating the UI library.
It's time to dive into wireframing! I've developed the desktop version of the website, detailing the user journey through browsing, shopping, and order placement.
After collaborating with the client on branding concepts, the color scheme was finalized. Even though these are mid-fidelity wireframes, I’ve incorporated Doux Cake’s primary colors to reflect the brand’s visual identity.
Now it's time to move from wireframes to a high-fidelity prototype. I focused on making product images visually striking and consistent across the site. While the user flows are straightforward, designing distinct cards—such as product, review, and category cards—was key to enhancing usability. I carefully ensured each card is visually appealing, readable, and accessible.
view in figma.png)
Now I wanted to test the usability of the responsive website by conducting a usability test on the two main task flows. The test was conducted virtually with 3 participants, each session lasting about 20 minutes. At the end of the test, users answered questions to provide feedback. Below are the usability testing goals:
- Determine if users can understand the purpose of the product clearly through the homepage.
- Assess if users can easily browse menu options
- Assess if users can easily submit an order form
1. Browsing menu
2. Submitting an order
1. Tasks are completed quickly and efficiently.
2. Users are motivated to contact the business after browsing the site.
3. Error forgiveness and users retrying.
I organized the feedback using the grids below. First, I sorted it into four categories: what worked, questions, ideas, and changes. Then, I used a severity-frequency grid to prioritize the feedback based on the seriousness and frequency of the issues identified during user testing.
- Overall, participants were satisfied with the design - simple and clean.
- Participants were impressed with the products offered on the website.
- Participants found menu options to be accessed easily.
- All participants were able to browse three menu categories successfully.
- All participants were able to submit the order form easily.
- Participants expressed that the website was easy to navigate.
- The sticky nav bar was helpful.
- Participants expressed that they would want to order something from Doux Cake after interacting with its website.
- One user said that the logo doesn’t pop out as much compared to the other header font size.
- Having calendar in each menu page made the page a little crowded
- The carousel in the mobile version was hard to navigate due to small arrow button
- Consider having a sticky, accordion, or breadcrumb to show 3 menu subcategories under the “shop” tab.
- Some body fonts are not consistent - some too big.
- Wished to see enlarged pictures when tapped
The targeted feedback I received from usability testing allowed me to prioritize key areas for improvement in my revisions. Below is a summary of the changes I made:
%20graphics%20(3).png)
%20graphics%20(4).png)
%20graphics%20(2).png)
.png)
This was my first experience working with a real client, and it was both exciting and challenging. One of the biggest challenges was maintaining constant communication with the client and balancing their desires with user needs. Given the three-week time frame, I had to carefully manage my time to ensure each design stage was properly executed, presented to the client, and refined based on feedback.
For example, while the client understood the need for a more accessible website for users, they were accustomed to using Instagram as their primary platform. This led to several discussions about the website's importance and its benefits for the business.
Another challenge involved working within the existing branding guidelines. Initially, this seemed easier since I didn't have to create branding from scratch. However, I soon realized that it also meant my ideas were secondary to the client’s preferences. I needed to thoughtfully suggest and align my ideas with the client's vision to achieve a more effective final design in terms of usability and aesthetics.
- Gained valuable experience collaborating with a local small business owner.
- Learned the importance of seeking feedback early and consistently rather than waiting to perfect the design and risk receiving feedback too late.
- Developed skills in balancing user needs with business goals and desires.
- Improved ability to work efficiently within tight time constraints.
- Enhanced decision-making skills by building upon and aligning with existing branding styles.
- Strengthened communication skills through direct collaboration with a client.
