giffgaff was founded in 2009 and have continuously evolved, enjoying year after year of growth. As the business expanded, the number of product teams and designers did so too. The need for a design system became clear. I was part of a team that designed and developed a design system at giffgaff.
The company is synonymous with being a disruptor within the telco space. It's visual brand identity has stayed true to it's community roots. Brand assets are supposed to feel hand made and images cut out with quirky boings to emphasise words or bring more character. The challenge was to keep this challenger vibe yet create a system where the multiple product teams could achieve consistency.
Every good design system needs a solid foundation. These are the basic building blocks that make sure every design looks uniquely like giffgaff. The design fundamentals include grids, spacing, typography, colours and icons.
The quirky icon set has stroke lines that appear to be drawn freehand and rough. These imperfect icons again reflect giffgaff's youthful charm and character.
Using our design fundamentals, we were able to craft components for the design system. Components were made in collaboration with UX designers who often gave advice and guidance on best practices.
Spacing guides and annotations were provided to ensure consistency across components.
The design department as a whole decided to move over to Figma where we were able to carefully craft components for use. We ensured we were able to use variants where we could as well as making things as responsive as we could.
Surveys and interviews can help us learn much quickly but measuring true user intentions is another thing. We decided to build a landing page for gameplan with the intention of getting people to sign up. This would help us learn the true appetite amongst the existing member base for a financial product from giffgaff.
