This case study details our update to the design system documentation, enhancing collaboration across design teams and product management. We introduced a robust repository featuring systematically organized Adobe XD files on Confluence, along with shared libraries available to all designers. These libraries include pre-defined colors, text styles, and components, promoting consistency and efficiency.

Scope of Work

Client Needs

1. How do we transition to new platform after X amount of time with our previous app?

2. What are the updated steps to complete my tasks? Does it align with our previous process? Will it be easy to adopt?

3. Consistency is key to easy to understand UI 

Employee Support

1. How do we communicate updates going across the different teams of each app in our platform?

2. What is the difference between what we have and what this will provide? 

3. How will this improve our workflow today?

Business Initiatives

1. Reduce legacy and partner apps into one platform

2. Create more consistent user experiences in new platform

3. Easier ways to communicate updates across teams

Solutions

Platform Audit

What is our most pressing customer feedback?

1. Identifying our most common widget visualizations that do not appear consistent.

2. Inspected each widget across the platform, seperately, to take note of the different ways each of our app-based development teams coded the visualizations.

3. Before we brought in development, we worked with product to align the visualization requirements for each application.

4. Designers sifted through our implemented designs to align on what has been previously sent to development.

Synthesizing Before & After Feedback

Show case teams implementing components to fit their app's needs instead of something consistent to fit the platform.

The after shows more consistency in different banners they use to deliver messaging.

Interface Interactions

These components represent our first attempt to systematize the ways we message in the unified app, including when why and to whom.

Our goal is to help teams understand better the limitations and potiential screens, surfaces, and message types available to them, and should also reduce the manual work of figuring out what to do and when.

Empathizing with Users

"As a client, I want to be informed of critical information that I need to know so that I can complete an action."

Set up a few simple mock ups of the usecases in the UI. To make less distracting with content, they chose to use a "wireframe blue" to simplify the design to focus on the component use-case.

We created examples of each component mentioned for messaging.

Results

Guidlines

What our Style Guide defined for components

• Component

• Type

• Placement/Surface

• Content

• Guidlines/Purpose

• Interaction

• How we intend to measure interactions

Key Findings

Better collaboration

Having a robust design token, component and pattern repository, featuring systematically organized XD files helped align our teams on source of truth decisions. 

More Efficiency

The update streamlined design operations and strengthened project management by providing clear, cohesive guidelines tailored to the evolving needs of our stakeholders

Less Meetings

Having this in place eliminated the need for small meetings in where teams would go over previously created design guidelines.