< Home 

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.

Brand research

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.

Explorations

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.

New Designs

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.

 Nazare
 The Race of Gentlemen
 Environment
 U-Hauling Ass
 California



Various:

 Instagram
 Soundcloud
 LinkedIn
 Resume (CV)



Contact:

 Send me a message