Ready
Recording
Processing
Order ready
You speak.
It becomes an order.
Two crates of organic apples, three sacks of red onions, and twelve bottles of rapeseed oil…
Organic apples2 × crate
Red onions3 × sack
Rapeseed oil 1 L12 × bottle
Scroll ↓

via OPTEN AG · Sep 2025 — Feb 2026

Voice Ordering App.

Client
via OPTEN AG
Role
Frontend engineering
Stack
React Native · Expo SDK 53
Timeline
Sep 2025 — Feb 2026

A voice-first wholesale ordering app: buyers speak an order and it becomes matched catalog line items. Six months of UI work — drawer navigation, multi-step checkout with animated states, a 60fps voice recorder with upload queue and retry logic, DE/EN internationalisation.

Why voice

A wholesale buyer walks the warehouse and orders dozens of line items — each with a unit, a quantity and a variant. Typing that into a phone, one field at a time, is the slowest possible interface for the job. Speaking it is the fastest: the app’s entire premise is that the buyer talks the way they already talk to a sales rep, and the software does the transcription and matching work.

From speech to line items

The pipeline is four steps, and the design problem is that the buyer must trust all four. My job on the frontend was to keep every stage visible and correctable: what was heard, what was matched, what quantity was inferred. Nothing is auto-submitted — the final step is always an editable order the buyer confirms.

Drag the diagram sideways to read it

The pipeline the interface has to make legible — and correctable — at every step

The recorder had to disappear

A voice recorder that stutters destroys confidence in the whole product, so the capture UI runs its waveform and timer at 60fps, driven by native animation rather than React state. Around it sits the unglamorous work: microphone permission flows on both platforms, an upload queue that survives the app going to background, and retry logic for the weak signal you get inside a warehouse. A failed upload never loses a recording.

The shipped control, redrawn — ready, recording, paused, processing, at the app’s real timings

Checkout in steps

The order flow is multi-step by design — review the matched items, adjust quantities, pick delivery, confirm — with animated transitions that keep the buyer oriented about where they are and what is still ahead. Navigation is a drawer, so the catalog, the current order and past orders stay one gesture apart. Every screen holds up with a long product name and a missing image, because the real catalog has plenty of both.

Cart with editable quantities
Cart with editable quantities
Product detail — size, variant, and a tasting note the buyer can play back
Product detail — size, variant, and a tasting note the buyer can play back

One codebase, three platforms

React Native with Expo, delivering iOS, Android and web from a single codebase with the same design language on all three. Full DE/EN internationalisation, since the buyers and the sales organisation don’t share a language. Six months from empty repository to a working app in the client’s hands.

Full working app on iOS, Android and web from a single codebase, same design language on all three.

Alexander built the mobile experience for an AI-powered B2B voice-ordering app end to end — voice capture, permissions, the order list and detail views — and turned a complex spec into a clean, working app.
Noël BossartCEO & Co-Founder · Noevu GmbH — QA & technical oversight