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.

This visual redesign took into account prior pain points, improving the user experience.

One key insight came from abstracting the text-to-speech feature into its separate product offerings. On the text-to-speech playground, we are selling a model — but just as importantly, a voice as well. 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.

This new design takes into account the user journey in creating a text-to-speech generation: allocating a space to quickly discover and switch between various voices.