An Article

How Design Systems Make Teams Work Smarter, Not Harder

Ayana Campbell Smith By Ayana Campbell Smith // 10.29.2019

Design systems are indispensable. These living documents improve the software development process by removing the guesswork from designing and building UIs. As an added benefit, design systems also encourage close collaboration between the varying disciplines on project teams. By implementing these systems at Envy Labs, our team members are empowered to focus on the bigger picture when it comes to projects instead of getting bogged down trying to sort through minutiae.

Over the years, we’ve found one thing to be true: When teams aren’t focused on figuring out how things should look and function, they’re more free to iterate and improve. This ability is vital in the fast-paced world of software development.

So What Exactly is a Design System?

The concept of design systems has been around in varying forms for decades. Take the 1970 New York City Transit Authority Graphics Standards Manual, for example. This manual details the various design patterns that define New York City’s subway signs that are still in use today.

It’s been more recent, however, that design systems have gained popularity within product design circles as their value has become increasingly important.

So what exactly is a design system as it relates to interface design? Let’s clear a few things up by first defining what a design system is not.

A design system is NOT just a style guide. Though closely related, these terms should not be used interchangeably. While style guides excel at bringing order to base-level UI elements such as color, typography, and form components, they fall short at offering important details about how all the pieces fit and work together.

At its core, a design system is a set of guidelines outlining how all of the pieces that make up a product should look, function, and interact with each other as part of a scalable, unified system. 

Instead of covering only the visual considerations of a product, a well-executed design system also offers directives about component states, context examples, and more. Since digital products are made up of more than just pretty colors and smart typography, design systems are absolutely necessary if you aim to build (and later expand upon) a successful product. 

And that’s what Envy Labs achieves with the development of each design system we build.

Design Systems are Everywhere

As it relates to digital products, the interest in design systems spiked around 2016. Since then, design systems have only grown in popularity. This trend can likely be attributed to the uptick in companies, both large and small, making their versions available online for public consumption. Big names, such as ShopifyIBM, and Atlassian, have demonstrated how they utilize these documents to promote consistency across products and within teams. 

By offering a glimpse behind the curtain at the inner workings of their most successful products, brands like these have helped drive home the importance of having a good design system. As a result, new generations of designers and developers are following suit. For many, the acknowledgment of design systems’ value has made their creation (and subsequent maintenance) a top priority.

At Envy Labs, our appreciation for a good design system is no different, and the benefits have been seen time and time again. What’s more, the relative newness of these systems presents a multitude of opportunities for continued discovery and improvement. 

Case Study: How Envy Labs Design Systems to Streamline Project Processes

In the summer of 2019, we launched Moonllight, an innovative newcomer to the world of online fantasy soccer apps.

The app encompassed many complex features, including real-time data updates, multiple modes of gameplay, and a completely custom scoring system. This level of complexity required a thoughtful approach to ensure a successful outcome. Reflecting back reveals many examples of how having a design system streamlined the project process for both the client and our team.

Design Systems Create a Solid Foundation

Design starts after a phase of discovery and research. Aiding our quest for a system that accurately covers the scope’s needs are the completed/approved wireframes.

As the design phase kicked off, more pieces of the project puzzle were discovered. With anticipation running high and inspiration swirling, it’s easy to want to dive right into designing comps. However, we knew the smarter approach would be to focus first on setting a strong foundation for the work to follow by creating a unified design system.

This involved explorations around important building blocks, such as themes and visual motifs, color, typography, and basic page structures. At this point we asked necessary questions like:

  • What does a field input look like?
  • How can typography promote visual hierarchy?
  • Which visual elements will invoke a sporty feel without being too literal?
  • And most importantly, how will all these pieces work together?

By seeking the answers to questions like these and many others, we were able to set the stage and hone in on the visual elements that would define Moonllight’s unique aesthetic.  All subsequent design efforts would be informed by the work done at this stage.

Design Systems Promote Early Client Buy-In and Approval

When it comes to custom software development, getting clients on board early with the creative vision is integral to project success. With Moonllight, using a design system helped us do just that.

For the first design delivery, we took a minimal approach by only presenting what was absolutely necessary for initial client approval before taking a deeper creative dive. Instead of 20+ fully designed comps, a scaled-back delivery of 3-5 key screens paired with the early design system explorations was more than enough to get useful client feedback about the overall direction and the go-ahead to keep moving forward.

It is important to note how this approach to the design process, facilitated by the use of a design system, benefitted both parties. Our client was afforded the opportunity to play an active role in the project early on. This level of involvement provided Moonllight with the assurance that things were moving in the right direction and helped instill confidence in our process.

Additionally, utilizing the design system enabled our team to work smarter, not harder, to keep the design phase moving along at an even pace. None of this would’ve been possible if the design system’s creation had not been prioritized from the start.

Design Systems Enable a More Agile Approach to the Design Process

The journey from idea to final product is often full of twists and turns. As with any creative endeavor, there were periods during the Moonllight design phase where revisions were necessary. This was yet another place when our design system came in handy.

Combining systems thinking with a component-focused design approach made the process of implementing design changes quick and easy. Taking advantage of features like shared styles, symbols, and nested symbols, offered by our design program of choice, Sketch, we built out a library of components. What’s great about these reusable pieces is that a change to one results in an update to every other instance of said component across the entire project.

For example, halfway through Moonllight’s design phase, the decision was made to change the color of the sidebar navigation menu from dark blue to white. Taken by itself, this may seem like a minor change. However, there were over 25 instances of this single component, each requiring this update. Making a seemingly minor change like this could easily eat up a significant chunk of time that could otherwise be used for more meaningful tasks. Thankfully, by using the magic of Sketch symbols when building our design system, we were able to update the master instance of this component and see the change reflected across all the designs immediately. 

This is just one example of how our design systems work to keep the creative process agile. Their use enables us to roll with the punches and pivot with ease when necessary.

Design Systems Build Stronger Teams Through Collaboration

We’ve found that design systems do wonders to promote collaboration between project team members. For one, the individual disciplines are afforded the opportunity to offer their unique perspective during internal reviews and feedback sessions. This level of collaboration results in the best possible outcome for the project as a whole. More importantly, a design system operates as a shared brain among the team to ensure no single member holds all the answers.

Design systems function as a single source of truth for all things design-related. When done well, team members outside of creative disciplines are empowered to make important UI and functionality decisions during implementation.

In Moonllight’s case, even before final design approval and handoff, front end was able to build out the various styles, components, and page templates that would make up the platform. This was all possible with minimal designer input because the design system contained all of the necessary answers.

That’s what well-planned design systems do. And thus they become an integral part of successful software projects. By laying a solid foundation, promoting close collaboration, and offering an agile design process, our clients and project teams are able to enjoy more streamlined project processes.

Next Up

The Power of Gamification: Transforming Users into Loyal Fans

Ayana Campbell Smith By Ayana Campbell Smith // 9.23.2019

By incorporating gamified experiences, digital products and web apps provide positive feelings that keep users loyal, engaged, and coming back for more.