Q1 - Q3 2023

Q1 - Q3 2023

Onyx Design System

Onyx Design System

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

As the product grew inconsistencies became apparent across the product resulting in a disjointed experience as engineering teams worked in siloes with no design system in place.

Engineering led product with little to no UX considerations.

Engineering led product with little to no UX considerations.

As the product grew inconsistencies became apparent across the product resulting in a disjointed experience as engineering teams worked in siloes with no design system in place.

My Role

In my role as the UX Designer for this project:


Designed and maintain Figma components and variants


Created Zeroheight site for all things design system


Defined component usage and documentation in collaboration with Technical writer.


In my role as the UX Designer for this project:



Designed and maintain Figma components and variants


Created Zeroheight site for all things design system


Defined component usage and documentation in collaboration with Technical writer.

Team

Senior UX Designer

3 UI Developers

2 Lead UX Designers

Technical Writer

UX Designer (me)

The why

No design system meant a disjointed experience and increased development resources.

No design system meant a disjointed experience and increased development resources.

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

From zero to hero !

From zero to hero !

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

Learning from other enterprises like Google, Atlassian and Microsoft.

Learning from other enterprises like Google, Atlassian and Microsoft.

We conducted a component audit as team and then explored different design systems to understand foundations and naming conventions.

The foundations

Working as team to define typography and color.

Working as team to define typography and color.

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

Roboto

Roboto

Roboto

Roboto

Roboto

Roboto

Roboto

Roboto

The components

Designing components using the Atomic design principle.

Designing components using the Atomic design principle.

Applying the Atomic Design principles by Brad Frost helped me design components and variables in a structured way.

Atoms

Molecule

High

1

Possible Self Privilege Escalation...

Chip

Icon

Badge

Text

High

Playbook running....

1

Possible Self Privilege Escalation...

Last Event

3/4/22 1:22PM

Playbook Ran

by

Mira Mcclain

Chip

Chip

Badge

Text

Text

Card

Icon

Icon

Text

Organism

Molecules

Alerts

Last 24 hrs

Risk Score

Time

Search here

View as Violators

High

Playbook running....

1

Possible Self Privilege Escalation...

Last Event

3/4/22 1:22PM

Playbook Ran

by

Mira Mcclain

Medium

Playbook running....

1

Possible Self Privilege Escalation...

Last Event

3/4/22 1:22PM

Playbook Ran

by

Mira Mcclain

High

12

Possible Self Privilege Escalation...

Last Event

3/4/22 1:22PM

Before

After

Before

After

The Documentation

A Zeroheight site for all things

Onyx Design Systems.

A Zeroheight site for all things

Onyx Design Systems.

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

A design system that complies with WCAG guidelines.

A design system that complies with WCAG guidelines.

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

Planning and strategy of building the system is key.

Planning and strategy of building the system is key.

When we started the project, I assumed that creating a design system was just designing reusable Figma components and that’s it but quickly realized how vast and challenging of an effort it was.


None of us designer on the team had worked on building a design system before.


Since we didn’t have a dedicated design systems team, we had to plan it well to fit it into our regular UX work.



When we started the project, I assumed that creating a design system was just designing reusable Figma components and that’s it but quickly realized how vast and challenging of an effort it was.


None of us designer on the team had worked on building a design system before.


Since we didn’t have a dedicated design systems team, we had to plan it well to fit it into our regular UX work.

You’ve made it this far, so why not
check out another project?

You’ve made it this far, so why not
check out another project?

Thank you for stopping by! I would love
to connect with you.

Thank you for stopping by! I would love to connect with you.

If you like what you see and want to learn more, I'd be happy to chat with you about my design process.