Experience Guide

Our objective was to create a system of reusable components in a single code base to increase speed, boost collaboration and allow more focus on strategic work. This system came to life as an experience guide for our designers and developers to leverage in their daily work.

User need

Designers and Developers need a way to move faster, share cross-product, and focus their energy mainly on strategic efforts.

My role

Lead designer, Workshop facilitator, Visual designer

Step 1 : Gather content

To get started, we needed a list of shared components. This was a collaborative effort to document usage, write copy and create reusable pieces to copy+paste in Sketch and Photoshop. We looked to Atomic Design for inspiration in structuring our patterns.

Elements

The most basic building blocks which can’t be broken down further without losing their meaning. Ex: Color, Typography, Iconography, Motion

Compounds

Composed of multiple Elements, and iterations can be created by combining Elements with real user need. Ex: Date Picker, Toggle, Slider, Search

Pages

Collections of Compounds functioning as a cohesive unit to make a complete workflow. Ex: Forms, Step Process, Getting Started

We layered our resources with topics members of the team specialized in such as accessibility (pictured below), motion design and design principles.

Step 2 : Foster collaboration

By creating a system to grow our patterns and create iterations, the team was able to feel ownership which boosted adoption and morale. There can be resistance and the feeling of confinement when a component library is first introduced, but it can empower deeper creativity when the designer is free to spend more time understanding the user and iterating on larger UX strategy.

Our experience fundamentals is a great example of the team collaborating and owning the content. We collaborated in Mural to compose, prioritize and align our focus around these principles.

Design patterns set the stage for larger code sharing across products, which reduced technical overhead. I worked with design leadership to create a process for iterating and contributing ideas and new patterns to our resources. Ask me about it if you’re curious!

Step 3 : Align with the IBM brand

IBM released an update to Carbon Design System after we started using our system. I guided our team through adoption of this new design language in our key product experiences. I helped the team overcome technical barriers and taught designers to use the new design system. Check out these projects to see Carbon in the products I lead: