Design Systems

Digital products are having their “assembly line” moment—here’s how to stay relevant

4 min read
Nick Hahn
  •  May 5, 2020
Link copied to clipboard

Let’s talk about you a bit, shall we? You’re a UX designer or front-end developer, you’ve spent years honing your chops, you’re on a fast moving product team. Perhaps your team even uses a component library of sorts, you might even call it a “design system.” But, you see, component libraries and Storybooks filled with a few components just don’t cut it anymore. They’re essentially just Lego bricks lacking any clear instructions. They don’t allow your company to ship truly consistent user experiences no matter which team is building it.

The way you build UIs is stuck in the past

Each UI is essentially “hand-crafted”, with designers trying to improve specific aspects without a clearly-defined scope (usually caused by silos between design and product teams) and undocumented institutional knowledge from designers who built related UIs previously. Every new UI or update is an inconsistent offshoot of what’s come before.

This causes massive inefficiencies and very low consistency in the user’s experiences while trying to complete a single job. It also makes it nearly impossible to test and improve quality over time, especially at scale. For developers, it can be massively frustrating to make seemingly (and most likely) arbitrary changes to UI components that eat up significant time.

And design systems are the ticket to the future

After two years leading the IBM Cloud team’s customization and deployment of the Carbon Design System, I’m now at InVision consulting with some of the world’s most advanced design system teams. In my short time here, I’ve realized that the vast majority of companies are building UIs the same way cars were built before Henry Ford’s assembly line.

The newest evolution of design systems, however, offer the chance to jump digital production lines 100 years into the future. Design systems do a whole lot more than common component libraries. They act as a central source for company-wide and department-level governance, synced tokens from design through production code, a clear contribution model, and a centralized, easy-to-update “monument site” housing all this content together.

Like modern car company’s design and development teams, teams will use these reusable parts to quickly build end-to-end experiences, test results, iterating, and then ship a finished unit. These can then be replicated with high levels of quality, thousands of times. This will transform not only basic components like buttons and dropdowns, but much more complex entities that string together full end-to-end user flows. You’ll no longer need to build that data table, configuration page, or registration experience from scratch.

It’s here: The new InVision DSM.

Start, craft, and evangelize your design system with an improved onboarding experience and more flexible documentation on the web.

Get early access

 

But we have to accept that the world of design is changing

Luckily, design system technology and methods are out there and ready to use today. But leveraging them takes a much larger leap in how your teams work together and even the nature of the work you do.

This involves designers and developers evolving from primarily focusing on UI and page-level design. Especially for designers, my rule of thumb is that if you spend more than 50% of your time directly on UI layout design (in Sketch, XD, etc.) then you’re not spending enough time interviewing users, aligning stakeholders, and ensuring you’re contributing your knowledge back to the design system. This will be the biggest change to the role of the designer since the “UX revolution” from 15 years ago.

This isn’t the first time the role of designers has evolved as new technologies have been introduced. The birth of marketing needed the art director, graphic designers brought brands alive, UI designers took the world onto the web, and UX designers brought the app generation to life. Now a new breed of designer is needed to scale our craft, elevating quality and consistency across entire enterprises: Enter the design systems designer.

 

And this may be the first time we have the chance to get ahead of the revolution and be part of the system. If you’re a designer or developer who wants to have an impact on the burgeoning design systems movement, here’s what you can do— right now in your job—to help steer the future.

What you can do today to get ahead of this revolution:

1. Brush up on the theory behind design systems.

I’ve only skimmed the surface on the benefits of design systems. There are so many great resources sprouting up. Here are some of the best I’ve come across:

There are many paths to a design system, but luckily you don’t have to figure it out all on your own. We’ve got a handbook just for this:

2. Be part of the system—or help get it started!

If your team has a component library or a budding design system, it’s your responsibility to not just understand how your team’s design system works, but also know how you should be contributing to it. Design systems can only succeed if all designers and developers in an organization use them and help make them grow to meet all of your user’s needs.

Even if a central team controls the governance of the system, every consumer of the system is also a contributor. Many times, a system doesn’t work when the users don’t feel like they have a level of ownership or influence over them. So, instead of spending time fretting over design details, refocus your energies on contributing to the end-to-end user flows that help your organization’s design system get off the ground. (A lot of digital ink has been used on this topic.)

3. Use design systems as a topic to ensure that you are an equal-member of the cross-functional product team

Sometimes it can be hard to be in the room where it happens (it being those high level strategy decisions that come rolling down to you). Depending on the design maturity of your company, design and front-end-development may not be invited to strategic and/or product management discussions.

I’ve overcome this in the past by getting management to see that we can speak the language of business and pitched the benefits design systems will have to our business. There are cases of design systems increasing the product development efficiency and efficacy by 25% and who doesn’t love making more things for less money?

The product teams I’ve coached saw this design system revolution as a huge benefit to their work, not just the companies they work for. You’ll no longer have to fight tooth-and-nail for every little part of the UI. Core decisions like form layouts, configuration pages, common page templates can be standardized. This frees you up to spend more time with customers, your business leaders, and co-creating with your developer/designer partners. You’ll have that single source of UI truth you’ve always been looking for.

With design systems, we’re moving from Model T (Ford 1920s) to Model S (Tesla 2020s). The fun part is, no one has figured it all out yet, so you can get in early and be part of this product design revolution.

Collaborate in real time on a digital whiteboard