UX | User Experience | User Interface
Welcome to Create Impact, a new series from Aviture focused on the topics that inspire our engineers to innovate. In each article, an Aviture team member will take you on a deep dive into a subject they’re passionate about, showing you the thinking behind cutting-edge engineering advances, the latest UX trends, development theories, and other unique topics that enable Aviturians to embrace the Art of the Possible for our clients.
In this post, Frontend Engineer Chris Kollars explores design systems and their importance to creating a cohesive user experience. He explains how to define design systems, how they differ from and interact with component libraries and style guides, and why they are crucial for unifying your team around brand-based best practices and experiences.
Humor me for a moment and pull up your preferred music player in a web browser. It doesn’t matter if it’s Spotify or Apple Music or Amazon, whatever.
Once you have the music player open, open the same music player within your desktop application. Done? Okay, one last thing, and then I promise I’ll stop making you do work: pull up the same app on your phone.
What do you see from those experiences? Chances are you’re getting a similar view and experience regardless of which of the three versions of the app you opened. Your Spotify desktop application doesn’t have completely different colors, imagery, or user interfaces than your mobile version, nor does it operate in a completely different way.
Until now, you may not have put a ton of thought into why exactly this is, even though the native application on your computer may have been developed by an entirely different team than the one who developed the web browser, while the mobile application was developed by yet another team entirely!
The reason you get a similar experience with a brand, regardless of the device you use, is thanks to something called a design system. But what is a design system, and why is its development such a critical part of both branding and overall product development? I’d like to demystify design systems and explain a little bit about how they can guide engineers to create a unified, device- and application-agnostic brand experience.
Design System Defined
Think about how important it is that an application you open in one place looks and responds identically to that same company’s application in a separate place. If it didn’t, if it looked different and behaved in a different way, you would immediately sense something is wrong, and you might even worry that you’ve downloaded a fraudulent app from a third party.
A design system prevents this from happening by providing a distinct set of guidelines and processes for engineers to draw from.
At its core, a design system is a form of internal documentation that specifies how a digital application, website, or service should function. It defines the user experience of the brand with a set of rules that govern what a user sees, feels, and does when he or she interacts with a product.
Let’s look at Amazon as an example. No matter where you’re shopping, on a mobile app, a desktop app, or a web browser, your experience will be functionally the same, despite the fact that these are completely different interfaces. But when you go to purchase a product, the order of viewing your cart, selecting your shipping, then selecting your payment options and confirming your order is always the same. If it weren’t the same, there would be friction in the experience for the user.
With companies that are as large as Amazon or Spotify (or even smaller than that if we’re being honest), these apps are the result of the work of hundreds if not thousands of different people, working in teams that span various departments and geographic locales. The only way these disparate teams can put together something coherent from one application to the next is if they have a design system they can consult to always ensure they’re engineering their tools with the brand — and customer experience — in mind.
A design system provides the shared language necessary to drive innovation while simultaneously supporting a company’s established brand.
(And if you’re looking for some good examples of design systems, you can find them at Atlassian and Adobe.)
Design System vs. Style Guide vs. Component Library
One of the biggest points of confusion with design systems is how they relate to and overlap with style guides and component libraries. So it helps to define those in order to show how they differ.
A component library is a series of code modules that have been thoroughly vetted by engineers and the UX team to fit seamlessly within a brand’s current applications. Rather than build a tool or a part of a tool from scratch and hoping that it complies with the rest of the UX of a given product, a developer can simply drop in and work from the established code.
The code that makes up the component library meets the qualifications of the design system, but it isn’t a design system itself. The design system outlines how code can be developed and why it should be developed in a way that’s in accordance with the brand, and that approved code acts as a building block that begins to form a library when combined with other approved code.
A style guide pertains specifically to the user interface portion of an application, digital presence, or even physical presence. While a design system emphasizes how and why applications work the way they do, style guides will enforce the look of an application and any materials a user might interact with.
That means a style guide is composed of things like colors, logos, typefaces, imagery, verbiage, and the interplay of all of the above. These get grafted onto the user experience. In some cases, they can even drive the user experience and the thought that goes into how applications should work.
Designing a Design System
So how do you design a design system? Well, that’s a significant endeavor. It requires bringing key stakeholders from across your company together and having them think deeply about what their product and user experience represents. When that information is established, it’s important to think about how to convey the feel of that experience through design and interactive elements.
Doing so requires thoughtful examination of the brand in connection with best practices of modern UX and UI. It requires a team that’s skilled in designing with end users in mind. It requires a deftness and agility in engineering code that doesn’t just solve a problem, but does so with the end user’s seamless experience top of mind. And it requires a willingness to embrace accessibility so all potential consumers have a fantastic experience regardless of where or how they interact with a product.
When you design with these things in mind, you get a system that will enable you to succeed for years to come. You have a foundation that supports rather than hinders your brand and your product or services. And you bring your team together with a unified set of core principles you can use to spark innovation anytime and anywhere, without sacrificing the brand cohesion that’s brought you success.
In this way, you can see how important design systems can be, and why they’re critical for embracing the Art of the Possible at your organization.
