DCP Midstream


Design System

Project_Header_BKGD.png
 

The Problem:
DCP Midstream’s Energy Lab department, established in 2017 to lead digital transformation, needed a complete overhaul of its design processes. By January 2019, the design department faced significant challenges: it struggled with a lack of consistency, a diminished team reduced to just one member, and disorganized practices. Previous designers had used various tools and styles, resulting in inconsistent products and chaotic files, which hindered efficiency and product coherence. We were brought in to standardize and innovate their design approach, driving efficiency and cohesion across digital products.

 

Our Role:

Strategy

Design Ops Implementation

Team Assembly and Tool Standardization

Development of a Cohesive Design System

Creation of Motion Design Guidelines

 
 

The Solution:
We implemented a comprehensive strategy as the first step in getting DCPs digital transformation back on track:

  • Design Ops: Implemented design operations to structure DCPs approach to design processes, team management, and tools to increase the value of the design teams outputs.

  • Design System: We established a unified Design System, creating reusable colors, styles, and components. This system was designed for easy sharing among team members, ensuring consistency and enabling centralized updates across all design elements.

  • Motion Design Guidelines: We also developed a detailed motion design guide. This allowed us to effectively communicate intended motion designs to developers without embedding them in every prototype, thus streamlining the development process.

 
 
FATE_BG_RGB_darkgrey.png
 
 

Usage Guidelines for both Desktop and Mobile

Design Guidelines for both Desktop and Mobile

 

Desktop Guidelines—Global Elements

Mobile Guidelines—Global Elements

 

Desktop Guidelines—Light Mode UI Elements

Mobile Guidelines—Light Mode UI Elements

 

Desktop Guidelines—Dark Mode UI Elements

Mobile Guidelines—Dark Mode UI Elements

 
 
FATE_BG_RGB_Grey.png
 

Motion Design Guidelines:

 
FATE_BG_RGB_darkgrey.png
 

Product Load Demo

Date Picker Demo

Card Swipe Demo

Segmented Controls Demo

Card Expansion Demo

Top Sheet Demo

Voice-To-Text Demo

Dark Mode Toggle Demo

FATE_BG_RGB_Grey.png
 
 

The Results:

  • Increased Efficiency: The Design System was implemented across twelve digital prodcuts, significantly improving efficiency of UX and UI design across the team.

  • Increased Product Adoption: It fostered a cohesive product ecosystem and established familiar patterns for users significantly increasing product adoption.

  • Enhanced Product Performance leading to:

    • A data visualization dashboard that significantly reduced safety incidents, surpassing industry standards.

    • A mobile app that streamlined field operations, increasing productivity.

    • A training platform that standardized procedures and cut onboarding time in half.

    • A mobile reporting app that reduced environmental event response time by 38%, minimizing emissions and facilitating direct, rapid reporting to regulatory agencies.

 
 
FATE_BG_RGB_darkgrey.png
 
 

Explore Other DCP Midstream Projects:

 
FATE_BG_BlueGrey_RGB.png