Taking a Unified UX Design System Approach 

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. A UX design system, however,  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 can also include documented best practices so that designers and developers can easily contribute to your guidelines, ensuring they mature with your organization.

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
• Access to new technologies

When you examine the complexities inherent to building or growing any digital product, you see how quickly inconsistency, inefficiency, and design debt can creep in. To avoid these pitfalls, a well-documented UX design system is one of the best investments you can make. Not only will it provide a better, more consistent user experience, it will also streamline workflows for your design and development teams.

Companies that adopt a UX design system approach to projects save between 40 and 81 percent of developers’ time compared to building from scratch. If you’re in the process of developing a new application or updating an existing legacy software, consider taking a UX design system approach.

Here are just some of the benefits of UX design system approach:

A UX design system provides designers with a visual library and guidance so that every step of the user journey is orchestrated to deliver a consistent user experience. When navigation, buttons, and interfaces are consistent, users can better navigate the product and complete tasks. Consistency is especially important to users accessing the same website or application from different devices, like smartphones, tablets, and different internet browsers.

Since even one bad experience is enough to drive a customer away, it is crucial for companies to maintain and improve exceptional UX.  

A UX design system makes code and design reusable, thus making it more efficient and easier to scale. This, in turn, increases the speed of development teams working on software and reduces their overall effort. 

A UX design system simplifies the visualization of ideas. When designers no longer have to design everything from scratch, they are able to create mock-ups in a fraction of the time. And product teams know exactly how components or new features should look. As a result, you unleash creativity because time can be spent on bigger, more strategic design issues.

A UX design system increases the pace of innovation because it contains pre-coded components. Developers no longer waste valuable time working on problems that have already been solved. Instead, they can reallocate their time to solving larger problems.

A UX design system accelerates production an average of 2x to 3x. A visual library and guidelines ensures teams design, build, and develop the UI without starting from scratch. Because teams are able to more quickly iterate on multiple platforms, development costs are also reduced.

A UX design system reduces the effort required to iterate. If you want to experiment with new approaches to the UI or changes to a UX flow, your developers don’t need to write hundreds of lines of code. Instead, they can accomplish big changes with as little as a few characters.

A UX design system incorporates the best UI practices from previous projects. Before a software project even gets started, someone has already tried various approaches that are potential sources of risk. They’ve resolved them, and this information has been assimilated into the UX design system.

A UX design system ensures that a lot of backend work is already completed before you do any coding. Debt is acquired by coding for the short-term and using non-reusable and inconsistent design styles. As debt accumulates, it slows growth. A UX design system enables you to freely expand and evolve your application while avoiding this debt.

A UX design system streamlines the number of boxes to check during QA reviews. If you’ve ever done an audit and discovered dozens of gradients of gray or button sizes, then you understand how inconsistent and difficult to maintain your design has become. A UX design system ensures uniformity and avoids wasting valuable review time.

A UX design system includes reusable code for highly technical components. UI has become extremely complex, so it’s impossible for developers to specialize in everything. Rather than have a project’s development be stymied due to lack of skilled developers, you can hire full stack developers instead.

A UX design system standardizes accessibility at the component level. Today, universal access to web-based products is essential. It’s not only important for people who have physical and mental disabilities, but also for those with special requirements, like broadband connections and older mobile devices. If you figure out the coding and design to address these issues at the component level, then you don’t have to figure it out again when coding a screen by hand.

A UX design system frees up time and resources for creating a UI that better meets user needs. It’s important to analyze the users’ needs and concerns with a product as early as possible. Incorporating this feedback into reusable components and guidelines means that your product is always solving the right problems for target users.

Constant innovation and improving the user experience are essential aspects of setting a brand apart from the competition. Brands who have created a design system in their workflow can increase speed, inspiration and efficiency among teams.

Software products are increasingly complex because they’re becoming more reliant on shared infrastructure, security, and identity management. You may have dedicated internal teams who manage these different components. But what about the larger aspects of the product that holds it all together? Who ensures that consistent principles are used to govern them, and does your company have documentation that lays everything out? 

If you don’t have a documented, unified UX design system to establish baseline templates, components, and rules for your product, then your team is going to be rebuilding pages or components with 100% effort each time. While there are numerous reasons to implement a UX design system, this section will help you identify some of the biggest indicators that it’s time for a UX design system. 

Constraints posed by outdated applications can challenge developers and designers. While adopting a UX design system introduces yet another constraint into the process, it’s a positive one. Ultimately, a design system enables your team to shift their time from managing  small details to the bigger picture and the broader user experience initiatives. 

Are your designers and developers recreating the same page over and over again? Design and development teams can spend too much time rebuilding modules when they should be reusing designs and code. With a UX design system, teams can efficiently select components to repurpose, dramatically speeding up time-to-market.

Multiple team dependencies can slow down the production cycle. A UX design system ensures your developers are able to  work on multiple deliverables in tandem without wasting time duplicating anyone’s previous work.

An interface that’s inconsistent in both functionality and appearance delivers a poor user experience. When users get frustrated, they’ll either give up or get customer support involved. Unifying the user experience with a UX design system ensures your customers are familiar with your UI patterns because they have seen it all before. 

If you have separate, uncoordinated web and mobile products, your development work will be costly. Plus, your customer experience will be cumbersome. A UX design system can streamline the design and development cycles while improving the user experience across devices.

Oftentimes, accessibility problems are ignored because fixing them is deemed too costly. Rather than everyone on your product team individually fixing the same accessibility problems, a UX design system ensures accessible components can be multiplied and integrated at scale, saving time and money.

Tiny changes to your product build up over time. A new shade of blue, a different line thickness—although they seem small and add little value to your product, they create design debt and bloated code. When you build from scratch instead of repurpose, bugs and errors multiply across your design and development process. A UX design system can help.

Many development teams just don’t have the time or resources to fully update their solution to a new UI technology. Consequently, it’s not uncommon to find just portions of an application done in a particular UI. In the long run companies end up with solutions with many different UI technologies.

UI in today’s digital solutions is very complex and takes specialized skills. If you don’t have specialized people on your team—or if you want your developers to work as “full stack” developers—a UX design system with reusable code will reduce the skill level required to deliver high-quality user interfaces.

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 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. But how can you create a UX design system? Every project is unique, so there’s never a one-size-fits-all solution. However, let’s explore UX design systems and how to set one up in just 10 steps.

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 

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.   

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.

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.

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).

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. 

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.

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. 

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. 

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. 

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.