How do you create a logical design system for Ross Noble, one of the most surreal comedians in the world?

What I did

Design system.

Clients

Your Favourite Story, Ross Noble.

Insights

Taking a non tech savvy client through the design process can be tough. They require a high level of clarity in communications. Knowing when to go into detail and when to simply do the work and show the results is a skill that requires project managers/client services, design and creative directors to lean on each other for support.

Designers and developers working at the same time with the ability to make adhoc changes and updates to live builds is both quick and affective.

The project

The creative director had a defined concept for the site overall and the client had a list of features required. The site was going to act as a branded container for paid video content as well as a single location for all current and legacy information about Ross Noble.

Because the site was going to be technically and visually elaborate, each element would require more crafting than is usual. Code driven dynamic elements meant that whole page layouts presented in static form would not describe the site in an understandable way for the client. Prototyping tools and face to face walk throughs were also not appropriate for the client.

I chose to produce a design system (atomic design) where the client could agree early on the process on design elements like colours fonts, while developers built the site itself. This meant that the client would be signing off on live builds. The client was free to make changes that affected the whole site and I updated atoms/modules to reflect this while developers were able to make adhoc changes right in the code where possible.

This rather unique approach meant we could make changes quickly and regularly by updating our system and worried less about page layouts being ‘perfect’. We also avoided producing unnecessary design work and used this time for the adhoc requests instead.