New design language
Creating a new visual language at Speechify - the world’s leading text-to-speech app
Every day millions of people use Speechify to help them read faster, read while multitasking, or read to improve comprehension. The app is particularly popular among students, knowledge workers and people in the neurodiverse community. When I joined in spring 2021 the app has just climbed to the number 1 spot in the Apple app store (in the magazines and newspapers section). Yet until then, the company had never addressed or standardized its branding which reflected in inconsistent user experiences and coordination problems between designers and developers. Together with the head of design, we started off with revisiting the brand, after which we moved on to build a new Design System for the company.
The first step was to conduct the brand research and to understand the competitive landscape. To do that, I sent out a brand questionnaire to the project stakeholders (senior management) asking them a range of questions about our value proposition (e.g. why does our brand exist), brand personality (e.g. how would you describe the brand if it were a person) and brand identity (e.g. what color tones and typeface styles do you feel resonate with the brand the most).
A brand audit allowed us to better understand the main brand interaction points, while highlighting inconsistencies in visual language (colors, typefaces and spacing), voice and UI elements. Although we found a lot of issues (like 270+ colors we were using), benchmarking our designs against competitors and other companies in our space brought in some positive news - it seemed like it was a widespread problem.
With the new understanding of the initial constraints, hopes and management’s aspirations, we jumped straight into moodboarding, trying to find what could work. Reflecting back, it was a mistake. Very quickly I was looking at extremely large Figma boards, with no understanding in which direction to move. Later I would learn about the value of design principles, which are specific, opinionated and evaluative statements which can be used to understand whether something looks ‘on brand’ or not. Having them would have given us a lens through which to filter the various design directions in front of us, and hopefully - saved us lots of time. However, an argument can also be made that many of the design principles that we later defined came from us going through this super-divergent phase and seeing what we are not.
Eventually, we started to narrow down on a few specific visual directions. One of the most interesting ones came out from a question ‘what could Speechify look like if it were not a digital product?’. Explaining what Speechify did and how it worked has always been problematic, so trying to answer this question through a visual metaphor felt exciting. Apple has just released the new OS version, featuring beautiful neumorphic iconsets which - as designers - we felt were irresistable.
The other direction we explored was around the conceptual intersection of soundwaves, words and letterforms. We’ve been fascinated with the visual patterns that various audio frequencies created on sand. A lot of that direction with it’s morphed letter forms felt a bit too experimental for our brand, so we eventually narrowed down on it’s more simplistic form - a wave.
This was also the time when we experimented a lot with various color palettes and gradients.
Another direction that we considered was about building on top of the impact that Speechify was making on people’s lives. We had so many 5-star reviews on the App Store and Chrome Extension Store, so we asked ourselves - how might we celebrate our users in our brand? This direction was using a lot of staged photography and bright colors. Internally we called it ‘Miami’.
Experimenting with colors and waves, we couldn’t help but play a bit with gradients. Around that time, I was exploring various GPU shader editors like KodeLife and knew how to create complex gradient meshes with code (example past project /desktop only), so I personally felt very excited about this direction as well. The idea was to use a morphing background gradient to give life to designs. The color could change depending on the context - get an error message and it subtly turns redder.
While colors and additional brand elements (e.g. waves) were still far from certain, I felt fairly confident about our typography directions. We needed a beautiful working horse sans-serif, as well as a boutique serif that would play nicely with it. Ideally, I also wanted them to be variable fonts to be able to animate them with user actions (example past project / desktop only). Eventually, after trying out dozens of typefaces, we landed on Recoleta and ABC Diatype. In parallel we were also working on the copy draft and messaging with the copywriting team.
Aside from the visual aspect, a big challenge for the new landing page was to communicate how the product actually worked. Since we uniformly believed that the most magical moment of our app were the voices themselves, we wanted to bring that experience directly to the user. After putting aside the initial thoughts of making our website listeanable (which was not a popular Speechify usecase), we narrowed down on an idea of creating an interactive player inside a 3D laptop or iPad. You can see the mockup below, and play with the player here (a rough “looks-like” prototype I created using tilt.js). I was hoping that this kind of experience would set Speechify apart from the established pattern of landing pages out there. Later we decided to implement a flatter 2D model first.
Once the designs were roughly agreed on internally and were about 80% finished, I proceeded to create the remaining 20% in code. You can explore the final version here (hopefully you’ll see the newer version of the A/B test we might still be running on it).
Below you can see a few more examples of the new brand next to corresponding screens with old branding.
Although the current logo (below) has worked for Speechify for a few years, we also wanted to explore how we could refresh it.
For that we partnered with an old friend - Sam Dallyn to explore some new directions. After defining together a few key criteria, Sam came up with a few additional constraints - such as that filled logos worked better on some of the smallest sizes (such as the Chrome extension icon).
After some time, Sam got back to us with a few concepts representing his take on the wave metaphor.
Unfortunately, this direction was not working for us, as it felt that the shape was too much reliant on its context to come across properly. You can see above how differently it looks in a circle and a square. So we asked Sam for a few more ideas which also didn’t work at first.
But then - after a few more iterations, we had a solid candidate that fit our criteria.
This direction felt very bold and simple enough to be drawn by hand. It also worked in a range of environments in various sizes.
And by dismantling its parts we could come up with a whole new set of visual elements.
In the end, a decision was made to postpone with the roll-out of the new logo.
Over time, the team started to felt like it was more natural for us to downplay the wave element that was such a big part of the new landing page, instead favoring a more cleaner look. You can see this newer aesthetic coming across in my later Blog and Careers page designs.
The new brand decisions were documented in a styleguide, together with detailed information about the new colors, typefaces and what we called ‘brand values’.
As I work on the second part of this project - setting up the Speechify Design System to create a shared design language between designers and developers - I realize that the “brand values” were a version of our design principles. A lot more work is still to be done.
BrickBlock / ScalingFunds
McKinsey & Company
McKinsey & Company
McKinsey & Company
McKinsey & Company
McKinsey & Company
Designing a content-driven eCommerce experience to help women find their perfectly-fitting bra online.
The Race of Gentlemen