Netbet Design System
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.
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 Proccess
1. 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.
2. 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.
Documentation
Clear instructions on using the foundations and components.
Key Components
A comprehensive set of the most frequently used and reusable components.
3. Design
This phase involved the actual creation of the Design System's elements within Figma, turning the definitions and ideas into tangible assets.
Foundations
I established the core styles by referencing NetBet's existing brand style guide, making adjustments as necessary to ensure they worked well across both web and app contexts. For spacing, an 8-pixel grid system was adopted to improve implementation consistency and alignment.
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.
4. Test
A constant feedback loop was established with the front-end developer as they started implementing the styles and components. They actively asked questions and provided valuable suggestions for improvement, for example, regarding the organisation of color variables. This collaborative process showed strong engagement and helped refine the system iteratively.
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
Conclusion
By making the first part of a Design System (with styles, components, and documentation inside Figma), we helped fix NetBet's main problems: designs looked different and work was slow. Early results were good, including faster development and designs being built more consistently.
This project showed how important good teamwork between designers and developers is. It also showed the need for clear documentation and choosing the right work first, especially when building a big system from the start. The Design System is still being worked on and made bigger to support NetBet's future growth.