DUO BREW Accessible Ordering Web App

Overview

Ordering a coffee should not depend on how well a customer and barista can communicate verbally.

For Deaf and hard-of-hearing customers, placing an order in a physical coffee shop can sometimes require additional communication steps, written explanations, or assistance from another person.

DUO BREW was developed to make in-store ordering more accessible by giving customers a digital way to communicate their selections. Customers can browse the menu, configure their order, and generate a QR code containing their order information. At the shop, the barista can scan the code to review the customer's selections and prepare the order.

As the frontend developer, I built a customer-facing web application that addresses a practical accessibility challenge without requiring the business to operate a dedicated ordering backend.

The central idea is simple: make coffee ordering easier to understand and communicate, regardless of whether the customer and barista share a spoken or signed language.

Why This Project Was Built

The project was motivated by a real-world accessibility problem: Deaf and hard-of-hearing customers can face communication barriers when ordering from a barista in person.

Traditional ordering often relies on spoken conversations, hearing the barista's questions, or finding another way to communicate customization requests. Not every customer knows sign language, and not every barista knows how to use it.

DUO BREW explores a more accessible alternative by moving the order-selection process into a digital interface.

Instead of having to communicate every choice verbally or through sign language, customers can select their drinks themselves and present the completed order as a QR code for the barista to scan.

The goal is not to replace sign language or personal interaction. It is to reduce communication barriers and give customers more independence when placing an order.

The Challenge

The ordering experience needed to address three practical requirements:

• Communication barriers: Customers needed a straightforward way to express their drink choices and customizations without depending entirely on verbal communication.
• In-store ordering: The application needed to support orders placed at the physical coffee shop rather than relying on a remote ordering and delivery workflow.
• Minimal infrastructure: The solution needed to work without requiring the business to maintain a dedicated backend, customer accounts, or a conventional online checkout system.

The challenge was to make the ordering process accessible and practical while keeping the implementation lightweight enough for a local coffee business.

The Solution

I built a frontend application that connects menu browsing, order customization, and QR-based order handoff into a single customer journey.

Customer experience

• Digital menu: Customers can browse available coffee products and review their options through the web interface.
• Order customization: Customers can configure their selections before presenting their order.
• QR code generation: The application generates a QR code representing the completed order information.
• In-store order handoff: Customers present the QR code to the barista, who can scan it to review the requested items.
• Reduced communication friction: The visual order information helps communicate the customer's selections without relying entirely on a spoken conversation.
• Mobile-friendly interface: Customers can use the application from their phone while visiting the physical shop.

A More Inclusive Ordering Experience

The QR-based workflow provides a practical alternative for customers who prefer not to rely on spoken communication.

Rather than attempting to explain every selection during a conversation, customers can review their choices in the interface and present a digital representation of their order.

This approach can help customers who are Deaf or hard of hearing, as well as other customers who experience communication difficulties in busy environments.

The accessibility benefit comes from giving customers another reliable way to communicate their choices, not from requiring everyone to use the same communication method.

Architecture & Engineering Decisions

A central decision was to build the application without a dedicated backend.

Backend-free architecture

The menu interaction, order configuration, and QR generation are handled on the frontend. This avoids the need to deploy and maintain a separate server solely for the basic ordering flow.

For a local coffee shop, this approach offers a lightweight way to introduce a digital ordering interface without immediately taking on the complexity of a full e-commerce platform.

QR-based order representation

The application uses a QR code as the handoff mechanism between the customer and barista.

The customer creates an order through the interface and presents the resulting code at the physical shop. The intended workflow lets the barista scan the code and review the associated order information.

This replaces the need to communicate every item exclusively through a verbal exchange, while keeping order confirmation and preparation within the shop's existing in-person workflow.

No dedicated ordering backend

The application was designed around the requirements of in-store ordering rather than remote ordering, delivery, or online payment processing.

By avoiding unnecessary backend infrastructure, the implementation keeps its scope focused on the customer experience and the communication problem it is intended to solve.

A backend would become relevant if the business later required centralized order storage, real-time order status, payment processing, inventory synchronization, or reporting.

Results & Practical Impact

The project demonstrates how a relatively lightweight web application can address an accessibility problem through thoughtful interaction design.

• More independent ordering: Customers can configure their choices digitally instead of relying entirely on verbal communication.
• Clearer order communication: A QR-based handoff gives the barista a digital representation of the customer's selections.
• Reduced communication barriers: The interface offers an alternative for Deaf and hard-of-hearing customers who encounter difficulties with conventional ordering.
• Minimal backend infrastructure: The core customer ordering experience does not require a dedicated backend.
• A practical solution for a local business: The application introduces a digital ordering workflow without requiring a full-scale e-commerce system.

These are the intended benefits of the design. Quantified improvements in ordering speed, accessibility outcomes, or customer satisfaction have not been established in the supplied project information.

Why This Project Matters

DUO BREW demonstrates that frontend development can do more than improve a website's appearance. It can help address real barriers that people experience when interacting with businesses.

The project combines interactive web development, QR code generation, and accessibility-oriented design to rethink a familiar activity: ordering coffee.

It also demonstrates the value of matching the technical solution to the actual business need. A lightweight, backend-free application can be an appropriate starting point when the primary goal is to communicate an in-store order rather than build a complete e-commerce platform.

The objective: make everyday coffee ordering more inclusive by giving customers a practical way to express their choices and interact with the business more independently.