The Project

A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.

Working on this project came with a number of organizational and technological challenges. Building a Design System is a great way to enforce consistency throughout an organization.

Throughout the process of building the system, I learned how to better communicate with management, plan, build, and distribute a complete Design System for a corporate global company. 

The Plan

The idea was to build a Design System for designers to reference to create efficiencies and consistency across the .com platform. The goal is to help improve the customer experience by creating a consistent mental model of patterns during the exploration and purchasing experience.

My Role

During the creation of this project I played many roles. First, my role was advocating, creating and promoting the importance of a Design System to the business. Next, I became the lead designer. And now I manage the Design System. During all phases I’ve cross collaborated with global teams, stakeholders and with developers to build and support the components created in the library. 

The Problem

Designers and developers were working from scratch each time a component or page was built. The user interface and user experience was lacking consistency for the user and efficiency for the design and developer team. 

The Solution

Create a Design System to help create efficient builds for the whole team. Design Systems are a references for technically feasible components and patterns that are consistent with the global experience, that can be arranged in many different ways in order to achieve multiple types of layouts. The idea is this will help create a seamless experience for the user, and help build efficiencies for the business. Once created, keep working on improving the experience and components with design iterations based off data.

Typography

Color

Research and Data

In order to understand the customers pain points and solve, the teams utilize google analytics and heat-maps. This helps us understand how the user is interacting with each component, the flow and the funnel at a micro and macro level. We then take these understandings and apply them to design iterations to help update and create better designs for the user. 

Brainstorming and Lo-Fi Wireframes

When starting this project, I wanted to keep in mind that there is currently already a flow and actions on the .com experience that the user is currently interacting with. So I dove into exploring what those actions were. The idea was not to disturb the UI/flows that are working, and to update and understand pain points that are not working and how to solve them. We also wanted to keep in mind that we didn’t want to create a huge step forward, but an iteration approach to be able to slowly introduce new models and patterns globally, so that we weren’t creating new pain points but in fact progressing the interface forward for a better customer experience. This took a lot of collaboration back and forth with different teams from developers, stakeholders, business analysis, designers and content administrators.

Cards at a high level overview.

Product specific cards closer view.

Example of cards used in production.

Example of secondary navigation on desktop.

The secondary navigation mobile version.

Example of a desktop side navigation component to help organize a lot of complex information in the Design System.

The mobile version of the side navigation.

The Final Solution

The Design System has now grown to be a robust source of components and a source of truth for different teams to utilize. It’s now a house for technically feasible, creatively approved collaboration of designs, specs, requirements and components. It houses the building blocks to all things .com, specs, patterns, and helps with creating efficient UI and UX. Designers globally now have a resource to utilize to help them make sure they are staying on brand. It is a source of truth and used on teams throughout the global business. Site architects, developers, stakeholders, designers, content authors all utilize the library in their work flow.

Categories: My designs