- UI/UX
- Development
Speakly AI
Speakly is an AI-powered transcription platform built around a single compelling proposition: that your thoughts shouldn't have to wait for your hands. The product uses AI to transcribe, decode, and organize spoken content in real time, sitting at the intersection of productivity technology and cognitive augmentation in a market that is moving fast and crowded with competitors. When Speakly came to Scale Studios, they had a product that was technically impressive and a brand that needed to match it. The existing presence wasn't communicating the ambition of what they'd built: it looked like a utility, not a vision. The brief was to design and build a web experience that positioned Speakly as a category leader rather than another transcription tool: something that felt like the future of how people capture and communicate thought.
- Client
- Speakly AI
- Year
- 2025
A Visual Language Built for the Subject Matter
The design direction came directly from what Speakly does. Decoding thought in real time is not a neutral, functional act: it's intimate, fast, and a little extraordinary. The visual language needed to reflect that. Deep purple and near-black form the base, with dramatic portrait photography (a woman's face in sharp focus against a dark background, lit with the quality of a film still) used as the hero. The effect is immediate: this is not productivity software. This is something closer to neuroscience, or art, or both.
"Decode Your Thoughts in Real Time" is set at a scale that commands the screen. The headline is the design; everything else is built around giving it the space and contrast it needs to land. The layout was deliberately kept spare in the hero, because Speakly's claim is strong enough to carry the moment without support.
Translating the Product Into the Page
The challenge below the hero was to move from visceral impact to clear understanding: communicating what Speakly actually does without letting the functional explanation undermine the emotional register established by the hero. We structured the information architecture around progression: feeling first, understanding second, proof third.
Speakly's AI capabilities are introduced through demonstration rather than description, where possible, showing what the transcription looks like in context, how it handles real speech, and what the interface feels like in use. The page never becomes a spec sheet; it stays in the register of the hero while delivering the information a potential user needs to commit.
The Build
The Speakly build required careful attention to performance despite its visual ambition. Dark, image-heavy designs with motion elements are a common source of performance problems: heavy assets, render-blocking scripts, and layout shift caused by late-loading fonts can all undermine the experience the design is trying to create.
Asset delivery was optimized throughout, with the hero image and critical fonts prioritized in the loading sequence. Motion was implemented with reduced-motion preferences respected, ensuring the experience holds for users who need it.
The result is a site that loads with the speed the brand name demands and performs at the level the product promises.
