Portfolio

Creating a design system for giffgaff

Date:
2016 - 2019
Role:
Design system lead
Scope:
giffgaff had seen 10 years of growth, 10 years of brand campaigns and 10 years of software development. Design debt and tech debt was high. Realising the size and scale of the problem, I championed the need to solve it.

It started small with some markdown files, then evolved into a living style-guide, then design decisions were added along with content guidelines, UX requirements, user research and more. My focus was always on building what giffgaff needed, not what I wanted to make. This meant the design system was solving real problems, helping to build real products and crucially delivering value to giffgaffs members (giffgaff has members not customers and you'll be told off for saying otherwise)

As the reputation of the design system grew within the business, so did the demand. I was given some budget and hired a kick-ass team of designers and developers to help. We branched out beyond the web and got involved in projects all over the business including the app, social campaigns, emails, bus t-sides... if it needed to be designed we were always asked to help.

Mobile screenshot of giffgaff.desgin
Components in the design system
Bespoke website allowed the documentation to be fully on brand

Bespoke website

Off the shelf solutions didn't work out. We tried a few, but they all lacked something in either the code or design department.

To be a giffgaff design system it had to be uniquely giffgaffy and be a true reflection of how we were designing and coding at giffgaff.

We placed equal weight on collaboration, copywriting, design, and development to create a custom website that's full of giffgaff charm without compromising on code quality

Components in the design system
A few of the components created in the design system

Creating components

Tasks involved auditing the current website and apps, A/B testing different variants, collaborating with product teams to get requirements and checking if they were fit for purpose

Micro interactions on hover and click

Micro interactions

More than pretty pictures; these were A/B tested against static versions and came out on top, increasing click through rates and conversions

Components in the design system
Everybody getting involved in the performance hackathon

Culture

A lot of the work on the design system was centered around promoting the design system and a design orientated culture. I looked for, and created, opportunities to present and engage with people across the whole of the company:

  • Engaging and presenting to senior management (including C-level)
  • Whole company presentations
  • Organising a hackathon for the development team
  • Facilitating workshops and COPs
View live website