Refreshing Signal Sciences’ security platform

Learning about the existing system

Before we started explorations, key stakeholders got together to revisit the existing design system. I led workshops with designers, content strategists, and engineers to discuss pain-points, roadmaps, and department goals. As Signal Sciences’ first visual product designer, I also led mood boarding exercises to get the team comfortable talking about visual style.

Exploring style options

After project goals were established the team moved on to style explorations. The goal was to create as many visual systems as possible while adhering to brand parameters. We used our platform’s main dashboard page to show off various design systems.

The winning design

After multiple rounds of reviews the team narrowed down the winning option. We produced more pages to show how this new system can scale and built a prototype to help us socialize our ideas.

Auditing our color system

As part of our redesign efforts we conducted a comprehensive product audit. Through this process we discovered our existing color-coding system had ill-defined guidelines. We solved this issue by removing unnecessary color-coding and creating a new palette with stricter usage rules. We then tested our swatches against multiple color blindness requirements in both light and dark product themes.

Putting it all together

We stress tested our design decisions across the platform to ensure components were reusable and scalable. I worked closely with engineers to define rules, use cases, and naming conventions for new components. Through this process we were able to consolidate and delete many unnecessary one-off solutions.

Presenting the final component library

The final design deliverable was a comprehensive component library. Components and documentation were socialized through Figma and Github.