Emerald Design

Delta Dental's New Design System

Project Overview

Client: Delta Dental

Duration: Ongoing

Team: 4 UX Designers, 2 UX Researchers, 5 Developers, 1 Project Managers, 3 UX Designers, and myself

Objective: Develop a comprehensive Design System to standardize UI components, set usage standards, streamline development processes, and ensure a cohesive brand experience across all Delta Dental digital platforms.

The Challenge

Delta Dental faced inconsistencies in their digital user interfaces, leading to inefficiencies in development and a fragmented user experience.

Our goal was to create a unified Design System that would enhance consistency, improve developer productivity, and provide a better user experience.

The Approach

We had just started the transition of the platform to React. During that phase we did not make any major updates, but focused on parity for the transition. That way we could side step any confusion.

We wanted to make sure that we were holistically looking at the all LOBs, all breakpoints, all dev assets, basically everything. We had to plan out everything to ensure we were accounting for all connections, dependencies, and anything else that may come up.

Our process involved audits, defining core issues, ideating guidelines and solutions, prototyping, and testing.

Discovery

We created a core working group that audited the current designs to identify patterns.

We also reviewed the live site, as well as the Dev story books.

Basically we looked everywhere to gather everything.

A governance group was overseeing outputs, and was consulting at this point.

We started with comprehensive research to understand the current state and gather insights from users and developers.

We sent out a survey to the dev team to understand what their needs and limitations are. We then conducted follow-up interviews with selected participants to delve deeper into specific issues.

We settled on the following items.

001
Defining Core Issues: Synthesizing research findings to pinpoint key inconsistencies and challenges
002
Strategic Vision & Execution: Roadmap planning, negotiating MVP, and setting clear metrics, OKRs, and expectations
003
Ideating Solutions: Brainstorming and conceptualizing early potential solutions, guidelines, and other outputs through design sprints
004
Component and Pattern Audit: Review of the current designs and other patterns

Define / Design

Using the insights gathered, we organized a design sprint to map out the primary pain points and opportunities for improvement.

I collaborated with the governance team and the cross-functional teams, to ensure the design system supports various platforms and use cases.

From there we had roadmapping workshops where we discussed trade-offs, managed interdependencies, and resolved or identified potential conflicts.

We also needed to incorporate the larger team into the process at this point. Our designers, business, and dev are all at different levels.

Some employees have never had a design system to use and would need training.

Sequence of process

001
Phase 1: Prioritized creating a library of standardized components
002
Phase 2: Focus on roadmapping and planning
003
Phase 3: Developed high-fidelity wireframes to visualize the Design System MVP
004
Phase 4: Socialize, test and repeat

We ended up with the following for the first round of the system.

Key Features

001
Standardized UI Components: Created a library of reusable components to ensure consistency & the patterns around those components
002
Enhanced Developer Tools: Provided guidelines and tools to streamline development processes, including a bootstrap storybook
003
Simplified guidelines: We refined the design guidelines, to unify all of the LOBs to have a single set to work from
1000+
Components With
Patterns
100%
Approval Rating
From The Team
30%
Increase In Velocity Of Design
01
Single Source
Of Truth

Conclusion & Next Steps

The Design System successfully addressed the identified issues, enhancing consistency and efficiency.

Positive feedback from users and developers confirmed the effectiveness of our approach.

Future plan

001
Ongoing Data & Tracking: Implement a comprehensive system to track components and feedback for continuous improvement
002
Refinement of Components: Regularly update the Design System to include new components and improvements based on user and developer feedback
003
Enhanced Feedback Loops: Facilitate continuous feedback between users, developers, and stakeholders to ensure the Design System evolves with their needs

Let's see how I
can help you

I was able to help Delta Dental


I helped to integrate the various Delta Dental Platforms into a singular experience for our Dental Providers and Patients to connect and share critical information. What can I do for you?

001
Design
Template image

"Their strategic insights made Dreamforce looked & worked better."

Jacinda Perez
PM Salesforce
002
Strategy, Design
Template image

"He always brought good ideas and a collaborative spirit."

Samantha Carson
Designer Manager, Densu
003
Strategy, Design, Research
Template image

"He was a dream to work with, i miss him!"

Jessica Hampton
Content & Branding, Wonolo
004
Branding
Template image

"Jon always provided us professional work."

Marcus Johnson
Fullstack Dev, Densu