ObserveIt /
Proofpoint

Situation

ObserveIt was a large organization with multiple teams working on different products, but there was no consistent design language or system in place. This was causing confusion and inconsistency across the products, and the organization wanted to address this issue.

Task

After reviewing various options, we decided to create a design system that could be used across the organization to ensure consistency and improve the user experience. Our goal was to use this singular source to act as a living brand guide, component index, and code repository for all six live applications the organization had to offer.

Action

To accomplish this task, I took the following actions:

1. Conducted research to understand ObserveIt’s needs and its products. This involved working closely with the various teams to understand their requirements, as well as learning the current state of each application and how they overlap.
2. Instituted a set of core design principles that would guide the design system. These principles were based on the organization’s goals and the needs of its users, including our designers and developers.
3. Created a visual language for the design system, including things like color palettes, typography, and iconography.
4. Developed a set of guidelines and rules for using the design system, including how to apply the design principles and visual language to each of our products.
5. Created the design library and style guide, as well as developed the platform itself, to make it easy for designers and developers to use the design system.
6. Used Sass (think CSS with superpowers) to refine and streamline the process of updating all applications simultaneously. This included the use of variables to define fonts, colors, and more; allowing for quick changes and complete white labeling in a matter of minutes.

Result

ObserveIt now had access to a consistent design language and system that would grow to be used across all of its products. This improved the user experience and made it easier for the teams to work together, resulting in more effective and efficient product development. The results really came to life when ObserveIt was purchased by Proofpoint; once the acquisition was made public, we were able to change all logos and colors to match Proofpoint’s brand guides in less than an hour’s time (with testing, of course).