Pipeline Design System

Challenge

OPIS (Oil Price Information Service) is a company that produces a wide range of products and services. However, the company's various product lines had evolved independently, leading to a lack of consistency in design and user experience. This was causing confusion for customers and making it difficult for the company to maintain and update its products.

Outcome

To address the problem, the team decided to create a design system for OPIS. Pipeline Design System is a collection of reusable components, documentation, and design tokens that provide a consistent look and feel across all of a company's products and streamline collaboration across teams.

My Role

Lead Designer

Timeline

9 month

The process

The team first conducted a thorough analysis of OPIS's existing product lines, identifying common patterns and elements. Then worked on developing a set of design guidelines and components that could be used across all of the company's products. This included creating a color palette, a typography system, and a library of UI components. In addition, established a pattern library and style guide website (on Zeroheight) to help ensure consistency across all products.

Samples of different products within OPIS before Design System

Old IHS Markit UI kit

The previous IHS Markit UI kit had limited color choices, text formatting options, and available components. It also failed to meet accessibility standards as identified during the audit.

I worked on extending the OPIS color system to include options for shades and tints.

Extending the OPIS color system based on IHS branding

The previous IHS Markit UI kit had limited color choices, text formatting options, and available components. It also failed to meet accessibility standards as identified during the audit.

I worked on extending the OPIS color system to include options for shades and tints.

Iconography

I developed custom icons that respond to the industry specifics.

Buttons

When designing buttons, I accounted for different button states to provide clear feedback to users, as well as designing buttons with several instances and styles to cater to different contexts and visual requirements within a user interface across many products.

Organizing the Content

Like every product, the design system website needed some information architecture to organize documentation. We utilized Zeroheight for documenting our design system, serving as a reliable source of design system documentation. This led to 5 main sections of information architecture.

Getting Started
Includes general information about design system for developers and designers.

‍Foundations
‍Includes structural guidelines on the layout and navigation

‍Styles
‍Includes foundational design tokens, etc

‍Component Library
‍Buttons, Input Fields, Dropdowns, etc.

Resources
Design Tokens & Downloads

The result

The implementation of the Pipeline Design System yielded significant improvements for OPIS. This has streamlined collaboration, reduced customer confusion, and expedited development processes. Overall, the Pipeline Design System successfully harmonized the user experience, enhanced efficiency, and strengthened brand identity across OPIS products.

Next Case Study