Design system alignment

Overview

A services management product needed to align with a new design system and branding. Through the context of a UX vision and journey map, designers propose a 4-step plan to iteratively migrate and launch components from a new design system.

The multi-step plan for migrating from one design system to another

Problem statement

Plan the product design and communication strategy for transitioning to a new look & feel.

Users & audience

Director of Public Safety - IT Director/Assistant Director - Communications/Radio system manager - Radio communications/technician - Police/Fire Chief - Procurement manager/agent - CAD manager

Roles & responsibilities

As the UX designer, my primary role was to articulate the plan to both leadership and guide customer communications.

Scope & constraints

Partners were in Poland constraining collaboration time. Product owner was historically resistant to adapting the UI.

Component style migration and corresponding customer response

Process

These types of projects start with a lot of conversations with stakeholders to understand and document the requirements and expectations. The plan was an evolution. The program manager wanted to see the vision before knowing the plan.

I prepared vision concepts using the new design system for the high traffic applications, Dashboard and Order history while the UI designer began translating the CSS from one design system to another. Visions were approved and I moved to the communication plan.

Customers do not like when we make changes without explanation or support. Leveraging the “What’s new” experience, we briefly explained the plan to move to a new UI. A simple visual would work for steps 1 through 3 where the updates are primarily aesthetic. In steps 4 and 5, where components are changing, we should expect a drop in customer satisfaction - this could be confusion. To account for the change, I recommended an option for a more interactive stepped walkthrough experience.

Concept for communicating the change to customers

Next, the UI designer provided several examples for how individual components will transition. I used this annexed library to design interim-state screens for the dashboard and order history apps. Paired with a simple Journey map to express hypothesized customer feedback for each phase, the plan and presentation were complete.

Outcomes & lessons learned

Steps 1 through 3 were executed flawlessly and customer feedback was positive. Most interactive components in step 4 had CSS applied with the exception of the more complex tables and cards. Step 5 became a different project.