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.

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.