Toast Brewing (Research + Prototyping Project)

Self Directed Project

Overview

This was a research and prototyping project that had the aim of improving the checkout process of Toast Brewing's website ( a sustainable craft beer company ). It focused on users pain points during the checkout process and how the user journey could be improved to match Business needs and KPI’s of Toast Brewing.

Year

2024

Role

UX-Researcher, Ui Designer

Line graph depicting customer expectations for a product, categorized by happiness, neutrality, and unhappiness, across different stages: homepage, browse, find, choose, add to basket, and payment. Positive, negative, and negative experiences are noted with specific comments in each stage.

Understanding The Problem

A digital flowchart showing the process of purchasing a can of Grassroots Pale Ale beer online, including website pages, product selection, checkout, and confirmation.

To better understand the users pain points and the current problem in the checkout process I used a variety of research methods, these included personas, storyboards, user journeys, surveys and cognitive walkthroughs. These allowed me to address key concerns been that the checkout process had too many steps, not much re assurance about the slightly higher price due to this been a sustainable product and the ;ack of a express checkout with apple pay or googlepay.

The Process

The redesign of Toast Brewing’s checkout process put the User experience in line with the core mission of the company: to brew great beer while fighting food waste. In its pursuit, the process had to optimize both usability and Key performance indicators, with every design decision supporting sustainability, sales growth, and customer trust.


First I had to understand the business needs of Toast Brewing's which revolved around increasing total sales, improving checkout completion, and reinforcing its sustainable brand identity. The new design was built to reinforce two KPIs:

Cart Conversion Rate: This improves due to reduced friction through fewer steps, more honest pricing, and a simpler checkout layout.
Order Frequency: Enhanced by a sense of loyalty and purpose-sustainability messaging at checkout to nurture repeat purchases.

Supporting UX metrics included time on task, error rate, and abandonment rate to give measurable indicators of usability and the efficiency of flow. These metrics ensure a balance between business growth and positive user experience.

Business Needs + KPI’s

Three hand-drawn website wireframes sketches on dotted paper, each displaying proposed layouts with headings, image placeholders, and sections for content.

Low Fidelity Wire Frames

Hand-drawn sketches of webpage layouts with headings, menu items, text blocks, and buttons, demonstrating a wireframe design for a webpage.
Website layout for an online beer shop with sections for product listings, product details, basket overview, and checkout.

Medium Fidelity Wire Frames

Online order confirmation webpage with a completed order summary, customer info, payment details, delivery address, and options to shop for more or return home. Gratitude message and placeholder images.

Low-fidelity wireframes: Defined the basic checkout structure, prioritizing simplicity of flow and clarity of tasks.

Medium-Fidelity Wireframes: Created page layouts for the product, cart, checkout, and confirmation stages.

High-Fidelity Mockups: Integrated Toast's branding, visible sustainability badges, and a minimal, trustworthy interface.

User Testing Plan:Test the Prototypes and gain feedback for further design iterations.

Low-Carbon Design: Made use of soft, energy-efficient colors, minimal images, and standard fonts to support eco-friendly digital design principles.

Prototype: Delivered an end-to-end, interactive checkout experience that showcases efficiency, clarity, and consistency with branding.

Design Iteration Stages:

Testing Results

A detailed test observation sheet with black and white sections. The top black section includes the participant's name "Louis Bostock" and test date "14.02.2025." The sheet is divided into five columns labeled: Task, Time on task, Comments, Behaviour
A test report with participant Roxy Benson on February 21, 2025, detailing tasks about buying beer, including task descriptions, time on task, comments, behaviors, and follow-up answers, organized in a table with black headers and purple notes.
A data table with black and green columns. The table includes participant name, test date, and tasks related to buying beer and reviewing the checkout process. The comments, behaviors, and follow-up responses are elaborately detailed in green boxes.
A digital thematic analysis chart with color-coded sticky notes. The chart has five columns titled: First Impressions, UI and Design, User Assurance, Negative Feelings, and Usability. Each column contains multiple notes in yellow, purple, and green,
Open laptop on white desk displaying an online product page for mixed case snacks. Beside it are a black mug, a tall textured gray cup with pens, a large gray and white striped vase, and a smaller black cup. There are stacked books behind the cup and a decorative white frame on the desk.
A workspace with a marble surface holding a tablet displaying an online shopping basket for a craft beer delivery service, a white pen, a coffee mug filled with coffee, a smartphone, a black pen, and a small marble-topped table with no items.
Person browsing an online shop for beers on a laptop, with rocks and a sculptural wooden object on a marble surface.

The Outcome

Users reported a smoother and more transparent experience with clear visual cues of where their contribution to Toast's mission was. The simplified flow resulted in less frustration, and their trust improved while reducing drop-offs during checkout.

From a business perspective, the improvements directly supported the brand's key KPIs:
Higher cart conversion rate through reduced abandonment and faster task completion. Drove an increase in order frequency, developing emotional bonding with the brand through sustainable design. In all, the redesign improved usability and ethical engagement to help Toast Brewing forge deeper relationships with customers and support its mission to make sustainability simple, seamless, and rewarding.