Project - Aury

Context:

The Aury founders were looking to boost their project. I joined to bring the product from 0 to 1 in terms of user experience, UI, info architecture and overall brand feeling and marketing.

The results:

An app that understands and keeps track of the mental health progress of the user across many different specialised modules.
All this powered by a conversationalAI framed within the affordances of UI.

I worked along with the founders to bring together a product experience that keeps the user engaged and open to learn more about their mental health.
It consisted in creating a UI layer to their already powerful AI, by mapping out the architecture of information that could organise their agentic powers across multiple modules.
Along with that I developed a thoughtful treatment for their brand, where I chose not to represent emotions or mental health disorders with facial expressions, and leaned into a more abstract representation of them since they all are extremely personal and hard to
Mental health apps were appearing everywhere while I was working on this project. My main concern was to make it stand out from the other product experiences by moving away from the typical representation of emotions with facial expressions. This ended up guiding the features we chose to develop.

BUT

it also entailed the creation of methods to maintain the brand in line across all communication and in better ways of implementing content onto the website.

Also an insane increase in SEO reach, brand perception, interest, and best of all, copycats!

a web browser with the charles website inside, elements of UI and 3D renders surround it

Yet another mental health app?

There are a bunch of mental health apps, but none of them dares to represent emotions and mental health disorders in a different way.

1st step: design the logo and visual language

The idea of a character came up pretty early, based on lots of surveys across the company and from clients, this was also the prevalent perception.

Some logo ideas needed to be pushed far away from our initial assumption. In the end the logo needs to be able to encapsulate the brand rather than explain it.

While looking for the logo I was developing the visual language, which I struggled for a bit trying to give it some 💫 oomph 💫

The main concept of the companion / character was the strongest across all our reviews and the most distinctive.

The logo:

An unlikely collab

We contacted Kulture Type and asked them to build the voice defining aspect of our brand: the font. They gave us charles sans and charles inktrap:

a figma preview of how a component is built

Check their case study about this fantastic font on their Behance profile

See on Behance

a preview of Figma on how to build a component

2nd step: A new home

I had already done an entire redesign of the website early when I joined charles, now I needed to redesign the website (again!) and lead the implementation of the brand and new features.

We wanted to talk directly about the hard numbers and the direct benefits of using WhatsApp marketing with charles. Also to better explain what the product does and how easy it is to implement

3rd step: Create, document, distribute

I did some guidelines, if you're interested to see more and we're interviewing please click on the button below!

If you want to see more details and take a look at the prototype click here:

View more guidelines

A library not only for designers

I built a comprehensive library of components that fulfilled:

Faster website sketching

Better and more in-brand sales and client presentations

Faster and more cohesive content creation for website and social media

Increased communication across teams in terms of brand assets and overall content production

Product team adoption for their own needs

I aimed to build components that didn't need any designer overview. Any user should be able to pick and choose and edit what they needed directly through the component options.

A view into Figma

Aside from the branding guidelines, I built a method for everybody in the company with the need of brand assets could find and implement them without any help from the creative team.

a design composition being dragged with a mouse cursor

Users can drag and drop directly from the Asset sidebar or Resources section on the top bar.

Figma sidebar where you can see the style of fonts

Templates and components had text styles to easily define hierarchies

The figma sidebar with information about components

The easiest method allowed for users is Instance Swapping. But booleans, variants and other component properties were available as well.

Flexible components

With auto layouts and variants the sketching, production, prototyping and handover of new sections of the website were optimised exponentially.

a collection of UI elements in different colors and shapes

These are some of the components that are part of the library, it allowed other team members to test and iterate very quickly on usability and readability.

Also social media and ads!

We took some liberty from the usual guidelines, but this is how we pushed the brand to evolve and to bring in extra ideas.

These are a few of the assets used across all charles channels

Check out some of my other projects:

WWF - Tree of Hope

Branding. marketing & product

Galactic Garrison

Design System on steroids