A Double Diamond case study on designing Voicefront, a voice-to-website app built around one moment: a shop owner talking about their business the way they'd already describe it to a customer — and getting a real, editable storefront back before that conversation would've ended.
Try the flow yourself ↓Publishing a basic storefront: a mainstream drag-and-drop builder vs. describing the shop out loud
She'd tried a free builder twice before. Both times she stopped at "choose a template" — not because the templates were ugly, but because she didn't know which one a tailoring shop was supposed to look like.
Voicefront is a mobile app that turns a spoken description of a small retail business into a live, editable website. An owner opens the app, taps record, and talks for a couple of minutes the way they'd describe their shop to a new customer — what they sell, when they're open, how to reach them. Voicefront transcribes it, extracts the structure a storefront actually needs, and hands back a real page to review, correct out loud, and publish.
It's not that shop owners don't want a web presence — most already have some fragment of one, usually a WhatsApp Business number or an Instagram grid nobody's updated in months. What they don't have is a website, and the reason isn't cost or access to a phone. It's that every mainstream builder — Wix, Squarespace, even Canva's simplified site tool — still assumes you arrive already knowing what a "template," a "section," and "content hierarchy" mean, and asks you to make a dozen structural decisions before you're allowed to type a single sentence about your own shop.
Design an onboarding where describing the business, in the owner's own words, is the entire input — and a real, correct, editable storefront is the entire output. No template gallery to choose from first. No blank content blocks waiting to be filled in.
This had two different open questions stacked on top of each other: first, why shop owners who happily use WhatsApp and Instagram every day still don't have a website (a discovery problem), and only once that was answered, what an AI would need to correctly infer from an unscripted, unstructured voice note (a design and trust problem). Double Diamond's two explicit diverge‑then‑converge cycles kept those apart instead of jumping straight from "they need a website" to "here's a website builder."
This was a solo project end to end — no separate research team to hand off to, no PM to arbitrate scope. Every trade-off documented below (what got cut, what got kept, what got argued with a shopkeeper) is one I made myself, moving between roles as the work needed:
That's a scope statement, not a boast — a real team changes this. The speech-model choice and the multilingual coverage below are exactly the kind of calls I'd bring in an ML engineer and native-language reviewers for rather than resolve alone; I've flagged those seams throughout instead of pretending they aren't there.
of surveyed small retail shop owners in the target market have no website of any kind
average number of structural decisions a mainstream builder asks before you can publish a first draft
average time from first word spoken to a published Voicefront draft, across usability sessions
Fig. 1 — The double diamond, mapped to this project
Question why an already-online shop owner still has no website, without assuming the fix yet.
Narrow to one insight and one problem statement worth solving.
Sketch multiple, genuinely different ways to turn speech into a structured storefront.
Build, test, and refine the direction the evidence actually supported.
Four phases of research and iteration follow below before this screen gets earned, line by line. If you'd rather see the full flow first and backfill the reasoning after, it's waiting in Deliver.
Jump to the full walkthrough ↓Before designing anything, the goal was to understand the problem as widely as possible — market context, secondary research, and shop owners' own words — without narrowing to a fix too early.
Website builders already exist in abundance — the question was why none of them were landing with this exact audience. Six tools (and one very common workaround) were audited against a first-time, non-technical small retailer.
| Product | What it does | Where it falls short for this audience |
|---|---|---|
| Wix | Powerful drag-and-drop editor, huge template library. | The template gallery is itself the first blocker — owners don't know which of 500 templates matches "tailoring shop." |
| Squarespace | Polished, design-forward templates. | Assumes comfort with content blocks, image cropping, and a desktop-first editing flow most target users never open. |
| Shopify | Full e-commerce, built for scale. | Vastly more than most of these shops need — catalog structuring and checkout setup before a single page is live. |
| Canva Websites | Simplified, one-page sites from a design tool people already use. | Still a blank canvas — you have to already know what a website's sections are supposed to say. |
| Google Business Profile | Free, fast, shows up directly in Search and Maps. | Not a real site — no product showcase, no story, and easy to mistake for "done" when it isn't. |
| WhatsApp Business | Already installed, already used daily for orders. | Great for messaging, useless for a first impression — nothing to send a new customer before they've asked a question. |
| Asking a relative | What most owners actually do today. | Depends entirely on that person's time and patience — and locks the owner out of ever updating it alone. |
Every tool audited puts a structuring task — choose a template, pick a layout, write section copy — between the owner and their first published page. None of them accept the one thing every shop owner can already do instantly and without help: describe their own shop out loud.
180-shop survey, small retail & service businesses.
A 180-shop survey and 15 moderated interviews (tailoring, home bakeries, mobile-repair, salons, and a hardware store) ran in parallel with the secondary research.
"I can tell any customer what I sell in thirty seconds. Why is a website asking me to 'choose a layout' first?"
"My nephew built me one two years ago. He moved cities. I haven't been able to change my own hours since."
"I post on Instagram every day. If that counted as building a website, I'd have had one for years."
Discovery surfaced a lot — confidence, trust, cost assumptions, and inherited sites nobody can edit. Define was about resisting the urge to solve all of it at once.
Shop owners weren't failing to communicate about their business — they do it fluently, every day, out loud, to customers. What broke them was being asked to translate that fluency into a structured written format they'd never been taught: a template, a section, a layout. The website step didn't need a simpler builder. It needed to accept the input owners already had.
So the first thing an owner does is talk, not choose a template they don't yet trust themselves to pick correctly.
The AI will get things wrong sometimes — fixing that has to be as low-friction as the original recording, not a separate skill to learn.
So Manoj can update his hours from the counter, one-handed, without breaking focus on the shop itself.
Three rules, pulled straight from the HMWs above, that every decision from here on had to answer to.
Nothing in the core flow should require typing, template selection, or layout decisions before a first draft exists.
The AI drafts. It never guesses its way onto a live page — every field the owner can see, correct, and approve before anything goes public.
If a change takes longer than the gap between two customers, it's too slow for how this audience actually works.
A first-time user can record, review, and publish without anyone walking them through it.
Owners feel comfortable publishing the AI's draft with light edits, not a full rewrite.
A hours or stock update has to be quick enough that it becomes a habit, not a chore that gets skipped.
The insight was narrow. The solution space still wasn't — three structurally different ways to act on it were sketched and concept-tested with 6 shop owners before committing engineering time to any of them.
A step-by-step questionnaire ("What's your business category? Pick a color theme...") that still ends in a template.
A back-and-forth text chat asking one structured question at a time: "What's your shop name?" then "What do you sell?"
A single open recording, the way an owner would naturally describe their shop, parsed into structure afterward.
A concept project skips real funding rounds and infra partnerships — it doesn't skip the constraints they'd create. These shaped decisions throughout, not just at the end.
No transcription-and-extraction model is perfect, especially across accents and mixed-language speech. That's why nothing on the draft is presented as final — every field carries a "Detected" or "Needs your input" chip, and nothing publishes without a visible owner confirmation.
6% of surveyed owners said they wouldn't want to be recorded at all. Typing is a first-class alternative at every single step, not a fallback buried in settings, and raw audio is discarded once transcription completes.
Freemium: a published storefront on a free Voicefront subdomain is never paywalled — that's the whole point. A paid tier covers a custom domain, WhatsApp-catalog sync, and basic order forms. That distinction shaped the design, not just the business plan: publishing the first draft can never be the moment a payment wall shows up.
The chosen direction went through three rounds of hi-fi design and usability testing before this was considered ready to hand to engineering.
01 — One open recording, live captions confirm it's being heard correctly.
02 — Every field is editable, and anything undetected asks rather than guesses.
03 — The generated draft, previewed exactly as a visiting customer would see it.
04 — Voice corrections show the exact change before it's applied — nothing updates silently.
05 — Publish hands back a real, shareable link and QR code — no waiting for review.
06 — Edge case: missing details are flagged as optional, never blocked as errors.
Falls back to on-device dictation when offline, so a recording can start even on a weak shop-floor connection; respects Dynamic Type up to the largest accessibility size before truncating field labels.
Requests microphone permission with a plain-language rationale screen before the first recording, not a bare system dialog; supports on-device speech recognition for low-connectivity regions.
A simplified click-through of the same flow. Record, review the draft, and publish.
↑ Click through it
Describe the shop out loud, unscripted — no template or category to pick first.
See every detected field, plainly labeled, and correct anything before it goes further.
Get back a real, shareable storefront — live in minutes, not days.
8 participants (5 first-time smartphone-only internet users, 3 comfortable with apps but who'd never attempted a website builder), across tailoring, home-bakery, and mobile-repair shops. Tasks: record a description of the shop, review and correct the AI's draft, and publish.
Asked to just "describe your shop," several testers gave a two-sentence answer and stopped, assuming that was enough for an AI to work with.
Added a short spoken prompt sequence during recording — "What do you sell? What time are you open? How should customers reach you?" — answered conversationally, one at a time.The few seconds it took to transcribe and structure the recording felt like the app had frozen or lost the audio.
Added a visible waveform-to-checklist animation, showing which fields were being filled in as processing happened.Testers worried a spoken fix might get misheard too, compounding the original mistake.
Every voice correction now shows the exact before-and-after as an editable chip before it's applied — nothing updates from voice alone without a visible confirm tap.Thumb reach, one-handed shop-counter use
Record and Publish stay in the easy-reach band; review fields scroll into view rather than requiring a stretch across the screen.
Color
Brand deep
#4A2AC0
Brand
#6F42F5
Accent
#FF8A3D
Detected
#0CA35C
Needs input
#C77E00
Missing
#D03B3B
Field-confidence tokens
Elevation
Type scale
| Style | Family / weight | Size / line |
|---|---|---|
| Display | Newsreader, italic 500 | 32–74px / 1.0 |
| H2 / H3 | Newsreader, 560 | 20–40px / 1.2 |
| Body | Inter, 400 | 14–18px / 1.65 |
| Label | IBM Plex Mono, 600–700 | 10–12px / 1.3 |
| Transcript / mono | IBM Plex Mono, 500 | 10–15px / 1.4 |
"...open Monday to Saturday, ten to eight..."
Icons
Validated through iterative usability testing ahead of a planned engineering handoff.
Voice input wasn't valuable because it was novel — it was valuable because it asked owners to do something they were already fluent in, instead of something they'd never been taught. The moments that failed weren't about speech recognition accuracy; they were about owners not trusting an AI-authored draft until they could see exactly what it heard, and undo any part of it just as easily as they gave it.
Next steps include native support for recording in regional languages beyond English and Hindi, syncing a WhatsApp catalog directly into the product grid instead of re-describing it, and testing a "walk me around the shop" mode where photos taken during the recording get matched to the products mentioned automatically.