Nutrition for a healthy lifestyle

Healthspan asked us to help them totally re–design and develop their online presence. They wanted more than just a website however, they needed a system they could grow and adapt over time, as well as maintaining a unified codebase between their Mobile and Non–Mobile Website.

View the project

Design a system, not a website

Healthspan wanted us to produce something that would scale. It's all very well re–designing a website, but once that site grows and adapts over time, the veneer often loses its shine. We worked closely with the in–house design team to build a modular design system, and Pattern library that could grow as the site did.

Promote the benefits

We focussed on showing a healthy lifestyle over dwelling on ailments. We wanted to promote the benefits of the products, rather than the talk about specifics during the initial phase of browsing and investigation, so customers didn't feel overwhelmed with too much information, too early in their visit.

A battle for hearts and minds

We wanted customers to find moving to Healthspan products easy. We wanted them to trust in the product, as well as embrace the culture and ethos of Healthspan as a brand.

We looked at not only improving the structure and layout of the finer details, but also at how the site portrayed the brand on an emotional level.

Designed in a pattern library

We designed and developed almost exclusively within the framework of a pattern library. This library formed a central point of reference for the project, allowing the whole project team to see what we were working on as we progressed.

This allowed us to design and iterate quickly, as well as allowing for modules to be developed independently from templates and the site as a whole.

View the pattern library

M(dot) doesn't mean it's separate

Healthspan decided to build a separate mobile version of the website, as research had shown them this was converting better for their peers and competition. We took the approach that the Mobile site needn't be a totally separate beast, and could share a large amount of the same codebase.

We set–up using SASS to manage modular CSS, in a manner that could be shared (or not) between Mobile and Non–Mobile versions.

The devil's in the detail

Browser Healthspan

Take a look

View the project