interact: https://claude.ai/artifact/4738T2SFVu7Pmbqx1kx41x#artboard-2807d3a93c5a

Takes is a voice recording app I designed and prototyped end to end, then started building natively in SwiftUI. Most voice memo apps look like settings screens. Takes strips everything back to one typeface, three themes and a single accent: a red light that only appears when you're live.

Slide the "new take" bar up and it grows into the recording screen

Eleven voice bars sit flat until you speak, then move with your voice

Playback highlights each word of the transcript as it's spoken

Works in 8 languages, including Arabic right-to-left, Chinese, Korean, Thai and Yoruba

Cream, light and dark themes, swipe actions, typed screen titles

Deliverables: interactive prototype, design system, flow videos, portfolio stills and a native iOS build.

• Role: Product designer: concept, UX, UI, interaction, prototype, iOS build direction

• Timeline: October to November 2026

• Platform: iOS (iPhone)

• Tools: Figma, Claude Design, SwiftUI

• Skills: Product design, mobile UI, interaction design, design systems, prototyping, localisation, typography

Takes is a voice recorder where the recording is the hero and everything else gets out of the way. I took it from a Figma lo-fi to a working prototype, a design system and the start of a native iOS app in about a month.

Voice memo apps record well but feel like settings screens: rows of icons, waveform rainbows and menus before you've said a word. Recording an idea should feel like picking up a tape recorder, pressing one thing and talking.

I set myself four goals:

One gesture to start. No menus between opening the app and recording.

Type and colour only. No characters, no skeuomorphic objects, no decorative icons.

Find it again. A take is only useful if you can find it and read it later, so search and transcripts matter as much as the record button.

Work for everyone I record with. Eight languages from day one, including right-to-left Arabic.

Three rules decided every screen:

The recording is the hero. Each screen splits into content above and a dark panel below, and the panel is where the voice lives.

Red means live. The only accent colour appears only while a take is recording.

Big type does the talking. One condensed typeface, set large and lowercase, replaces icons and labels. I started much louder: bold colour bands that changed with the time of day, and a numbered Swiss-grid archive. The colour fought the recordings for attention, so I shelved it and kept the grid's numbering and hierarchy. I also shelved a flipping-book transcript animation, because it was charming once and slow every time after. I then designed every flow in three modes to test the system: home, search, swipe actions, recording from idle to live, playback with the transcript open and collapsed, the more menu, and every settings dropdown.

Cream became the default. It is warmer than white and reads like paper, and the dark panel against it gives every screen the same paper-over-ink split.

The whole app runs on one typeface, nine colour tokens per theme and a handful of square components.

Takes works in English (UK and US), Arabic, Chinese (Traditional), German, Korean, Thai and Yoruba, or follows the phone's language.

Arabic mirrors right-to-left. Headers, rows, settings and menus flip. Timers, swipe actions and the voice bars keep their direction because they describe time, not reading order.

Longer words, same grid. German and Yoruba run longer than English, so the typed titles shrink to fit and dropdowns and menus widen to their longest option.

Scripts Big Shoulders doesn't draw fall back to Noto Sans, so Arabic, Chinese, Korean and Thai keep a clean sans voice.

Dates and transcripts follow the language. Dates are written the local way, and live transcription listens in the chosen language.

Language names in the picker always appear in their own script, so anyone can find theirs whatever the app is set to.

The prototype was built in Claude Design as a working app, not linked frames: real gestures, real timing and a real microphone in the browser. That made it the spec for the SwiftUI build, which is now underway. • Recording: Microphone with live levels, pause and resume, countdown, stop after silence, four quality settings from 0.25 to 5 MB a minute

• Transcripts: Apple's speech recognition, on the phone where supported, with each word's timing so playback highlights exactly what's being said

• Saving: Takes, names and favourites are kept on the phone; duplicates share one audio file

• Languages: All eight, with Arabic right-to-left and local date formats

• Privacy: Optional Face ID lock when the app goes to the background

Takes went from a lo-fi Figma homepage to a working prototype, a documented design system and a native app in progress in about a month.

Restraint was the hardest call. Cutting the colour bands and the book animation made the app quieter and stronger. The red light only works because nothing else competes with it.

A working prototype beats annotated frames. Gesture timing, panel physics and the read-along were only settled once I could hold them, and the prototype became the iOS spec.

Designing for eight languages early paid off. Building the grid to stretch for German, Yoruba and Arabic from the start was far cheaper than retrofitting it.