Berolina Bakery

Berolina Bakery is a local bakery in Glendale, California. It is known for its fresh artisan breads and delicious European cakes, with a variety of pastries available. The bakery offers pickup orders, delivery in some areas of the city, and it ships across the U.S. You can enjoy breakfast or lunch in the cozy dining area, along with limited food and beverage options.

I redesigned the website for Berolina Bakery to enhance its user experience and visual appeal, focusing on easy customization in the cake section. The new design allows customers to easily explore and personalize their cake options.

Project Overview

Problem Statement

• Streamlined Navigation and Structure: Redesigned the website’s information architecture and navigation for easier products discovery.

• Enhanced Visual Appeal: Updated the design to create a more attractive and functional layout with a seamless browsing experience.

• Clear Product Highlights: Provide details like availability, ingredients, customization options, and ordering methods clearly on each product.

• Improved Cake Personalization: Simplified the customization process to make it easier and more accessible.

• Integrated Ordering Tips: Display warnings, tips, and key FAQs directly during product selection and checkout.

The Berolina Bakery website, despite offering a wide variety of products across different categories, struggles with a cluttered design, ineffective information architecture, poor navigation, and incomplete or occasionally confusing product details. These issues contribute to user frustration during the ordering process.

Design Approach

Design Target Users

• First-time Visitors: New users unfamiliar with the bakery, benefiting from a simplified layout to find products and navigate efficiently.

• Local Online Shoppers: Residents of Glendale(California) and surrounding areas who visit the website to check product availability and place online orders, benefiting from the streamlined navigation and clear product details.

• Health-Conscious Shoppers: Customers with dietary restrictions or those seeking clear ingredient information and customizable options based on their preferences.

• Time-Constrained Clients: Parents, corporate clients, or event planners who need a quick and easy way to find products (breads, cakes, pastries, catering, foods & drinks, etc.), view details, and place orders for celebrations.

As part of a UX-Land bootcamp project, I volunteered to redesign the website, focusing on improving the information architecture and enhancing the cake personalization experience to better serve users and showcase the bakery's unique offerings. Details are provided below:

Designe Thinking

Our team of 3 followed a Double Diamond approach based on the Design Thinking methodology. It was not a linear path; we bounced between stages as the project progressed.

Discover

To understand the users' pain points and develop effective solutions, I employed a comprehensive research approach that consisted of the following methods:

1. Heuristic Evaluation

2. Competitive Analysis

3. Interview

4. Cart Sorting

Unattractive Homepage Design

Heuristic Evaluation

Order Online Page

We initiated the project with a heuristic evaluation to identify pain points in the user interface design of the homepage, product categories, and the cake ordering process for special ceremonies.

Affinity Diagram

In the next step, we conducted quick user interviews while they explored the main website to identify its weaknesses. We used an affinity diagram to understand user needs.

Using an affinity diagram, we distilled the findings into the key factors for our redesign:

Weaknesses Identified

• Outdated Homepage & Design: Old, unattractive layout and color scheme; fonts are hard to read and outdated

• Unnecessary Elements: Old Covid-era pop-up still present

• Poor Visual Content: Too many photos without information or buying options

• Navigation Issues: Online store is confusing; categories are poorly organized

• Content Problems: Texts are too long; product info is incomplete

Redesign Requirements

• Improved Navigation: Make it easier to find products and sections

• Complete Product Details: Include price, size, servings, and freshness date

• Clear Ingredient Listings: Show ingredients for transparency

• Better Organization: Group cakes and other products into clear categories

• Social Media & Brand Story: Add links to reviews and share the business story

• Simple cake customization procedure

• More attractive design

Competitive Analysis

Additionally, we expanded our scope to include platforms like ruwiscakes.com , acasadolce.ca and celebritycakestudio.com , to recognizing that their designs could also inform the development of our website for the cake customization section. By examining these diverse platforms, we ensured that our design encompasses all the necessary elements to deliver a seamless and engaging user experience.

The process started with a competitive analysis of other websites that are in direct competition with the target website. During the evaluation, we made specific observations about various aspects of the competing websites to gain a clearer understanding of the essential features of our design.

We conducted a thorough analysis of these platforms to grasp their overall structure and functionalities, providing valuable insights for our own design.

Cart Sorting

• Some of the observations from Competitive analysis had a direct impact on the contents of the cards that we were creating. Based on the insights gained from the competitive evaluation, we made necessary modifications to the card contents to enhance their effectiveness and relevance.

• Then we worked on Cards and their contents again, based on a re-evaluation of the competitive analysis.

• We decided to conduct our card sorting using the Optimal Workshop platform. This choice significantly simplified our work, as it enabled us to view the results categorized based on different criteria. For instance, we could easily identify the Categories assigned to each Card and observe the Cards designated for each Category.

Define

The insights I gained from surveys and interviews leading up to the persona. The main goal is to display those patterns and pain points, which allowed me to further empathize with users.

Persona

Site Map

To ensure our information architecture meets user expectations, we conducted 16 open card sorting using the Optimal Workshop platform. After the initial exercise, we developed our first version and iteratively refined it based on user testing and competitive analysis.

Here is our final site map and in this case study, we have concentration on the 'Cakes' Section:

Based on the information we gathered, observations, and test results, we revised our site map and user flow multiple times. The final version of the project was shaped by several times of usability testing and having more additional feedback on our work.

Final User Flow

As we have concentration on the 'Cakes' Section, I separated this section:

Develop

Sketches and Wireframes

We initially mapped out our ideation using hand-sketched low-fidelity wireframes for the early design stages. Later, we transitioned to creating low-fidelity wireframes on Figma to visualize page layouts and design direction.

The important takeaway from our research includes identifying the key problems and finding their solutions. Please find the details below.

Solving Main Problems

Moodboard

UI Kit

We developed a complete UI kit to serve as a reference for templates and components. This kit ensures that interface development is smooth, consistent, and efficient throughout the project.

Deliver

High Fidelity Wireframe

Prototype

Here is the last prototype, displaying what we've achieved through our design process.

Usability Tests and Iterations

Throughout the project, we went through multiple iterations, driven by the insights we gained from usability tests. These tests were instrumental in shaping our decisions and constantly enhancing our project.

To create a 'Hero Area'—including the hero image, menus, and more—that immediately captures the user's attention and highlights the bakery's products and services, we designed several models and ultimately settled on the current design.

2- Global Menu

1- Definition of Cards

Products Page

1- Hero Area

2- Definition of Filters

3- Iteration on Cake Customization

3- Cake Customization on the Selected Product Page

Home Page

Selected Cake Page

Next Steps

What I have learned?

• The crucial role of research in enhancing product effectiveness.

• Collaborating within the team ensured timely delivery and meeting deadlines.

• Testing and iteration improved user-friendliness.

• Developing a UI kit ensured consistency and eased communication.

what next?

• "The next step in designing this website involves applying separate interviews, testing, and iteration to other products, such as bread, pastries, catering services, and other sections of the store like 'Delivery / Shipping' Section."

• Following this, we'll enhance the user experience by conducting additional usability testing and iterations to refine the user flow further.