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.
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.
Client : giffgaff
Year: 2019-2020
Job title: Senior designer
Year: 2019-2020
Job title: Senior designer
Fundamentals.
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.
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.
Iconography.
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.
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.
Components.
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.
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.
Sketch to Figma.
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.
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.
Web pages.
Here are a few web pages that were created using the design system. Many of the people used in the images were staff members or community members. Again this was all part of what made giffgaff unique and charming.
Here are a few web pages that were created using the design system. Many of the people used in the images were staff members or community members. Again this was all part of what made giffgaff unique and charming.
