Roam teaches language through short documentaries: real people telling real, unscripted stories in the places they live. Every series is anchored to the place it was filmed, so learning feels like moving through the country, not studying it. Every film comes in two cuts — the original, and a Learner version pitched to your level.
View in App Store ↗01 · Brand
From identity to expression: a horse, a wide-set serif wordmark, and a monochrome system drawn from a single near-black.
Mark
A minimal, monochromatic horse — a considered design object, not a mascot. Black on light, white on dark or over image; app icon at small sizes, hero scale on the site. During onboarding each user styles their own, and it travels with them through the app.
Colour
Pure white and one ink (#141414), with an off-white (#F2F1F0) for fills. Every grey is an opacity of ink on light, of white on dark; no gradients, no shadows — depth comes from tonal contrast and photography, never colour.
Type
SF Pro, set tight. Semibold display with tracking at −2% of size; uppercase micro-labels open up with positive tracking instead. Short declarative headers, four body sizes, nothing decorative.
Voice
Quiet confidence — the kind that doesn’t need to explain itself. Roam speaks its own vocabulary: Episodes and Series, Speakers rather than teachers, Days Roamed rather than streaks. The tagline never changes: “Learn a Language as it’s Lived.”
02 · Design
Every screen was designed in Figma — flows, components and a full design system across the whole app. The site at roamlang.com carries the same monochrome language at hero scale.
App
A complete app — onboarding, Home, Map, Vocab, player and settings — built around one idea: the Map. Every series lives on the map of France where it was filmed, so watching moves you across the country. Episodes play full-bleed with interactive captions; tap a word to save it, or switch between Learner and Native without leaving the episode.
Site
A single scrolling page at roamlang.com, built from the films themselves — the Learner and Native cuts, an interactive map of France, saved vocab — each section animating into view as you scroll.
03 · Build
I designed and built Roam’s three surfaces — the iOS app, the backend, and the custom CMS that feeds them — and shipped them to the App Store. Expo and React Native under one monochrome design system, Supabase behind everything, modern AI-assisted engineering throughout. My co-founder built the pipeline behind Roam’s signature: every episode in two synced variants, Learner and Native.
App
Expo · React Native · TypeScript. Three tabs — Home, Map, Vocab — with the Map at the centre: every series lives on the map of France, where it was filmed.
Backend
Supabase: Postgres, Auth, row-level security, edge functions. All user state lives server-side; video on Cloudflare Stream, subscriptions through RevenueCat.
CMS
A custom admin built in Next.js: ingestion, captions, publishing, the videographer pipeline. Nothing in the app is hardcoded — content flows from the CMS at runtime.
Release
EAS builds with over-the-air updates for same-day fixes; a hard paywall through RevenueCat; analytics in PostHog. Live on the App Store at v1.2.3.
04 · Film
I led production and post on Roam’s first films — shot on the ground in the South of France on iPhone 16 Pro in Log. Directing, editing and grading the mini-documentaries that anchor the app’s first wave of content.
05 · Marketing
More coming soon.
Live on the App Store · v1.2.3 · French first