Responsive Website redesign for Mac Lab Bakery

Mac Lab, a beloved local bakery founded by skilled bakers trained at the esteemed Culinary Institute of America, prides itself on crafting exquisite French Pastries, notably Macarons of unrivaled quality. However, their main challenge lies in managing overwhelming phone orders and refining their website's online ordering system. Check out the new reimagined Build-a-box shopping experience and improved navigation.

Roles: UI/UX Designer, UX Researcher

Agency: Design Lab

Duration: 4 weeks (~80 hours)

Tools Used: Figma, FigJam, Zoom, Discord

Design Process

  • Overview

  • Stakeholder Interviews, Usability test of current website

  • Affinity Mapping, User Personas, POVs & HMWs

  • Site Map, Task Flows, Low-Fidelity Wireframes, High-Fidelity Wireframes, UI Style Kit

  • Usability testing for High-Fidelity Wireframes, Revisions & Follow up Usability Testing

  • Conclusions and Discissions

Problem

Overview

Research indicates that these issues stem from:

  1. Offering a wide variety of flavors can overwhelm customers, especially newcomers.

  2. Complicated checkout processes due to similar product names, resulting in confusion and lengthy checkout times.

  3. Customers face difficulties in finding desired information due to complex navigation.

By addressing these concerns, Mac Lab aims to enhance the customer experience and boost revenue.

Discovery (Research)

Stakeholder interviews:

I conducted remote interviews with the owners of Mac Lab to grasp the challenges hindering the business's success. Through these conversations, I discovered the core values driving the business, such as Quality, Innovation, and Precision. Interestingly, despite the potential for online orders to drive profit, customers predominantly opt for phone orders over website transactions.

Usability Testing #1:

To delve deeper into website issues, I conducted usability tests focusing on key features highlighted by the owners, such as accessibility, product navigation, and the popular "Build-A-Box" feature. Participants were tasked with locating crucial information like merchandise and macaron flavors while navigating the ordering process. Their feedback revealed common issues: overwhelming choices in the "Build-A-Box" feature, difficulty finding desired information (relevant info placed in irrelevant places), and visual clarity issues impacting accessibility.

Before iteration

After iteration

Define (Synthesis)

Affinity mapping:

To address these findings, I categorized insights through Affinity Mapping and crafted How Might We (HMW) and Point of View (POV) statements, honing in on Information Architecture as a core issue. This guided the direction of my process. Additionally, I developed User Personas to visualize user needs before designing wireframes, ensuring a user-centric approach throughout the project.

User Personas:

I conducted remote interviews with the owners of Mac Lab to grasp the challenges hindering the business's success. Through these conversations, I discovered the core values driving the business, such as Quality, Innovation, and Precision. Interestingly, despite the potential for online orders to drive profit, customers predominantly opt for phone orders over website transactions because there was a lack of visual representation of their products, and finding specific themes related to their desired products (Weddings, holidays, etc.)

POVs & HMWs:

Features Roadmap/Matrix:

Before deciding on design features, I revisited my business goals: boosting sales, retention, and task completion rates. I then set research goals and formed hypotheses to pinpoint issues, helping prioritize features within the constraints of time and budget. Understanding my target audience—customers ordering macarons online for holidays, special occasions, and events—was crucial. Based on this, I focused on refining the Information Architecture of the navigation bar and redesigning the shopping experience. These changes aim to simplify purchases, incentivize task completion, and drive profitability while accentuating the company’s unique value proposition.

Business Goals

  • Increase online sales to a wider audience 

  • Increase the number of users who visit and use the site

Research Goals

  • Understand why there has been a decrease in sales

  • Understanding why Users are taking so long to make custom/catering orders

  • Understanding what pain points users are experiencing when making checkouts/orders

Target Audience 

  • Young adults (Owners mentioned that a lot of their in-store customers tend to vary from students who study there, yelp reviewers, social media influencers, etc.)

  • People who order for Holidays/Special occasions & Catering

Develop (Design)

Site Map:

To enhance user experience, I began by creating a general sitemap to reorganize the navigation bar's information architecture. I noticed that certain pages were misplaced in the previous design, hindering user navigation. For instance, the Macaron subscriptions were not under the Macarons tab, potentially impacting subscription sales. In the revised sitemap, I grouped them logically to enhance visibility and sales.

Task Flows:

I mapped out the task flow for the "Build-a-box" product to streamline the customization process. Initially, I explored a hover box feature for drag-and-drop customization but found through usability tests that it caused confusion.

Low Fidelity Wireframes:

Initially, I explored a hover box feature for drag-and-drop customization but found through usability tests that it caused confusion. Iterating based on feedback, I adjusted the navigation organization, resulting in slight variations from the original draft.

Website Version

Mobile Version

UI Style Kit:

The branding process involved careful consideration of Mac Lab's identity and vision. Final branding elements included a distinct color palette and cohesive design elements.

For the color palette, I selected a pink hue to align with the owner's vision and maintain brand consistency. This choice resonated with the business's identity and added a touch of vibrancy to the design.

Delivery (Testing & Revisions)

Usability test for High-Fidelity prototype:

In addition to testing wireframes and visual design, I created a live and functional prototype to simulate user interactions accurately. This prototype served as a crucial tool for testing various functionalities and gathering feedback iteratively throughout the design process.

To reiterate, the following are feedback that were addressed in my usability testing:

Revisions and Follow-Up Usability tests:

Insights gleaned from testing were instrumental in shaping the final deliverables for the website redesign and the Build-a-box product. One key insight was the need for improved Information Architecture on the website, leading to a reorganized layout in the final deliverables. By strategically placing call-to-action buttons for essential information and products, such as the unique selling point and frequently purchased items, I aimed to enhance user engagement and drive sales.

For example, insights from testing revealed that the Build-a-box product experienced lower online sales compared to in-store purchases. To address this, I introduced visual cues in the web version of the product to guide users through the customization process, mirroring the in-store experience. This approach aimed to increase online sales by providing users with a more intuitive and engaging ordering process.

After (Build-a-box)

After changes

  1. Displays flavors with images and volume toggles for more visual cues and accessibility

  2. Displays interactive box that adjusts with selected flavors so users can see what flavors they choose

  3. Sorts the flavors by popularity and alphabetical order so that users can navigate flavors easily and receive recommendations to shorten the decision-making process for new customers

Before (Build-a-box)

Before changes

  1. The drop-down menu is used to display macaron flavors and choices

  2. It does not display an interactive macaron box that changes with the selected flavors

  3. The Macarons are not sorted in any particular order. Customers are overwhelmed by the amount of flavors to choose from.

The Solution

Discussion: (Click on picture to view files)

Overall, I am most proud of being adaptable at solving a real-life business issue by creating a project that highlighted the importance of understanding user preferences and pain points, as well as the value of iterative testing and adaptation. It showcased my ability to tackle complex design challenges and deliver impactful solutions tailored to meet the needs of the client and their customers.

Website Version

Mobile Version

Current

Proposed

Proposed

Conclusion:

The Mac Lab project was a deep dive into enhancing the customer experience for a beloved local bakery. Despite its culinary excellence, the business faced challenges with overwhelming phone orders and a lackluster online ordering system. Through remote interviews and usability testing, I uncovered key insights, including issues with information architecture and navigation clarity.

To address these challenges, I proposed redesigning the website's layout and improving the "Build-a-box" product customization process. Iterative testing and adjustments were made, resulting in a more intuitive user experience. The branding process involved selecting a vibrant pink color palette to align with the business's identity, while deliverables included sketches, wireframes, UI designs, and branding elements tailored to meet the business's needs.

My favorite part of the process was the opportunity to adapt my design approach to fit the unique requirements of the project. Working with a real-life business in a contract role allowed me to make data-driven decisions and navigate various design processes effectively. Insights from usability testing played a pivotal role in shaping the final deliverables, ensuring a seamless user experience and potentially boosting online sales.