There were 3 main pain points I wanted to address through a redesign.

1. Voice selection required 2-3 clicks, adding friction to one of the most fun and engaging aspects to a text-to-speech generation.

This came from a key insight that with a text-to-speech model, it was equally about selling a model as it was about selling a voice. The result of a model is precisely dependent on the voice. The worldview around models is in a way agnostic, customers don’t buy a model without a voice that works for them first.

Previously, we reserved the functionality of voice search and discovery to the Voice Library feature. However, user testing validated this insight: the text-to-speech playground feature is used to test the models, just as much as it is to test and discover voices.

Users changed out voices more often than they edited the transcript, as they were more likely to come to the playground already knowing what they wanted to transcribe. This was true amongst hobbyists, as well as companies with a use case transcript they were already testing and comparing against other model providers.

2. The history section scrolled infinitely, resulting in confusing moments where the text-to-speech module was not available on the page.

In addition to increasing cognitive load by requesting users to "switch" between either a text-to-speech or history view, this design also didn't consider how users used the history feature. Historical generations were often used to compare the same transcript with changes to voices or configurations, and then brought back into the text-to-speech generation space to re-generate with a new setting. The infinite scroll made it difficult to retain a "sense of place" between the history and active generation. How might different a different interface pattern improve the design of the history feature so that both the primary text-to-speech generation space and history was persistently accessible?

3. I received internal feedback that the configurations "felt like they were floating". The configurations inside a card didn't visually align with the rest of the platform. Additionally, the organization and grouping of configurations didn't align with intended hierarchy and the user journey of selecting/editing them.

I designed a new text-to-speech page addressing these pain points.

This approach was driven by a new visual hierarchy that aligned with the insight that voice selection was key to model adoption. Additionally, remaining configurations rarely customized. For example, even though the model selection was vital to the output, it was rarely switched to anything other than the most recent model.

This feature also hones a visual refresh, shipped alongside a larger design systems initiative.

This design was also successful in regrouping features in a modular way. For example, configurations now lived in a scalable panel, adaptable to any new configuration types our research team may introduce in the future.

The hierarchy also afforded a creative mobile adaptation, reflecting the user flow of voice selection and transcript being primary, with remaining configurations secondary.

You can’t separate a text-to-speech model from its voices. The voice library helps you quickly find the voice you need through a seamless filtering and sorting experience.

Initially, the ask was for a visual refresh of the voice library. My team was frustrated with the limited number of voices accessible on the screen at a time.

I began by trying to understand what led to the initial design decisions.

The minimum height to each voice card was limited by that there were three rows of content. But why were the name, tags, and description in separate rows? Why were filters put into a panel, limiting the view of the voices? This was both to accommodate the large selection of style tags, and the possibility that up to all of them could apply to a voice at a time.

Upon auditing the voices myself, I found that there were no voices with more than three tags. Additionally, some styles had only one voice assigned under them. This was also problem on its own: it was a poor impression of our voices offerings if only one voice shows at a time, as the fact that we offered thousands of voices was a key product differentiator.

This then led to my most impactful question: what and who decided the system for the data behind voices?

I recognised that the greatest impact to an improved voice library started with the voice data. Therefore, I first set up a data operations initiative to create a new system for organising and creating voice data.

We decided on a maximum character count for names and descriptions. To support scan-ability, we also created a new description for a “role”, which was an adjective followed by a noun specifically describing that voice. This aligns with how humans search for voices — I may know that I want a “patient” voice for my customer support use case, and seeing a role such as “Kind Teacher” may actually fit better or be more informative than “Customer Support Agent”.

Descriptions were also systematised to start with a descriptive adjective, followed by age, and then a special use case.

This template for descriptions allowed you to vertically scan down adjectives until one caught your eye, which you could then continue to read.

This also took place of the potentially infinite list of style tags.

Lastly, we also worked together to create custom preview transcripts for each voice. Previously, they all recited “Nice to meet you! Hope you’re having a great day.” Now, the transcripts highlight characteristics of the voice.

The design for searching was determined by the most probable and meaningful user journey. A search bar takes visual priority to help users who already know what they’re looking for quickly find a voice. Filters help users discover voices. They also inspire; the use cases dropdown can inspire a new perspective of thinking about voices, and the languages dropdown can reveal the plethora of accent options accompanying the dozens of voices.

Tabs are tertiary, as they are least likely to require being switched. They are useful for recurring users who have already invested in organising voices for themselves.

Previewing a voice with a custom transcript is essential to forming confidence in it.

This redesign introduced a new feature where users can choose to preview a voice with the default, a variety of transcripts, or a custom transcript.

The preview feature is also thought of as a “filter”, used as another layer of intention.

I also introduced a new feature where you can call a voice to preview it, to hear how it sounds as a voice agent.

Cartesia’s prior brand design was pulled together a few different prior brand initiatives into one. It was fast and scrappy; we were fast and scrappy.

Without a single outlined identity, there were inconsistencies between different surfaces, such as marketing and product.

Most importantly, the old brand didn’t tell a story. There was no clear motivation in the creative direction, making it difficult to meaningfully extend.

Therefore, we invested in a rebrand to debut a more matured and focused identity and stance in the frontier research and product space.

At the core of the rebrand was the introduction of a new little guy, Archie. He takes form of the personification of an asterisk, a symbol that says “there’s more here, dig deeper”. He embodies an invitation to be curious, that there is something worth knowing living beneath the surface.

What’s most unique about Archie is his sense of play and mischief. This opened many creative doors to extend into the product design.

I began by deconstructing the brand into language — providing metaphors that can be tastefully applied to the interface design through color, form, and motion. This language represents the story users should feel when using our product.

The Cartesia playground’s job is to serve a highly identifiable, memorable, and technically capable first impression of our technology.

This story was reconstructed into a grounded and precise design system.

Colors: A palette was pulled from elements of the natural world — lush greens, sky blues, sands, and earth. It represents finding a reliable source of confidence from working on the fundamentals.

Colors are implemented in a 3-tier system, allowing more flexibility and coordination cross-functionally between product and marketing, and digital and print.

The palette is sorted into Brand, Border, Surfaces, and Foreground, which offers suggestions when in search for colors. You’ll notice that some colors (Memory and Mist) aren’t assigned any component token because, while part of the brand identity, they haven’t found a place in the product [yet!]. Other colors have multiple component tokens — breaking out of the “category” they are in — which proves the merit of using a multi-tiered system!

Component tokens are named semantically, by their role followed by their relationship to the component. When a token represents a component’s primary role, the role comes first. For example, secondary defines the background of a secondary color, and pairs with secondary-foreground which defines the icon/text color in that button. When a token describes a property applied within a broader context, the property comes first. For example, foreground-secondary is used for as a “secondary” foreground across background surfaces.

Player component using brand, brand-accent, brand-foreground, and brand-accent-foreground

Iconography was an opportunity for unobtrusive delight, bringing playfulness while maintaining craft. We wanted to use forms that evoked resemblance to science/spacecraft/boardgames/riddles. Geek is so back.

Try playing around :-)

Using the guidance on textures from the brand book, I designed a generative system for profiles for voices.

Adding a final identifiable touch, I designed a system of borders and nibs inspired by webs and veins. Reserved to emphasise magical moments, such as a text-to-speech generation.

By establishing a design system from the new brand, we achieved a cohesive look and feel cross-functionally. The initiative for a design system naturally funded refreshing our interface designs as well — providing opportunities to combat known UX pain points from a systematic lens.