GCSEPod: Building a Design Language from the Ground Up

At a glance

• -Joined as a frontend developer and stepped into design work by translating visual ideas the team struggled to communicate, becoming the bridge between product thinking and visual execution.
• -Challenged a marketing-led colour direction, built the case in Figma with annotated screens showing the problems, and proposed a two-theme solution that was adopted as the new product direction.
• -Established a complete design language from scratch including colour tokens, typography rules, contrast ratios, button states, and background scales.
• -Translated the entire design system into CSS tokens applied across the product codebase, bringing consistency to a product that had none.

Overview

GCSEPod is a GCSE revision platform used by hundreds of thousands of students and teachers across the UK. Schools subscribe to give students access to short video pods covering every GCSE subject and specification.

I joined as a frontend developer. The product had been built by developers without a dedicated designer, and it showed. Every section used different colours, there was no visual hierarchy, and the interface had grown feature by feature without a unifying design language.

Early on I noticed the product manager was having difficulty visualising ideas and communicating them to the team. Having built websites from scratch before joining, I started translating those ideas into Figma screens and it worked well. I began working closely with the product manager and senior stakeholders as the person who could take a product requirement and turn it into something the whole team could see, discuss, and build from.

Over three months in 2022 as my first project at GCSEPod I designed and built a complete visual language for the product, from the colour system through to CSS token implementation across the entire codebase.