Clio Grow Website Builder

The Clio Grow product has a website builder feature which allows lawyers to create a professional website without having to learn to design or code. Users can choose from a range of themes, colour schemes, upload images, customize sections and add copy. 

The feature initially launched with two themes. Customers quickly started asking for more, which lead us to developing a third theme called "Light & Airy". I was the lead designer of the theme and collaborated with web developers, software developers and product designers to launch it.

Final design

Moodboard

My design process started with exploring what "Light & Airy" looked and felt like. I explored colour palettes and imagery and designed a moodboard.

Scenarios

During the design of the theme I had to consider different scenarios of how the user could customize their website. Some scenario examples were - the dimensions and quality of the images uploaded, the length of copy input, the number of team members or practice areas added, whether an image was uploaded or not and if certain sections were hidden. 

The below image shows the instructions I provided the web developer for how the masthead should behave with minimal and large amounts of copy, when no image is uploaded and when different proportion images are uploaded (landscape, portrait, low quality).

The below image shows how the About Us section would look if the user inputs a large amount of copy, small amount of copy, a small image or no image.

Colour schemes

Users could choose from a range of 7 different colour schemes so I designed the theme to work with the different colours, documenting how the CTA default and hover styles would work with each colour scheme.

Results

When the new theme launched we saw a large spike in the number of users publishing websites using the Grow Website Builder. In the four months following the launch, the Light & Airy theme became the most popular out of the 3 available, with 51% of users who published websites using this new theme.