Meet Cleo
Cleo is a smart money coaching app, using AI to give people deeper insights into their money. I joined the Growth team at Cleo to deliver a website that would drive new users and provide a flexible content management system so that the marketing team could easily maintain the pages. I designed and built the final website in Webflow, removing the need for a development phase.
The Brief
Each section of the site had a different purpose and criteria for success, my goal was to meet these divergent aims while keeping the overall website clean and consistent.
- The homepage needed to be bold, creative and grab attention. The core of Cleo is her personality, so the homepage needed to express this tone of voice, introduce the concept of chat, and cover the secondary features.
- The feature pages are all about SEO, and needed to be content rich.
- Landing pages needed to be lean, conversion focused, and easily edited/added
- The careers page needed to inspire and encourage talent to join Cleo
- The blog needed quick and easy content management
The homepage
The challenge here was to convey that, while Cleo is an app for managing your finances, the main way you interact is via chat with Cleo's AI personality. To achieve this, I created a scroll based interaction that gives users an example of a conversation with Cleo, highlighting two personality modes, Roast and Hype.
The rest of the page showcases both the features and the brand through animated illustrations, big typography, and creative details like a section that switches to sideways scrolling.
Feature pages
I wanted the intro to each page to feel like a typographic poster. To achieve this I created a fluid title that stretches vertically and horizontally with the page and alternates alignment, so that no matter what device the page is viewed on the intro feels specifically crafted for it.
To differentiate each feature and keep the site visually interesting, I assigned each page a colour scheme from the Cleo colour palette.
Flexible Components
The feature and landing pages are built up from components I created to give the editors a variety of ways to present their content, these components are highly flexible, allowing or repeated or hidden elements. They adopt the colour scheme of each page and can have a background in two styles, full width and panel.
Careers page
The careers page needed to reign in the more unconventional aspects of the site and include imagery of the team and office spaces. We wanted to split out the content into two other pages covering 'Life at Cleo' and 'Career progression' which would then easily link back to open roles.
The Blog
Finally, the blog needed an easy system for the writers to add new posts and filter by category and author. Each category inherits the colour scheme of the related feature to add consistency across the whole website.
