Adoption experience design system
Optimizing development consistency.
Role
Product designer
Team
Adoption experience
Duration
8+ weeks
Tools
Figma, HTML, CSS, WalkMe
TL;DR
Our adoption experiences across internal applications was disjointed, while our development team struggled to meet a unified visual design standard set by leadership and consistently and effectively ship deliverables across the applications our digital adoption platform supported. I was entrusted to lead the efforts in designing a unified design system with easy-to-follow style guides to support our developers.
The challenge: unification across systems
Our adoption experience spanned across a large spectrum of applications across the organization. The design system needed to meet the unique requirement of "unifying across a multitude of systems".
Side quest challenge:
Design agility was needed, where the system needed to be designed in parallel of implementation to display immediate impact to our development team in remediating ongoing user frustrations. In short, we had to build the plane while flying it.
Plan & Ideate
We adopted the atomic design approach for our adoption experience platform and began with an itemization of active UI components, starting from the atomic level all the way up to an organism level. Then prioritized organisms based off of criticality (i.e. prioritized the design efforts to focus on most commonly delivered components to least delivered).
With the itemized inventory of all components, we ran workshops to converge on component variations that were required for our system.
Design
As stated previously, our style guide had to be adopted by our developers easily and quickly. We planned our style guide to be built in phases (is still ongoing) where core components would be finished first and made aware to our developers to adhere, adopt, and immediately reflect results.
Typography, color, and components
Our system opted for two standards, a ServiceNow native and non-native standard. Our intention was to adhere to our brand identity within ServiceNow applications, but also account for non-ServiceNow properties.
Retaining our brand identity was crucial, immediate brand recognition allowed us to set our adoption experience apart from native experiences and differentiate internal guidance/policy communication.
Our spectrum of variants for our adoption experience flows, included, modals, dialogs, tooltips, drawers, etc. The wide pool of variants were aimed to empower product managers with a robust adoption experience toolkit.
Customized HTML & CSS
Out of the box UI components did not meet our design system requirements and called for tailored HTML & CSS to re-structure and stylize the components. I led the efforts in re-creating the HTML structure and mapping out CSS for all of our components.
