HOME / HOSPITALITY

Hospitality

MY ROLE

UI/UX Designer

YEAR

2022

INDUSTRY

Burgerbloc

PROJECT OVERVIEW

BurgerBloc is a halal smash-burger brand launched in Mississauga in February 2022. Its differentiation comes from a real product truth: beef is ground fresh daily, never frozen, and smashed on a flat-top. I translated this into a warm hospitality-driven identity and scalable menu structure designed for a growing digital and in-store experience.

VISIT LIVE SITE

Problem

A restaurant website needs to do more than look appetizing. It must connect brand discovery with a clear path to purchase, while accommodating menu complexity and differences between locations.

Key design questions How can customers find their preferred restaurant location quickly? How can the menu communicate products, prices, ingredients, and add-ons clearly? How can customers customize an order without unnecessary friction? How can the brand create a consistent experience across desktop and mobile? How can the experience encourage repeat purchases and larger orders?

Research & Insights

The discovery phase establishes what the business needs from the digital experience and where customers might experience friction. Business and product discovery Reviewed the brand's positioning, menu structure, product range, locations, and existing customer touchpoints. Identified the core tasks the website should support, from discovering the brand to completing an order. Considered restaurant-specific requirements, including product availability, location selection, pickup and delivery options, and meal customization. Defined the relationship between the brand's marketing website and its ordering experience.

Solution

Visual & Appetizing Discovery: Feature high-quality imagery of meals and clear categorization to help customers quickly find and understand their options. Streamlined Customization: Provide an intuitive, step-by-step modifier interface for meal customization so choices are clear and straightforward. Mobile-First Checkout: Design responsive layouts optimized for mobile ordering, ensuring a smooth, frictionless path to payment. Transparent & Confident Experience: Display clear pricing, order summaries, pickup/delivery times, and instant confirmation steps to build complete checkout confidence.

Process and Iterations

Audience Analysis: Identify customer groups and validate needs through research and testing.

Business & Product Discovery: Review brand positioning, touchpoints, core tasks, and specific functional requirements (such as availability, locations, and customization). Information Architecture: Build a sitemap outlining page hierarchy, navigation, and user flow from discovery to checkout.

Low-Fidelity Design: Create initial wireframes and sketches to map out layout structures, basic user flows, and core structural elements.

High-Fidelity Design: Develop pixel-accurate mockups incorporating actual brand colors, typography, imagery, and UI components.

In-Store Branding: Translate the digital identity into physical touchpoints, including signage, interior environmental graphics, and customer interaction spaces.

Packaging Design: Create sustainable, branded packaging solutions (such as bags, boxes, and cups) that maintain visual consistency and protect products.

Design System: Establish a centralized library of reusable UI components, typography rules, color palettes, and brand guidelines to ensure consistency across digital and physical platforms.

Outcome

Implementing a streamlined online ordering experience, clearer location selection, and intuitive menu navigation made it easier for BurgerBloc customers to find their preferred location, explore the menu, and complete orders across the website and mobile app. These improvements contributed to a 35% improvement in ordering efficiency and a more convenient, seamless customer journey. The enhanced experience also generated more positive feedback from both new and returning customers, strengthening customer satisfaction, building brand trust, and encouraging repeat orders.