X

This site uses cookies and by using the site you are consenting to this. We utilize cookies to optimize our brand’s web presence and website experience. To learn more about cookies, click here to read our privacy statement.

3 Common Challenges When Implementing a Design System

Author: Sean Norton Posted In: User Experience

When working with clients, I often see them facing a similar situation: A lack of a consistent design system that is implemented and used across the design organization. This causes a challenge for me, the consultant, in proving why a design system is necessary and justified. Recently, I had a client struggling with inconsistent designs and non-effective handoff between designers. This left the team with an ad-hoc design system – something that ultimately leads to wasted time, inefficiencies, and inconsistencies.

Let's take a look at the three challenges I faced on a recent project, and how I was able to affect change when it comes to implementing a design system.

Project Background

To begin the project, the client asked me to assist with designing webpages for their e-commerce website, as they were already in process of a redesign. I immediately noticed certain elements were inconsistent between designs. But given the fast-approaching deadline, and due to a lack of effective handoff between the previous UX designer and me, I was forced into a tricky situation: Create many designs within a short period of time, and make sure all were consistent and polished.

Challenge 1: Ensuring Proper Hand-off and Knowledge Share

What I didn’t know was that the client already had a design system in place. Due to a bad handoff, I was not told about it, and it was not being put to use in the designs that I was asked to complete. I was left with the task of creating a design system to hold my work to. Luckily, I had just completed Figma Academy, which included in-depth and advanced lessons on color systems, base components, component management, color systems, and typography.  Though I have been using Figma for a few years, Figma Academy gave me a deeper understanding of the tool that I was so familiar with.

 

Challenge 2: Creating the Framework that Fits the Project

With this under my belt, I was able to create a simple framework for my work. The main aspects of this ad-hoc design system that needed to be determined were:

  • Typography
  • Colors
  • Grids and Spacing
  • Icons
  • Form Components

A number of these elements were based on the client’s official marketing documents, so I was able to set this design system up in a way that was consistent with previously existing styles and elements. For each main aspect of the design system, I created a page for the information to live on so that it could be accessed by developers and designers alike. For each element of the design system that would be re-used on a “global” level, I made sure to turn them into components and styles in the design system’s library so they could easily be accessed and applied to different projects. I created designs that were consistent with their branding, consistent between designs, and ready to be handed off to developers in time for the website’s launch.

Challenge 3: Dispelling Misconceptions Around Design Systems

Some may feel a design system might limit creativity or work. Having set styles, colors, fonts, and rules for your designs can sound like there is no room for exploration or creativity. But the reality is quite the opposite:

  1. Design systems give you the building blocks to create larger elements for future projects such as forms, toasts, tables, cards, and content areas.
  2. Design systems ground your work in consistency. The work that had been done before had inconsistent spacing between elements and colors that were used without purpose or direction. By using a coherent design system, designs can feel more professional and consistent, and stay in-line with branding.
  3. Design systems give you the consistent tools to problem solve, experiment and test with, and help answer “how” and “why” a solution can work.

 

 

Ultimately, giving yourself the appropriate tools with which to work will help you design with greater ease and control. These “limitations” help to breed creativity and consistency that lead to greater design work.