CL-HeroCaseStudy.png

Design System

 

Design System

Role: UX Architect

Creating a scalable design system with reusable components that can unify the user experience, brand, story, look and feel.

With the initiative to re-brand our corporate sites, I was set out to design a holistic design system and task with designing templates that will accommodate diverse type of content. One of the key challenge of creating the system was to make sure it was guided by a clear standards that is shared between teams including UX, visual content, development.

 
Tracking Excel.jpg

Identify and auditing current sites

 

In order to start assessing the current state for the components, it was important to conduct an audit for all existing ones that are built and are in the pipeline, as well as documenting what they do and where they live.

As the audit was being done, it became obvious that there were different names for same components and variation of components between what the developers were identifying verses the visuals and the UX team. During this process, it was also important to document which components were retired, outdated, missing as well as identifying opportunities for new components that surfaced through series of stakeholder meetings.

 

Realigning the structure

It was crucial to involve everyone who will be using the design system including UX, visual content and development to increase buy-in within the different department. Taking feedback from each team, with the UX team leading the discussion, IA has been realigned to update the latest consensus that the new design system will be incorporating from now on.

 
Component.jpg

Design Process

Applying the atomic design principles, it was important to establish the foundation from colour, typography, iconography, spacing and general interaction first. Then began to detail with competitive analysis of other design systems that were out there, to the latest UI style guide to start designing a source of truth for all components. For the MVP version, the source of truth was kept on AEM(Adobe Experience Manager), as it was utilized throughout different teams and streams for ease of adoption.

Component Track Sheet

Component Track Sheet

As a UX Architect tasked primarily on design system,  I established the overall workflow and organization of the design system, with the goal of having the system be able to adapt and grow. With that in mind, I focused on most viable and key objectives during the design process.

First was to always design with all screen sizes in mind from smallest phone to largest desktop and making sure each component is scaleable. 

Design with intuitiveness in mind for the users and establish rational order that will lead people through the content.

Create components that will work optimally for content and screen size in mind.

Reducing the dense content and create visual hierarchy to lead users through.

Developing templates with feedback from stakeholders was also an important step to continually test and applying components, learning from validation. This lead to enriched user experience and enhanced interaction, creating easy to scan informational stand-alone pages.

Finally, to document the rules, guidelines, best practices, interactions, variations, examples and accessibility guidelines to communicate the usage of each components across different teams.

 
CL-Website.jpg

Result

Through the adoption and utilization of design system within the organization, we were able to dramatically increase effectiveness and efficiency of product development, streamlining design, development and collaboration. It opened new doors for creating a foundation for building agile, usable and accessible streams.

 

Though the system has launched and MVP has been shipped, design system is an ongoing and evolving tool for the organization. The foundation has been laid out so that new releases can be easily adopted into products. Backlogging improvement opportunities, new patterns and components are already being generated to have the team road map them for future development.