Whether they’re using an app to order services or simply doing their jobs, today’s users are savvy consumers of UX. Despite the increased development and support costs required to meet their high expectations, you really can’t afford to ignore them. Ninety percent of users have stopped using an app due to poor performance. Ultimately, inconsistent digital experiences result in lost business and revenue.

So how do you deliver professionally designed intuitive UX without straining your budget and IT resources? Some organizations systematize aspects of their design and development processes by creating rudimentary design systems, which often amount to little more than style guides or pattern libraries. While this is a starting point, it won’t significantly accelerate production.

Ideally, you need a way to drastically increase the pace of innovation across your development and design teams. That’s where a UX design system can help. Let’s explore UX design systems and how to set one up in just 10 steps.

 

Taking a Unified UX Design System Approach 

Typically, when people think about a UX design system, they envision a collection of reusable coded components, rules for design, and UI patterns. In other words, they focus on one aspect of a UX design system. But that’s not the full picture. More broadly, a UX design system encompasses four elements:

  1. A governance process
  2. A methodology for how teams work with the UX design system
  3. A set of UI controls, views, and patterns accessible via an online repository
  4. A UI code library accessible via an online repository

Once it’s completed, a UX design system provides your team with pre-coded components, as well as guidelines that comprise the core foundation for your organization’s design identity. These can both be used repeatedly to build any number of apps. A UX design system also includes documented best practices so that designers and developers can easily contribute to your guidelines, ensuring they mature with your organization.

 

The Impact of a UX Design System 

Why are UX design systems gaining in popularity? Creating a UX design system brings a variety of benefits, including:

  • A consistent user experience across multiple applications and devices (e.g.,  web, mobile, kiosk, instruments)
  • A competitive advantage due to a faster time-to-market on new products and releases
  • Incremental revenues as a result of an extended time in the market

 

10 Steps to Creating a UX Design System

Having a UX design system is a clear advantage for organizations that have already implemented them. In a few years, they’ll be the norm. How can you create a UX design system? Every project is unique, so there’s never a one-size-fits-all solution. However, these steps can point you in the right direction.

 

Audit Your Applications 

The first step in building a UX design system is to do a visual audit of all your digital assets. This will help you gauge the scope of your project as well as where you’ll need to focus your energy. The auditing process is a lot like doing a home inspection. While you’ll find numerous things that need improvement, you’ll also discover a lot that can be salvaged. Here are some examples of what to look for: 

  • Inconsistent user experiences
  • Inefficient user pathways
  • Outdated UI technology
  • Inconsistent design elements
  • Outdated designs

 

Identify the Reusable Views

After you identify which digital assets you’ll be working on, it’s time to pinpoint the core of what needs work. This process starts with picking out the screens/views that users see most often. An enterprise application might have 100 views. However, the bulk of an app typically consists of between eight and 16 views where users spend 80 to 85 percent of their time. With your UX design system, you’ll aim to optimize these views so that they can be reused across all your apps.

 

Define the Core Patterns

Not only do users spend most of their time in a small number of views, they also tend to follow the same behavior patterns. In fact, users spend about 80 percent of their time on the same pathways. For example, when a user logs into their online bank account, they’ll likely check their balance and drill down to the list of their transactions. Defining these core patterns enables you to systematize them, thereby eliminating risk during the implementation phase.

 

Establish Your Guiding UX Design Principles

Every team is composed of individuals with different backgrounds and unique points of view. As a result, they’ll all have their own ideas about how an application should look and feel. So before you go any farther, you need to establish a small set of design principles to ensure your team evaluates your apps through the same lens.

What do UX design principles look like? Here are some potential approaches:

    • Prioritize simplicity. Provide only the navigation, controls, and resources that users need to complete their actions in each view.
    • Imitate real world mental models. Simulate users’ experiences of key source documents, like invoices, purchase requisitions, point of sale (POS), and sales quotes.
    • Focus on business processes. Base your UX design around optimized business processes as opposed to operating system conventions.
    • Elevate personalization. Allow users to tailor their experiences to match their needs and optimize efficiency.
    • Deliver a ”consumer grade” experience. Define the elements that comprise an elegant consumer grade application experience, and then design accordingly.

 

Design Core Reusable Views and Validate with Users

Now it’s time to get to work designing the core eight to 16 views according to your UX design principles. After the first designs are ready, hand them over to a small group of users for feedback. Then, design another iteration. This process should happen every couple weeks until a final design is reached. Note that this is not formal usability testing. Right now, your goal is simply to validate the page elements on each view (e.g., where a user’s login name appears, where buttons are located).

Define UI Panels and Undertake a Responsive Design Cycle

In this step, you will segment out the UI of each view into its reusable panels (i.e., header, sidebar, body). This is like breaking up the page into Lego pieces—it enables you to decide how large each piece should be and how they’ll all fit together. This exercise is also necessary for creating a responsive design for your application.

Essentially, responsive design means defining how each view changes when it is seen by users on various devices. In a responsive design cycle, you decide how to manage each panel. How will panels be stacked? Which ones will be eliminated? This decision process is easy because you’ve already broken up and defined each panel.

 

Create a Baseline UI Design System

Now, it’s time to repeat a similar process with the lower level components, which are the baseline UI design elements. These fundamental building blocks of each view are things like buttons, drop-down menus, and calendar choosers. During this step you will define all of the components you’ll be using on all of your views. You will also specify how they look, including their colors, sizes, typography, icons, etc.

 

Develop a UI Component Code Library

Now that you’ve defined all the components for every view, it’s time for developers to get to work coding each component. One of the biggest goals of creating a UX design system is to accelerate production. By creating a library of pre-coded components, your team only has to solve coding problems one time. When teams don’t have to design, build, and develop the UI from scratch, projects speed up by 40 to 81 percent.

 

Create an End-to-End Working Model

Before finalizing your UX design system, you need to validate it across your entire technology stack. To do so, you will create a small set of views using your newly developed UX design system code library. It should be tested to ensure it’s fully functional and that it’s working front-to-back from: coded UI > internet > services > business logic and analytics > database.

A small fully working end-to-end prototype gives you the freedom to fail early and inexpensively. You also get an opportunity to see real users engage with the software and identify what’s working and what needs tweaking. This is a technical validation, so get your design team, UI developers, and the backend development team involved.

 

Specify, Design, and Develop Additional Production Views

Finally, it’s time to benefit from all your hard work. As your team gets busy building out the rest of your production views, they should use the reusable baseline UI design system code library and predefined UI panels. Ultimately, your new UX design system will speed up the visualization of every view. When designers and developers no longer have to create everything from scratch, they are able to create mock-ups in a fraction of the time. In addition, product teams know exactly how components of new features should look and how to implement them.

 

Conclusion

Creating a UX design system can give your company a competitive edge. While it’s a major undertaking, a UX design system makes it easier to design applications at scale that feature consistent interfaces, aesthetics, and user experiences. Plus, they promote better team collaboration.

You don’t have to do it alone. Catalyst UX can assist you with one, several, or all of these steps. Catalyst UX has developed a proven methodology that blends user research, digital strategy, UX design, and UI development to create completely customized UX design systems. After 650+ projects, we have a finely-tuned process for producing crisp, innovative software experiences.  Contact us today for an exploratory call.