SB design system
Design system to enhance software standards
Need to go deeper?
Client
Smokeball
Duration
3 Months
Team
Designers
Engineers
🔍 Background
The legal industry is experiencing a rapid digital transformation, and more and more law firms are investing in technology to become more productive.
As a software product that has existed for 12 years without a dedicated design team for most of that time, Smokeball is now looking to address this long-overdue design debt.
📌 Problem
📣 Objective
Based on Smokeball's brand identity, we are building a design system to drive greater consistency and efficiency across all our products on various platforms.
🙌 My role
As the lead designer, I identified the need for a design system with stakeholders. I then planned and executed all design tasks. In addition to collaborating with all team members as in any project, I spent most of my time working with developers on this highly technical project.
🚀 Business Impact
Key Components - Button
Visibility, adaptability
For the most important touchpoint in a data-heavy interface, I applied a minimum 3:1 contrast ratio to maximise visibility.
9 different types ensured enough subtlety to fit each scenario, whether it needed to be toned up or toned down.
Key Components - Input
Accessible, unambiguous
Form elements should be self-explanatory, so I utilised diverse visual cues such as labels, icons, imagery to convey the functionality as clearly as possible.
Most of our users were not very tech-savvy, there was no question the input field had to be the most recognised, vertically aligned, classic style.
Documentation
Scale up elements based on atomic design principle
Foundation
Colour, Iconography, Typography
Components
Alert, Avatar, Badge, Button...
Patterns
Header, Navigation, Table
Implementation
Guidance with creative capacity
The implementation of the design system across products didn’t follow a linear path. There was a lot of back and forth—it was a fine balance between covering diverse scenarios and avoiding rigidity. I wanted to ensure designers always had a solid foundation to start a new project, without having their creativity hindered by layers of restriction. After all, we’re just a small team.
One of the biggest challenges was making the system work across different products. My solution was to create a nesting framework. On one hand, we had a universal system that provided all the core elements usable in any product. On the other hand, each product had its own local satellite system, utilising components specific to its unique needs.
Before
After
💪 retrospectives
Focus on both big picture and small details
There were times when we needed context to understand the problem to solve, and there were also times when we needed to avoid distractions and simply concentrate on the craft and pixels.
The smaller the element, the bigger the consideration
During the process, I spent a disproportionate amount of time experimenting with setting up the foundation because small elements like type scale and colour range defined the character of the product. Meanwhile, the choices should be kept to a minimum, most of the pages wouldn't need 6 sizes of headings, or 10 gradients of blue. There should be minimum noise for designer or developer to use the right variant when accessing the document.
Need to go deeper?