Onyx design system is system library for Securonix products to help keep the look and feel of the products and experiences consistent. It gives Securonix designers and developers the framework to create engaging products at scale.
The overview
My Role
Team
Senior UX Designer
3 UI Developers
2 Lead UX Designers
Technical Writer
UX Designer (me)
The why
The product offered solid functionality; however, the absence of a cohesive design system left the legacy design feeling outdated. Moreover, with no accessibility considerations and inconsistencies it undermined the overall user experience.
1500+
Unique color shades from only 20 to 30 actual colors
Multiple button designs
There were multiple button designs for the same action across the product
The potential value add
A design system would enhance the overall user experience and provide an opportunity to modernize our look and feel.
For Users
Users would get a much-needed visual update along with consistent user experience all across.
For Securonix
Developing a design system will save development resources and reduce costs.
An audit and research
We conducted a component audit as team and then explored different design systems to understand foundations and naming conventions.
The foundations
The current product did not have a strong visual connection to the Securonix brand. We held multiple discussions to determine the appropriate colors that would represent the brand while also focusing on accessibility. Ultimately, we chose Purple (#4435F0) as our primary color and decided to use the Roboto typeface.
900
#1B1952
950
#06042F
L - AAA
.
S - AAA
L - Fail
.
S - Fail
800
#0F0A73
700
#231AAC
600
#3226CE
500
#4435F0
400
#7266F6
300
#9085FA
200
#B6AEFD
100
#DBD6FE
50
#FFFFFF
L - AAA
.
S - AAA
L - AAA
.
S - AAA
L - AAA
.
S - AAA
L - AAA
.
S - AAA
L - AAA
.
S - AA
L - AA
.
S - Fail
L - AA
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - AA
.
S - Fail
L - AAA
.
S - AA
L - AAA
.
S - AA
L - AAA
.
S - AAA
L - AAA
.
S - AAA
L - AAA
.
S - AAA
900
#0C1027
950
#060814
L - AAA
.
S - AAA
L - Fail
.
S - Fail
800
#161B37
700
#242942
600
#323856
500
#4E5579
400
#6D7499
300
#9299BA
200
#CFD2E2
100
#F0F1F6
50
#FFFFFF
L - AAA
.
S - AAA
L - AAA
.
S - AAA
L - AAA
.
S - AAA
L - AAA
.
S - AAA
L - AAA
.
S - AAA
L - AAA
.
S - AA
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - AAA
.
S - AA
L - AAA
.
S - AAA
L - AAA
.
S - AAA
L - AAA
.
S - AAA
L - AAA
.
S - AAA
900
#330000
950
#1A0000
L - AAA
.
S - AAA
L - Fail
.
S - Fail
800
#660000
700
#990000
600
#CC0000
500
#FF0000
400
#FF3333
300
#FF6666
200
#FF9898
100
#FFCCCC
50
#FFFFFF
L - AAA
.
S - AAA
L - AAA
.
S - AAA
L - AAA
.
S - AAA
L - AAA
.
S - AA
L - AA
.
S - Fail
L - AA
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - Fail
.
S - Fail
L - AA
.
S - Fail
L - AAA
.
S - AA
L - AAA
.
S - AA
L - AAA
.
S - AAA
L - AAA
.
S - AAA
L - AAA
.
S - AAA
L - AAA
.
S - AAA
The components
Applying the Atomic Design principles by Brad Frost helped me design components and variables in a structured way.
The Documentation
Figma components would mostly be used by designer but I created a Zeroheight design system site which would act as the one source of truth for designers, PMs , engineers and all other stakeholders across Securonix.
A zeroheight site allowed us to maintain the design system with least friction and integrated very well with Figma and Storybook.
Results and Impact
The Onyx design system was crafted to empower a team of 4 designers, 8 product managers, and over 100+ developers.
It has significantly sped up the design to development handoff process, made it easier to implement new and existing features, and ensured visual consistency across the entire platform.
Quantitive
50% reduction
In design to development handoff time
20% faster
Development with accessible reusable code
Qualitative
“The new update of Unified Defense SIEM looks very modern and visually appealing.”
“I am so glad you finally introduced Dark Mode, can’t wait to see other upcoming updates.”
Valuable learnings
Here are few more projects you might be interested in.