← All work
UX Case Study

Making a coffee machine work around the user, not the other way around.

Intro

The office coffee machine worked through a QR code and a physical button. You scan, pay for a drink, select what you want, place the cup, and the machine prepares it.

The basic flow worked, but there were a few frustrating gaps in the experience. I explored how the whole interaction could be moved to a simple web app that the user could control from their own phone.

Status
2026
Problem

Paying more than the drink costs shouldn't become a support ticket.

The machine accepts payments, but there was no simple way to handle an accidental overpayment.

For example, if a ₹12 drink was selected but ₹120 was paid, the machine would still give only one drink, with no refund option in the flow. The alternative was to contact customer support by email and wait for the money to be refunded.

There was also another small but important problem — everyone had to interact with the same physical button on the machine.

In a shared office environment, that isn't exactly the nicest interaction.

Solution

What if the whole interaction happened on your phone?

Instead of making the physical machine the main interface, I explored a simple web app that could be opened by scanning a QR code.

The machine would still do the actual brewing, but the user could control the experience from their own phone.

Result

A simpler and more personal way to use the machine.

The concept turns the coffee machine from something users have to operate into something they can control from their own phone.

It also creates room for better payment handling, multiple drinks in one order, clearer feedback, and a more hygienic interaction by removing the need to share the physical controls.

Scan. Order. Pay. Place your cup. Brew.

Gallery
Process
  1. 01

    Understanding the existing flow

    I started by looking at how the current machine worked: Scan → Pay → Select drink → Place cup → Brew The payment and drink selection worked, but the experience was tied closely to the physical machine and didn't handle situations like overpayment very well.

    Understanding the existing flow
  2. 02

    Moving the interaction to the phone

    The idea was to move the controls users actually interact with onto their own device. The QR code becomes the starting point: Scan QR → Open web app → Choose drink → Pay → Place cup → Brew No app download. No account. Just scan and use.

    Moving the interaction to the phone
  3. 03

    Designing the drink selection

    I kept the menu intentionally simple. Users can see the available drinks, their prices, and select the quantity they want before paying. This also opens up a much better way of handling multiple drinks in a single transaction.

    Designing the drink selection
  4. 04

    Making payment clearer

    The payment screen clearly shows what the user is paying for before they confirm. The idea was to make the transaction feel more like a normal online purchase instead of simply putting money into a machine and hoping everything goes right.

    Making payment clearer
  5. 05

    Giving the user control

    After payment, the user is guided through the physical part of the process. Place your cup → Start brewing → Wait → Enjoy The Brew action happens from the user's own phone, so there's no need to touch the shared machine button.

    Giving the user control
  6. 06

    Designing for the physical interaction

    This was an important part of the project. The UI isn't just showing screens — it is guiding the user through actions happening in the real world. That's why the screens clearly communicate things like: “Place your cup” “Brewing your tea” “Ready — enjoy!” The digital interface and the physical machine work together as one experience.

// CONTACT

[email protected] LinkedInHmu on Insta
© 2026 Nihal Mohammed Last updated October 2026