Fresco

A design system for one of the UK's leading charity website platforms; revolutionising the delivery of hundreds of sites.

Whilst working for one of the UK's leading charity CMS and fundraising platforms, Raising IT (since acquired by The Access Group), I helped to revolutionise the way the team were delivering website designs by building a design system tailored to the needs and requirements of the platform.

Prior to Fresco, front-end developers were hand-rolling huge amounts of CSS per each project. This lead to a lot of time wasted repeating the same things on each project, as well as a lack in consistency and quality due to the differing experience of the team. I was spending far too much time fixing CSS bugs that should never have been introduced in the first place; so I decided to build a design framework that distanced the designers from the core code base.

Fresco can be thought of a bit like Bootstrap for the Raising IT platform. Rather than hand-writing CSS, designers interact with a series of hundreds of SCSS variables and mixins to control things like colours, fonts, and layout. This meant that designers could churn out CSS builds for a site in significantly less time than before; which was essential when we were expected to turn around site design and build within a two week sprint.

This saved the company hundreds of thousands of pounds in delivery costs, opened up the business pipeline for more capacity, and the framework is still the backbone of hundreds of charity websites on the Raising IT platform.

One of the challenges was insuring accessibility colour contrasts within an automated system. For example, if a designer chose to set a background colour for a component to be a dark blue - Fresco would need to automatically decide that any text that appears within this component should be white. I blogged about this challenge and how I overcame it here.