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

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