Showcasing products that calm the chaos of daily life

OTO

2022-oto-website-00
2022-oto-website-01

The brief

I was approached by OTO to design a website for launching their products in the US market. While it needed to follow the core brand guidelines, the US site exists separately from the UK and has a distinct target audience, and therefore needs a completely new design approach.

2022-oto-website-04b

Creating the structure

OTO’s products and brand are elegant yet minimal in design. I wanted to take this through to the web experience, presenting a clean layout that's got plenty of space to breathe throughout, enhancing their core brand benefit - creating calming moments.

2022-oto-website-10
2022-oto-website-09
2022-oto-website-08

Crafting the aesthetic

OTO’s products and brand are elegant yet minimal in design. I wanted to take this through to the web experience, presenting a clean layout that's got plenty of space to breathe throughout, enhancing their core brand benefit - creating calming moments.

2022-oto-website-02b
2022-oto-website-05b
2022-oto-website-07b
2022-oto-website-06b
2022-oto-website-03

Product cards

The product listing pages provided a key opportunity to use rich visual content for the ingredients.

I created a suite of clean shoppable images for each product, along with a richly layered composition of the product’s key ingredients.

Focus-1
Balance-1
Amplify-1
Pillow-Mist-1
Power-Drops-1
Sleep-Drops-1
Cocktail-Bitters-1
Hand-Balm-1
Roll-on-Discovery-Set-1
Sleep-Collection-1
Day-Night-Drops-Set-1

Animating a preview

Adding motion to a website - in my opinion, is a necessity - in order to lift the experience and enhance a user’s experience of the brand.

Taking the static designs from Figma into After Effects, I added subtle motion and interaction. This helps both the client and developer know how the live website will look when built.

The Team

Brand — OTO
Client — Richard Tidman
Creative Director — Alex Melville
Copy – Holly Rix
Wireframes — Richard Tidman
Visual Design — Alex Melville
Motion Graphics — Alex Melville

View