Setup the foundations of the system

Create an eco-system that is flexible, well-defined, well-documented (artboard sizes, page structures, spacing, and etc.) where each component can fit right in place and work without adjustments

Define interfaces and interactions

Create pixel-perfect interface and interaction library with the smart symbol and design token, including documentation for designers and engineers to use.

Collaborate with teams

Working inside the Experience Design Organization to support them and make sure they have everything they need to make the design process as easy and smooth as it can be

Hi Service Portal is the collection of products that come together into one product. Some were legacy designs from 20 years ago, and some are very new.

We need to unify the experience as one enterprise-level entity. By creating a design library for designers and design token for engineers, it creates a smoother and faster workflow for them.

We started with research inside the design organization to see what artboard sizes, spacings, and font sizes they are using. Especially, the grid system that designers misunderstood how it behaved for years before this design system project started.

We discussed with the engineering organizations to see what is the technology they are using for the structure of the products.

We found that we misunderstood the grid system and how it behaved. The engineering team excluded the side navigation from the grid system, while design files are including it.

We set up the grid system based on the engineering team’s feedback to the actual structure of the product, which is Bootstrap.

The variety of artboard sizes can create friction on reusing components from other designers and design libraries.

We set up the standard artboard sizes, and gutters to improve the design process.

We went deeper into each component and found there are 45 variations in spacing alone. 

To reduce the number of variations, we decided to set the spacing base on 15px from Bootstrap, and this clears up the cognitive load from the designer’s mind.

Even if the designer made a mistake and didn’t deliver a pixel-perfect mockup engineer team can guess how much spacing designer intended for it to be.

To optimize the number of variations across products, we put efforts cleaning up many components and built a design library, and design tokens for designers and engineers to be able to reuse.

We documented every single component on how they should behave, where can they be used, and how to use it with a proper UX pattern.

Collaborate with other designers to create new features. As a design system advocate, I made sure we reuse existing UX patterns and components in design library.

We documented and put the feature back into the design system to reuse again in other products or features.

I set up the smart symbols for designers to make their ideas come to life quicker, iterate faster, deliver with ease. These components are baked-in to the design token and engineers can put it together in an instant.