CoverPhoto_DesignSystems.png

Zignal Labs Design System

CoverPhoto_DesignSystems.png
 

Zignal Labs

Through real-time and predictive analysis of the full media spectrum, Zignal Labs' centralized platform empowers corporate communications, marketing and executive teams to understand trends, pinpoint issues and make informed decisions. 

 

DURATION: 
March 2017 - present

METHODS: 
INTERACTION DESIGN, UI/VISUAL DESIGN, systems design

LINKS TO PROTOTYPES:
Updated platform with Landscape colors

Collaborators:
Hennie farrow & Amy abito

 

 
 
 

The project // Zignal labs design system : Landscape

Zignal has had the same UI since the start of the company. A lot of the platform's components were designed and built when needed. Though convenient at the time, this has created an inconsistent color palette, interactions, and components that has slowed the design team over time - it was time for a refresh of the entire platform. 

THE PROBLEM

  • Inconsistency:  Different style of components and multiple shades of the same color in our library
  • Inefficient process:  Our current components lived in one large Illustrator file. Not all components were in the file so we would go through old mockups to grab components 
  • Lack of common theme: Platform lacked professionalism with no common style
  • Developers did not have a design system to follow:  Developers would work off old components while Designers were designing with new components. We did not work off the same design system.

THE Goal

To update the platform with a refreshed set of colors and a consistent style of components. We want to create a more efficient system of viewing components and use them in our mockups by using Sketch libraries. We also want to bridge the gap between designer and developer hand-off by working off the same design system.

 
 

The process

Hennie, the Head of Design, started creating components for our new design system called Landscape. It started off as a side project of how what we imagined Zignal 2.0 to look like. My team and I would test if our new components worked well on both light and dark backgrounds since Zignal Enterprise is primarily in light mode and Zignal Command Center is in dark mode. Because colors are used in all components, we had to go through multiple rounds of iteration for our color palette to ensure that the colors were cohesive in our platform. As we were getting new product features to work on, we started using Landscape components to our designs to slowly introduce these new elements to the platform. We had weekly meetings with engineers to implement our new Landscape design system in a React Library. Not only was this system making the design team's workflow more efficient but it was also making the engineer's workflow easier as well.  

 
 

 
 

old elements // 2011-2017

 
 

new elements // 2018 - present

 
 

Updating zignal enterprise with landscape colors

With our new design system we were able to start updating the platform with the new elements from Landscape. The first step was to update the colors.  I worked closely with an engineer for 3 weeks to update the Zignal Enterprise platform. The engineer and I went through multiple rounds of iteration.  We primarily focused on changing the colors of all components, removing outlines on buttons, and updating icons that were png files to svg files. As the engineer was working on updating the colors, I would audit the platform to ensure that all components were up to spec. Moving forward with the design system, the next steps would be to update the Zignal Enterprise with all Landscape components e.g. buttons, drop downs, modals, etc. 

 
 

Dashboard with old colors

Dashboard Updated with landscape colors

 
 

Zignal enterprise with updated landscape colors

Here are a few sections with the updated colors.

 
 

sketch library

I consolidated all components and put them in a sketch library so it would make our workflow more efficient. Now, designers can choose specific components from the library and place them into mockups without leaving the screen.

 
 

Outcomes

This project was a year in the making. From creating components, fine-tuning/iterating those components, testing colors on light and dark mode, designing new icons, and collaborating with engineering to introduce a new design system to Zignal Labs - it was quite the year, but it was well worth it in the end. Our new Landscape colors are now live on the Zignal Labs Enterprise platform as of February 2018.