ON THIS PAGE

Baking by Max website redesign

Redesigning Baking by Max’s landing page into multiple pages to create seamless navigation and enhanced user engagement. The redesign also aims to implement a custom ordering interface that will streamline the ordering process for their customers..

Over the course of 1 week, as a team of 4 for a hackathon redesigned the UI of the website. The objective of the project was to create a website for the growing customer base and adding a custom ordering interface that will streamline the ordering process for the customers. This project included understanding the briefg, meeting the client and also feedback from the group mentor.

Timeline

18th - 26th February 2024

Role

Lead UI/UX designer

Tools

Figma

Watch our presentation video that explains the project.

The Client

Who is Baking by Max?

Baking by Max, a bakery based in Edmonton, specialises in baking for people who have specific dietary needs.

Maxine manages this small business, aiming to broaden its customer base beyond individuals with specific dietary requirements. In the face of growing competition within this niche market, Maxine emphasizes the importance of designing strategies that prioritize customer expansion and appeal to a broader audience.

The Brief

What are the problems we are trying to solve?

Improving the website's current UI and also developing an interface for customers to customise their baking order.

While this was the primary brief given by the client, it was important to look at competitors, understand the brand identity, and also take a deeper look at the website.

Additional notes that guided our design:

Target demographic is middle aged women (30-50 years)
Prefers a non-modern aesthetic, one that is fun, cute and feels homemade

Key Considerations

UI Considerations kept in mind while designing

Prioritising accessibility with clear contrast following the WCAG, ensuring smooth usability for all users.

Maintaining the customer's integrity by ensuring transparent communication of pricing details, pickup procedures, and necessary licences.

Designing an intuitive navigation system for users to be able to easily move between different sections and find what they're looking for without getting lost.

Ensuring that the UI is responsive and adaptable to different devices and screen sizes. This benefits users who may be using different devices to reach our client.

Maintaining consistency in design elements, terminology, and interaction patterns across the entire UI reduces cognitive load.

Designing elements with common visual patterns, to align cues with user expectations. Users can also understand the purpose of the elements without needing explicit instructions.

The Final Design

Website Design and Design System

See the desktop prototype See the mobile prototype

Sitemap

Breaking down the website into smaller bits

Designing a comprehensive overview of the structure and content of the website. Lead to a more logical information architecture, making the website more user-friendly.

Prior to drafting the wireframes, we conducted research on numerous competitors to gain insights into their layouts and ordering processes. Additionally, we developed an information map to visualise the organisation of content for the design.

sitemap for the redesign website

Front-end Prototyping and Iterations

Initial Wireframing

Keeping in mind that our aim was to optimise efficiency and ease of use, we carefully created wireframes to visualise and conceptualise a seamless and customisable user flow.

menu page

customisation page

sitemap for the redesign website

First Iterations

Next, we experimented with different visual styles. This allowed us to gauge the most suitable aesthetic that not only appeals to our audience but also reflects the brand identity.

We received feedback from our mentor to refine our approach further. The insights we received helped us identify areas for improvement for future iterations.

the grid layouts in prototypes 02 and 03 are ideal
the illustration and fun colours in prototype 01 are great
Integrate elements of 01 and 03 for future iterations

Second Iterations

This iteration aims to refine and elevate the user experience based on the insights we received.

After developing the second iterations of our prototypes, we met with the client again to gather their feedback. They provided insights on their preferred aesthetic and approved elements for inclusion in the final design.

Refining the Final Prototype

Additionally, we designed a mobile version to showcase its responsiveness across different devices.

checkout the desktop prototype

checkout the mobile prototype

Learning outcomes

Notes to future self

Here is what I learned:

It is important to not just implement feedback received but also build on top of it so that I can push my designs further, by taking the time to understand what parts work and why?

Key messaging needs to be reinforced and clarified at every step of the way for users as they move through critical flows such as placing an order. Relying less on users recalling critical pieces of information and do the heavy lifting for them by reminding them the right things at the right places.