Early in our work at Speechify, a brand audit revealed that the product was using more than 270 colours. It made the problem unusually tangible. This was not simply an unruly palette; it was the visible result of a team making hundreds of small design decisions without a sufficiently shared way to judge them.
When I joined Speechify in spring 2021, the product had just reached the top of the App Store’s Magazines & Newspapers category. Millions of people were using it to read faster, listen while doing something else, or improve their comprehension. The product had momentum, but its visual language had not kept up.
Together with the Head of Design, I began working on the brand before moving towards a broader design system. I initially saw the challenge as one of visual coherence. What became more interesting was how the work could help designers and developers decide what belonged in the product without having to renegotiate its identity each time.
Understanding What Was Already There
We started with a questionnaire for senior stakeholders. It covered Speechify’s value proposition, personality, and visual identity: why the company existed, how the brand might behave as a person, and which colours and type styles felt appropriate.
We then mapped the main brand touchpoints and looked for inconsistencies in colour, typography, spacing, voice, and interface elements. The 270 colours were the most memorable finding, but they were part of a wider pattern. Benchmarking showed that Speechify was not alone in accumulating this kind of inconsistency, although that did not make the work any less necessary.
The audit made one thing clear. Choosing a more attractive palette would not be enough, because the palette was an outcome rather than the underlying problem. We needed a clearer set of constraints that could guide future decisions.
Exploring Without a Compass
With the audit complete, we went straight into moodboarding. In retrospect, I think we did this too early. The boards became enormous, full of directions that were individually interesting but difficult to evaluate against one another.
What we lacked were specific, opinionated design principles. Good principles give a team a practical test: does this direction feel right for the product, and can we explain why? Without them, we were often responding to the quality of the references rather than their relevance to Speechify.
The divergent work was not wasted. It helped us discover what Speechify was not, and some of the principles we developed later emerged from this exploration. But it taught me that visual exploration becomes much more productive when a team has already agreed on the criteria it will use to make choices.
One useful question was what Speechify might look like if it were not a digital product. Text-to-speech could be difficult to explain visually, so we explored whether a physical metaphor might make the experience more intuitive.
Some directions used tactile, neumorphic references. Others explored the intersection of sound waves, words, and letterforms. The latter eventually led to a simpler wave motif after the more experimental, morphing forms felt too far removed from the brand.
We also developed a bright photographic direction built around the effect Speechify was having on people’s lives. Internally, we called it “Miami.” In parallel, I experimented with gradients and GPU shader tools, including backgrounds that could respond gently to context. An error state, for example, might become subtly redder instead of introducing an entirely separate visual treatment.
Typography settled more quickly. After trying dozens of typefaces, we selected Recoleta and ABC Diatype: a distinctive serif paired with a practical sans-serif. I was also interested in variable fonts and how they might respond to user actions without turning the interface into a demonstration of the technology.
These explorations were useful because they gave the brand a range. They also reinforced the need for restraint. A visual language becomes valuable when it helps a team reject good-looking ideas that do not belong, not only when it produces new ones.
Letting the Product Explain Itself
The landing page had to do more than introduce a new visual direction. It also had to make Speechify understandable. We believed the voices were the most compelling part of the product, so we wanted visitors to experience them as directly as possible.
We considered making the website itself listenable, but set the idea aside because it was not a common use case. Instead, we explored an interactive player presented inside a 3D laptop or iPad. An early prototype used tilt.js to create the illusion and test whether the interaction could distinguish Speechify from more familiar landing-page patterns.
This was deliberately a “looks-like” experiment rather than a commitment to the final implementation. Its purpose was to make the product idea tangible enough to evaluate. The first version we shipped eventually took a flatter, two-dimensional form.
Once the designs were roughly agreed and about 80% complete, I built the remaining 20% in code. That final part mattered because coherence is relatively easy to curate inside a design file. A visual language becomes real when it survives repetition, responsive behaviour, edge cases, and all the small compromises involved in implementation.
Knowing What Not to Ship
We also explored a new logo with Sam Dallyn. The constraints were practical as well as aesthetic. It needed to remain recognisable at very small sizes, including inside a Chrome extension icon, and work across square, circular, and other contexts.
Early wave-based concepts changed too much when moved from a square into a circle. After further iterations, we found a bolder and simpler candidate that could be drawn by hand, worked across sizes, and could be dismantled into a broader family of visual elements.
We ultimately postponed its rollout. I think that was the right outcome. A promising design does not need to ship simply because the team has invested time in it, and a visual system should be able to improve without forcing every possible expression into the product at once.
A Language That Could Keep Changing
Over time, the team began to downplay the wave and move towards a cleaner expression of the system. That evolution appeared in later Careers and Blog designs. It showed that a visual language needs enough consistency to create coherence, but also enough flexibility to improve as the team learns.
We documented the work in a style guide covering colours, typefaces, and what we called brand values. As I moved on to building Speechify’s design system, I realised that those brand values were really an early version of design principles. They described not only what the product should look like, but how designers and developers could make decisions together.
The 270 colours had looked like a visual problem. In practice, they were evidence of many reasonable decisions made without enough shared context. The most useful outcome of the work was not a wave, a gradient, or even a new set of typefaces. It was giving the team enough shared judgement to recognise what belonged together.