Designing a flow to order cake from bakery 

Bakery Website

User Research

User Survey

I conducted a user survey to gather feedback from the participants, i recruited a series of people that loves buying baked goods from the bakery - several walk in buyers and several online browsers . I kept the age ranges and gender identities wide, including a mix of people from 19 to 60. Interviews lasted about thirty minutes as I asked them about their browsing and walk in experiences. I then turned it into empathy maps to better understand the user target and their needs, I discover many target user use bakery website for their convenience as most of the target user was working adults and they hate waiting in queues.

The main two pain points were :-

• Navigation : many bakery website has confusing navigations and was overwhelming ,This caused a normal browsing to be more challenging for them.

• Interaction : Small buttons on bakery websites makes item selection to be difficult and leads user to make mistakes.

"Sometimes, navigating the bakery website on my mobile device feels a bit clunky. 

It would be great if the mobile experience was consistently smooth and user-friendly."

Competitive Audit

To gain a comprehensive understanding of the bakery market, I conducted an in-depth competitive audit of several websites. Through this analysis, I assessed the usability, design, functionality, and accessibility of each platform, identifying key gaps in their offerings and areas for improvement.

• Checkout Process: Websites with streamlined and user-friendly checkout processes excelled in creating a seamless purchasing experience. However, others had complex checkout flows that could potentially discourage conversions.

• Social Media Integration: The presence of social media integration varied among the audited websites. Those with strong social media engagement and user-generated content fostered a sense of community and brand loyalty.

• Mobile Experience: The consistency and optimization of the mobile experience varied. Some websites provided a smooth and responsive interface, while others struggled with slower page loading times or design inconsistencies.

In the next step the most common themes in the user foundational research data were recognised and the users whom personify those themes were grouped under a specific persona -  Two fictional user whose goals and characteristics represent the needs of a group of users.

Design and Refinement

Paper Wireframes

Paper wireframes serve as the initial sketches and blueprints for designing the website. It allow me to visualize the layout, structure, and user experience. These paper wireframes facilitate collaboration, feedback, and quick iterations before moving to digital design. It lays the foundation for creating an appealing and user-friendly bakery website that meets my goals.

Transitioning from paper wireframes to digital wireframes enhances the bakery website design by adding visual elements and interactivity. This transition refines the design, incorporates branding, and ensures a more accurate depiction of the final website. Moreover, The consistency of buttons would be important to make the site feel cohesive. I also realized that this was going to involve several different kinds and shapes of cards on the search page, the home page, and delivery section I had decided to add earlier. Furthermore, the hardest part creating this wireframe was the footer part as i wanted it to provide all the information with social media intercations.

From here, I moved into early low-fidelity prototype stages. Thankfully, this website for an bakery  did not need to be that complicated. I decided to keep it down with dropdown menus with basic layout, structure, and functionality without intricate details or visual polish. The main focus of the low fidelity was I connected all the screens involved in the primary user flow of adding an item to the cart and checking out.

Usability Testing

I conducted five usability tests with multiple individuals. These were unmoderated remote usability studies for everyone convenience’s sake. They attempted to add the items into the cart and checking out.

• Mobile Responsiveness: Users highlighted difficulties in accessing and interacting with the website on mobile devices. Optimizing the website for different screen sizes and ensuring seamless mobile responsiveness will enhance user satisfaction and accessibility.

• Visual Hierarchy: Users expressed a desire for clearer visual cues to prioritize important information, such as product details, pricing, and promotions. Improving the visual hierarchy through typography, color, and layout will guide users' attention and improve overall readability.

I refined and polished the high-fidelity prototype for the bakery website which will closely resembles the final product. I wanted the colors to be friendly and fun, and I decided to use  shades of orange as the most obvious colors.  It incorporates detailed visuals, interactive elements, and captures the brand identity. Users can navigate, interact with features, and provide feedback for a realistic experience. It addresses usability improvements and serves as a platform for testing and refining the design before development.