Role
Senior Designer
Timeline
3 months
Tools
Figma
Overview
NetBet is an online betting and gaming company. It had growing problems because the designs looked different across its website and apps. This also made work slow for designers and developers. As Senior Designer, my goal was bigger than just making a basic set of designs. I wanted to build a strong Design System that could grow with the company. This system was planned as a solid base to make work much easier and faster for both design and development teams.
The Problem
The main problems at NetBet were that designs looked different and work was slow. For example, buttons had different colors and text styles, and form fields like input boxes were not consistent. These differences were easy to see across both Sport and the Casino section.
A big reason for this was the lack of a shared design base. Often, designers had to create designs from scratch because there were no ready-made parts to use. This inefficiency affected both designers and developers, as many changes were constantly needed. As a result, this created more requests and a lot of time was wasted in back-and-forth feedback, slowing down the ability to launch new features.
Design Process
Understand
The first step was to deeply understand the existing problems at NetBet. This involved auditing the current designs, which confirmed the inconsistencies we saw in elements like buttons and forms across the website.
As part of this research, I also analysed an existing design system from a sister brand. It quickly became clear this system was not helpful as a positive guide. It had major issues: disorganised styles, many implementation errors, broken libraries and duplicated components.
Definition & Approach
With a clear understanding of the problems from the previous phase, this stage focused on defining the scope and strategy for the crucial first phase (2-3 months) of the Design System. The main objective was to build the essential groundwork quickly and effectively, guided by the core principle of ensuring ease of use and understanding. This included:
Foundations: Core styles such as variables, colors, typography, icons, grid systems, and elevation styles.
Essential Documentation: Clear instructions on using the foundations and components.
Key Components: A comprehensive set of the most frequently used and reusable components, prioritised based on a study I conducted on future use and reusability. This initial set covered several essential categories:
To deliver this scope efficiently and support the core principle, key strategic approaches were decided:
The Figma library would be built in a modular format to make it easier for the team to learn and navigate.
The design tokens (variables) would use a simple, usage-based naming system (e.g., for background elevations, text colors) to enhance clarity.
All documentation would be created directly within Figma to keep it close to the components and avoid duplication.
Design
Components
Key components like buttons were designed to cover different use cases. A key focus was on simplifying the variants needed and utilizing Figma's component properties (like booleans) effectively to manage different states (e.g., hover, disabled, active). A similar component-building strategy was applied to other initial elements like inputs, cards, and headers.
Documentation
In line with the earlier decision, documentation was created directly within Figma. The priority was to keep it simplified, concise, and easy to understand, providing clear guidance for using the foundations and components.
Test
The Impact
✅ Reduced time spent developing new components.
✅ Hand-off process is quicker
✅ Less back and forth during the QA phase
✅ Design implementation is more consistent
