The Power of Design Systems: How Virtue Media Designs at Scale

This article is part of Virtue Media’s Web Pros Series. In this series, we feature articles from our team of experts here at Virtue Media. Our Product Managers, Linux Administrators, Marketers, and Tech Support engineers share their best tips for getting the most out of your website. 

Most businesses know that good site design is critical for success. Fewer know how design systems can help brands scale up faster, work more efficiently and connect with customers better. 

As Virtue Media’s Creative Manager, I’ve seen how a well-built design system can 

• deliver a consistent and user-friendly customer experience
• make it easier for our in-house teams to communicate 
• get new projects up and running faster

all while Virtue Media evolved from a fast-growing startup to one of the major players in global internet hosting.

For our customers who want to grow their brands and their websites without getting bogged down in design issues, I want to share what we’ve learned about the benefits of design systems.

What is a design system?

Design systems are collections of components that you can put together in different ways to build things that deliver a consistent experience and look. In this post, I’m focusing on design systems for large websites, but design systems can also support app and product creation. 

The best metaphor for a design system is Lego building bricks. The idea is to put together a bunch of reusable components and pieces that you can pull out whenever you need them and stick them together. Because they’re always going to stick together the right way, you increase your consistency in what you build. You also increase the speed at which you can prototype things. 

So, if it helps, think of a design system as a collection of Lego bricks organized by color, size and shape so they’re easy to find while you’re building. You want to start your design system with your simplest building blocks. These are the things that every website has to have, like buttons, form inputs, icons, fonts and colors. Once those foundation bricks are ready, then you can start to build with them.

Design systems make it easier to design at scale

The at-scale part happens when you put together those individual pieces into larger components that you can also reuse. For example, when you’re starting to build a section of a new webpage, you can consistently pull the elements for the same design pattern over and over again. It’s like you’ve been building up these Legos into bigger and bigger pieces that you can now use to make development and design faster, easier and more concise.

That saves time on development and design because your teams don’t have to build everything from scratch every time you update your site. It also helps your users navigate the site easily. Our users come to Virtue Media.com and see patterns in our design, like buttons that are the same color and shape, so they know exactly what’s going to be clickable no matter where they are on the site. 

So, does your website need a design system?

Yes, if you have a large website with content that’s frequently updated, like an eCommerce site with dozens or hundreds of product pages. Also, if you have a brand you’re building up and you plan to scale to dozens or hundreds of pages, then investing in a design system—and someone to manage it—can help you optimize that growth. 

If you have a smaller, 5-page site for your small business or personal branding, investing in a custom design system isn’t necessary. In fact, you may already have a design system—your WordPress theme or Website Builder template. However, the tips in this post on consistency and branding can help you get the most from your site design template. 

How Virtue Media’s design system helps us work

Our design system does a lot for us. Here are a few ways it helps us work smarter.

We save time and effort with our design system

When we have a new project, our library of design components makes updates fast. For example, if we decide we need to change a banner background from blue to yellow, switching out that one color component lets us make the change at once across all the pages with that banner. When I make a change like that, I know that as long as the change didn’t break the component in our design system, it won’t break the component when it goes to the development team. 

The design library also helps us stay focused on projects instead of creating new design elements all the time. We only create new components (like new Lego bricks) when the ones we have won’t help us build the design we need.

With a streamlined set of tools and a project-focused mindset, we can create new designs faster and move quickly to user testing. That lets us optimize our pages and forms faster for more conversions so we can keep growing. It also ensures that we’re delivering the kind of experience our customers have come to expect, even as we add new elements to our site.

Our design system helps our teams work together

To understand how a design system helps collaboration, it helps to know there are two parts to a design system. One is the design file where your library of components lives. 

The other is your milestone site, which catalogs all of the things that you’ve built with your design components, from buttons and banners to pages and forms. The milestone site is where your designs and your code come together, so it’s where your designers and developers gather to talk about projects.

That shared space and those conversations help us designers think about the site in the same terms as our developers, and it helps our developers understand the way the design team thinks about the site. With that insight and shared set of building blocks, design and dev can create things that work the way they need to and look the way they should.

Other teams can benefit from the milestone site, too. For example, if our marketing team wants to know if it’s possible to add a new feature or move an element, we can see if we have existing components to do those things. If we don’t, we can figure out how long it would take to build them. That lets us give more accurate timelines to our marketing team so they can plan their campaigns. 

Our design system lets us focus on human-centered design principles

When you’re building a website for people, you want to make sure that it’s easy and intuitive for them to use. Everyone should be designing with user experience (UX) in mind and having a design system makes it easier because you’re using your design components to create consistent patterns on your site. 

That’s important because of the way human nature responds to inconsistent patterns. For example, if you have a flow that takes users from your homepage to a product page and then to a cart, and there’s a yellow button on each page, that’s a consistent pattern. Users know that to move on to the next step in that process, they need to look for a yellow button.

On the other hand, if the button is blue on the homepage, yellow on the product page and red in the cart, that’s inconsistent design. People are less likely to trust your site because their experience keeps changing from one page to the next. The site starts to feel flaky or shady, and that’s when people will no longer trust you with their credit card information or other sensitive data. 

A data system can help you deliver a consistent brand experience

A consistent website experience is part of a bigger overall brand experience that includes the design of your emails, social media posts and other user-facing content and products. To deliver that kind of seamless experience, all your teams need to be on the same page.

Your design system’s milestone site can help here, by serving as a one-stop shop for 

• training new employees
• showing developers and designers the elements that they have to work with
• getting freelancers and agencies up to speed on your brand elements and user experience

Anybody who needs to know anything about the brand can find all of the information they need in one spot. 

Having a reference library run by one design system manager also means you can have technical consistency across all your teams, in all locations. If everyone’s working with the same elements, they’ll function the same way whether they were developed by a team in Houston, Rio de Janeiro or Toronto. That also makes growth and expansion easier. 

Design system resources

Implementing a design system delivers big benefits, but it also takes some serious planning and time. If you think your business could use a design system to scale and deliver better UX, here are a few of my favorite resources to check out next.

Want to learn more about design systems? Join Joe and Virtue Media Creative Director Alexandria DeRosa for Build a Design System That Works, an InVision Talk on Sept. 22, 2020.