SB design system
Design system to enhance software standards
Need to go deeper?
Client
Smokeball
Duration
3 Months
Team
Designers
Engineers
👀 Background
Smokeball is transitioning from a marketing-led to a product-led SaaS company. The software has existed for 12 years with little dedicated design input. The company is now looking to address this long-overdue design debt in an increasingly competitive field.
📌 Problem
📣 Objective
Based on Smokeball’s brand identity, we’re building a design system to drive greater consistency and efficiency across all our products and platforms.
🙌 My role
As the lead designer, I identified the need for a design system in collaboration with stakeholders. I then planned and executed all design tasks. I spent most of my time working with designers and developers on this highly technical project, ensuring it became an effective communication channel among the cross-functional team.
🚀 Business Impact
Foundation
Colour
The product team inherited a large branding colour set from the marketing team. To tailor it for the product, I worked closely with fellow designers to identify only the necessary variants, nothing more, nothing less.
Typography
I assigned two different font families for headings and body text that are elegant and easy to distinguish. The design system used a combination of 8px and 4px grid structures, which were embedded in the type scale.
Components
Button
For the most important touchpoint in a data-heavy interface, I applied a minimum 3:1 contrast ratio to maximise visibility. 14 different types ensured enough subtlety to fit each scenario, whether it needed to be toned up or toned down.
Input field
Form elements should be self-explanatory, so I utilised diverse visual cues such as labels, icons, and imagery to convey functionality as clearly as possible. Since most of our users were not very tech-savvy, there was no question that the input field had to be the most recognisable-vertically aligned.
Documentation
Atomic design system
Foundation
Colour, Iconography, Typography
Components
Alert, Avatar, Badge, Button, Chat, Checkbox, Date picker, Drawer, Dropdown, Input field, Link, Logo, Modal, Pagination, Progress, Radio, Segmented control, Switch, Tab, Tag, Tooltip
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 the team always had a solid foundation to start new projects without their creativity being 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 nested 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, adding specific components tailored 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 other times when we needed to avoid distractions and simply concentrate on the craft and pixels.
The smaller the element, the greater 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 define the character of the product. At the same time, choices should be kept to a minimum, most pages don’t need six heading sizes or ten shades of blue. There should be minimal noise for designers or developers to easily find and use the right variant when accessing the document.
Need to go deeper?