COFE + Robot App

UIUX
Product Design
AI Workflow
A COFE+ Robot Cafe kiosk next to a hand holding a phone with the COFE+ app home screen.

How do you make a robot feel less like a machine and more like your regular barista?

COFE+ explores how a coffee robot can be fast and reliable, and still feel personal. We designed a mobile ordering flow for people short on time.

Two years later I came back to it. I audited our final screens as if they were someone else’s. I checked them against WCAG 2.2 AA and redesigned the moments that broke. I worked with AI as a partner and kept every decision.

My Role

UI/UX Designer

Timeline

0 - 1: Mar 2024 - Jul 2024

Audit: Oct 2026 - Nov 2026

Industry

Robotics & Automation, Food & Beverage

Robotics & Automation, Food & Beverage

outcome

25%

25%

Faster Checkout Time

23%

23%

Higher Order Completion Rate

2024 · company test report

1.47 → 19.6

1.47 → 19.6

Pick-up code contrast

674 / 674

674 / 674

Text layers pass WCAG AA

2026 · audit and redesign

PART 01 · 2024 · Building from zero

Problem

Time-sensitive users struggled to get speed without losing a sense of being cared for.

Robot kiosks are fast, but ordering still felt complex. In our interviews, friction showed up whenever the app asked for a decision people had no time to make. Every extra step was speed lost to complexity.

Robot kiosks are fast, but ordering still felt complex. In our interviews, friction showed up whenever the app asked for a decision people had no time to make. Every extra step was speed lost to complexity.

Competitor map of coffee apps by rating, next to review themes. Pros include time saver and no line. Cons include hard to onboard, ordering at the wrong location and endless options.
User journey from needing caffeine to pickup. Mood drops to slightly annoyed while exploring the menu, then rises through checkout and pickup to energized.

Market RESEARCH

Every product optimizes speed. Few earn trust.

I compared leading coffee brands across apps, kiosks and stores. Three patterns came up. Fast ordering for commuters, deep customization for coffee lovers, and loyalty loops for regulars. Robot systems had one gap in common but they gave no emotional feedback.

I compared leading coffee brands across apps, kiosks and stores. Three patterns came up. Fast ordering for commuters, deep customization for coffee lovers, and loyalty loops for regulars. Robot systems had one gap in common but they gave no emotional feedback.

Competitor analysis of Peet's Coffee, Artly, Dunkin' and Philz Coffee by target user, touchpoints, ordering flow and UX highlights.

INsights

Speed builds trust. Complexity breaks it.

  1. Speed matters more than exploration, commuters prefer predictable ordering flows over deep customization.

  2. Decision fatigue slows down ordering, because too many options create unnecessary friction.

  3. Automation needs emotional feedback, and robot-driven service risks feeling cold without expressive interaction cues.

Design Opportunity: A system that makes fast decisions feel effortless, but also make user feel like being taken care of while experiencing robotic efficiency.

design

How can we make ordering fast, without making it feel like just a machine?

We designed two layers that work together. A simpler flow that removes decision fatigue, and a character that gives the robot a personality.

Feature 01

One Flow Interaction

One Flow Interaction

The ordering flow was simplified into three stages:

Explore → Customize → Confirm.

Each step shows only the options that matter. Checkout puts review, payment and pickup in one step.

  1. Browse Menu

  1. Browse Menu

2024 menu screen with a grid of drinks, next to the Mind Your Allergies sheet where people pick allergens to flag.
  1. Customize Drink

  1. Customize Drink

Four 2024 drink screens, each with a bottom sheet for size, espresso, milk or sugar level.
  1. Review & Confirm Order

  1. Review & Confirm Order

2024 Orders, Favorites, Cart and Order is placed screens, ending with the pick-up code and QR.

Feature 02

IP / Character Design

IP / Character Design

A fully automated flow can feel anonymous. So we designed a mascot as a team. It introduces itself and reacts at each step, adding warmth without adding steps.

2024 app screens where the round teal mascot greets people, holds the drink and reacts at each step.
The mascot's three order states, Preparing, Ready and Enjoy, next to the Order Completed screen and a COFE+ cup at the machine.

Results

It worked. The company measured it.

The company ran its own tests and shared the report with us in a meeting. Ordering took 3 steps. Checkout was 25% faster. The order completion rate was 23% higher. The project was later nominated for the UX Design Award and won MUSE Gold.

Reducing options was the harder design problem than adding them.

Most commuters ordered the same drink every time. The real work was deciding what to hide by default.

Predictive ordering is still unsolved.

One user said "I just want to tap once and have my coffee ready before I even stop walking." Our flow still asked people to reselect their usual drink every time.

A COFE+ Robot Cafe running inside a souvenir shop on a busy shopping street.

PART 02 · 2026 · Auditing

THE TURN

Award-winning screens can still fail at the machine.

Two years later I audited our final screens against the product's own promise. A robot should feel as easy as a barista. It broke at pickup, allergies, price, reorder and cancel.

Redesign

Same look. Fixed five broken moments

I kept our 2024 look, the mascot and the tracker. That was the strongest part of the work. Every fix below traces back to one finding.

Redesign 01

One code you can read

One code you can read

Before, the pick-up code and queue number share the same pale teal at 1.47 to 1. After, one black pick-up code at 19.6 to 1.

Redesign 02

Name the allergen

Name the allergen

Before, the drink screen shows only a Might cause allergy badge. After, it says Contains soy, from Soy milk, above the Add button.

Redesign 03

Prices that add up

Prices that add up

Before, the drink screen shows $4.29 with no price on any option. After, every option shows what it adds and the Add button shows $5.45.

Redesign 04

Order again, for real

Order again, for real

Before, Order Again leads back to the menu. After, Order again opens the last store already picked, on the way to a prefilled checkout.

Redesign 05

Cancel with the refund in sight

Cancel with the refund in sight

Before, the cancel dialog asks Sure to cancel this order with only Yes and No. After, it shows a $5.93 refund to Apple Pay, right away.

DESIGN SYSTEM

Teal is a surface, never text.

Our brand teal fails as text. So every colour became a role token with a measured contrast ratio, and type went from 11 sizes to 5.

Foundations board. 24 colour role tokens, each with its contrast ratio, and the Inter type scale from 44pt for the pick-up code down to captions.

AI Workflow

AI built and reviewed. I made the decisions.

I wrote a spec for each screen. AI built it in Figma with my design system and ran review passes. I decided what to change, then tested with people.

My AI workflow in five steps. I write the spec, AI builds in Figma, AI reviews, I decide, then I test with 3 people. What I learn goes into the next spec.

Where I went against the AI

  1. Kept our 2024 look. The layout was never the problem.

  2. Rebuilt the allergy path. I restructured the milk options myself.

  3. Fixed what the review found. My redesign had put the danger button where the thumb confirms.

Testing

3 people. 4 tasks. All completed.

One person had never ordered coffee through an app. All 3 users ordered, set an allergy list, picked up and canceled. Each one stated the price before paying.

"It seems great to have the allergy feature."

REFLECTION

Auditing my own work was harder than auditing someone else's.

It is easy to defend a decision you remember making. Measuring before and after made my claims defensible.

AI made me faster, and more careful about what I claim.

It built what I could describe. The judgment stayed with me.