How Design Systems Can Increase Your Organization’s Efficiency and Productivity

I’ve written in the past about how users’ digital experience fits into digital transformation. In this piece, I’m going to approach the topic from a different angle: how back-end design systems that your users never see or know about fit into digital transformation.

If you’ve never heard of design systems, don’t worry: I’ll get to that. I’ll also explain how embracing these systems at your organization can improve the efficiency and productivity of your design and development teams, giving them more bandwidth to pursue more exciting UX initiatives like listening, understanding, and solving user needs and wants.

Background: What Are Design Systems?

Think of design systems as a set of rules and templates for how to run some part of your organization. They’re often used by UX, design, and development teams in the creation of digital products.

Even if you’re not familiar with design systems in a digital products context, you probably use them without realizing it in other parts of your life.

For example, maybe when you plan dinners, you always include a protein, a vegetable, and a grain. Based on your preferences or dietary restrictions, each of those categories may have certain requirements and limitations. But you know that if you include an approved item from each category in your meal, you’ll have a satisfying and nutritious dinner.

Design systems work similarly in the digital world: based on brand guidelines and other rules, teams establish a set of agreed-upon components (CTA buttons, banners, text blocks, etc.) and how they’ll behave in various contexts.

Teams can then efficiently build and iterate on user interfaces (UIs), knowing that whatever they produce will be…

• On brand, consistent, and standardized.
• Tested.
• Responsive or mobile-ready.
• ADA compliant.

What’s more, having the design system means dev teams can focus on binding data rather than designing screens and product teams can focus on user needs instead of designing interfaces.

Like lego bricks, these components can be combined in infinite ways to build screens that serve various user needs – much faster and more efficiently than anyone could build a screen from scratch. Let’s look at an example.

Design Systems in Action

When I joined Apexon, something I noticed in my first project was that the design and development teams were using a lot of creative energy on the design and development of UIs.

Every time we needed a new screen, the design team would build something from scratch, then hand it off to the developers, who had to figure out from scratch how to code it.

Nobody considered this a problem because these teams of creative people were doing creative work. But in reality, spending energy on building UI from scratch took the focus away from delivering or fixing features that customers actually needed.

So I helped them develop a set of UI elements – a toolbox, if you will (see Figure 1). We defined how each of these elements looked, functioned, and behaved so the design team could quickly assemble screens and the developers could pull from a code library as they built.

Figure 1: screenshot of what the design system looks like

This made us much faster at designing and building new screens, but more importantly, it freed up the design and development teams’ time and creative energy for work that added more to the bottom line.

Not only were we able to get prototypes out the door faster, we could also do it more efficiently. We eliminated rework that happened when the development team misinterpreted the design team’s wireframes. This meant we had more time to get user feedback on those prototypes and improve them so they better met users’ needs.

The result: happier end users at go-live.

In other words, making the modest change of introducing a design system helped us improve our UX maturity. Ultimately, it paved the way for us to embrace more advanced UX practices like design sprints, rapid prototyping, and usability testing. All of those have helped us deliver better solutions that lead to higher revenue for our clients.

Implementing Design Systems at Your Organization

Even if you don’t have design and development teams creating lots of digital assets, your organization can likely benefit from design systems.

For example, we worked with an organization that was switching from one project management system to another. Our work directly involved transitioning one particular project, but as we handled that, we documented all the differences between the two platforms and showed the organization how to use that documentation to streamline the conversion of the rest of its projects.

Having a system for moving from one platform to another empowered them to do that necessary but repetitive work more quickly so they could spend their time and creative energy solving more interesting problems.

Generally speaking, if there’s work that takes your team a lot of time but doesn’t add a lot of value to your bottom line, you can probably streamline it with a design system (or automation).

It’s also important to note that creating a design system doesn’t have to mean starting from scratch. In fact, starting from a proven design library like Google’s Material Design is smart because those libraries have already been tested and proven effective by large and small organizations around the world (see Figure 2).

Figure 2: A Google Material Design UI kit for Figma

Design Systems Empower Your Team to Do Its Best Work

Often, conversations about digital transformation focus on specific software, technology, or infrastructure. Notice that I haven’t mentioned any of those – and yet, design systems are part of digital transformation in many organizations.

For true digital transformation to happen, organizations have to also transform the way they operate to eliminate duplicative, repetitive, low-value tasks. Design systems are one way of doing that.

If you find it encouraging that simple, low-cost changes to processes can yield big gains in efficiency and productivity, I’d love to learn more about your current situation. At Apexon, we love helping organizations take stock of where they are today and where they have opportunity to make small changes that can yield big bottom-line improvements. Get in touch!