Design System

Company Overview

Forcepoint is a cybersecurity company that provides both perimeter protection and behavioral analytics. Growing through acquisitions, they are developing a new platform to provide their services in the cloud.

Project Goals

A design system is the style guide for software design. Forcepoint is developing products for a SaaS platform. They need a design system for a consistent and intuitive user experience across the platform & products.

Tasks

Manage Project & Lead Team
Design & Code Components
Write & Edit Documentation

Manage Project & Lead Team

There was a team of 6 UX & UI designers who met on a weekly basis to discuss the design of the components. They were extremely talented designers, but were responding to designs based upon immediate development needs. There was no vision or schedule for releasing components on a regular basis. I joined the team as both a designer and a project manager.

The Forcepoint design system has over 30 components. As the project manager, I worked with the Director of UX, the product managers, and UX designers across the product teams to prioritize the design of the components for our 3.0 release, the first release to be used by our SaaS products. I then finalized a quarterly delivery schedule over three releases.

To ensure we hit our releases, I set up a Jira project to track each component. I instituted agendas during our weekly meetings. And I defined metrics for “done” so designs would not remain un-approved for weeks on end.

Design & Code Components

Components are the building blocks of the design. I was involved with two area: defining the UX patterns for components; and creating reusable components in Figma so UX designers could create fast, consistent prototypes across our products.

Define the UX

I gathered requirements for components across the product lines to create a design that would serve the needs of a variety of use cases. And I leveraged best practices from the industry.

Code Components

One of the benefits of a design system is a central library with re-usable assets. Designers drag assets (components) into their wireframes to speed up the creation process and to ensure a consistent UX patterns and visual design across the platform.

Using the visual designs our UI designers drew in Figma, I created assets that had each of the variants for a component. For instance, our system had 6 styles of buttons, and each style had 4 states. With the variants, the designer dragged a button from the library into the design, and selected the style and state from pull-down menus.

Write & Edit Documentation

The design is half the deliverable in a design system. The system also serves as a specification to describe the interaction model and visual design so that developers can implement components accurately.

Utilizing my training & experience as a technical writer, I documented many of the components and edited all of the entries for accuracy and a consistent voice.

I worked closely with the lead visual designer to refine the topic organization when we moved our system from static pages in Confluence to a dynamic presentation in Figma.

I coordinated with our technical writers to agree on component names & terminology used in our specifications.

And I wrote materials to train developers to use Figma & our design system so they could get the information they needed for their code. Our components are the blueprints for development to build their own library of components.