Delta Dental Emerald Design System 2021

Design system genesis

Design Systems

Strategy

Design Thinking

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 adopted a user-centered design approach, focusing on understanding the needs of both users and developers.

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

Discovery

We created a core group that audited the current designs to identify patterns.
‍
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

Component and Pattern Audits: Review of the current designs and other patternsSynthesizing research findings to pinpoint key inconsistencies, deficits, and challenges

002

User Needs: Conducting user research to identify pain points and requirements

003

Defining Core Issues: Synthesizing research findings to pinpoint key inconsistencies, deficits, and challenges

‍

Define / Design

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

We also needed to incorporate the larger team into the process at this point.

Our designers are all at different levels. Some have never had a design system to use and we needed to train them up on everything.

The goal of the trainings was to meet people where they were, not where we wanted or expected them to be.

We sequenced the events as follows:

001

Phase 1: Audit all systems and features, align with previous component audit

002

Phase 2: Prioritized creating a library of standardized components

003

Phase 3: Focus on streamlining development processes and enhancing adoption through documentation and education

003

Phase 3: Developed high-fidelity wireframes to visualize the Design System. then socialize, test and repeat

‍

Key Features

Our designers are all at different levels. Some have never had a design system to use and we needed to train them up on everything.

The goal of the trainings was to meet people where they were, not where we wanted or expected them to be.

We sequenced the events as follows:

001

Standardized UI Components: Created a library of reusable components to ensure consistency & the patterns around those components

002

Enhanced Developer Tools: Provid guidelines, trainings, and tools to streamline development processes, including a bootstrap storybook

003

Simplified guidelines: Refined the design guidelines, to unify all LOBs to have a single framework

‍

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

1000+

Components With
Patterns

100%

Approval Rating
From The Team

30%

Increase In Velocity Of Design

Single Source
Of Truth

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?