Design Systems

I introduced design systems to Shutterstock and led a team of accomplished designers and engineers to design and build a new React component library and CSS framework for Shutterstock's web properties, native apps, email, and internal tools. 

Reading time: 4 minutes     Design lead, Product Manager - Shutterstock 2016 - Present

Design is about systems

Systems can span from a class of physical products sharing the same electrical components and schematics to digital products sharing the same atomic components, guidelines, and mental models. I've honed systems thinking as an Industrial Designer and leverage today as Director of User Experience and Product Design to scale design across platforms and drive cohesive experiences.

The purpose of scaling design is to drive operational efficiencies, increase speed to market, promote rapid experimentation, and build an experience our customers love and can’t live without.

This is a behind the scenes look at how Shutterstock developed a multi-brand Design System and how we bridged the gap between design and engineering disciplines to build better products.

Innovation from necessity

Large organizations need systems to govern themselves in a way that allows their teams the freedom to move with autonomy and contribute to holistic and cohesive customer experiences at the same time. Aside from new product features, front-end experiences require maintenance, similar to how the performance of a site must be maintained over time.

Without design systems, the design and code will quickly fall out of sync with one another and lead to disjointed experiences. The issue compounds over time when there are no standards or guidelines to follow.

Whether your company is new with a small team and no design or tech debt, or an established company struggling with debt, disparate technology stacks, and a brand that’s in need of a refresh, design systems will be critical to your front-end strategy.  

Principles to live by

This is a good time to define your design principles, principles your system will live by and guide present and future teams using the design system. The Shutterstock Design System was founded on these principles:

Elemental. We’re focused on getting back to the basics, using bold typography, color, grids, space, and immersive content. These elements are used to guide the user effortlessly to the right action at the right time and positively influence human behavior.

Uniform. Uniformity establishes mental models that a user becomes familiar with, reducing cognitive load and increasing productivity. The consistent use of patterns and components from the SDS will allow for rapid experimentation and sitewide improvements.

Inclusive. No matter where our customers originate from, we want Shutterstock to be approachable, accessible, and easy to use.

Clear. Through design, user insights, and utility, our products should be easily understood and free from indistinctness or ambiguity.

Shutterstock design principles found on our living style guide

Audit, build, test, and pitch

The steps below form a process of how you would go about understanding your products to make them better and identify business opportunities. We used Material Design principles and mobile first patterns to build a prototype and show how Shutterstock would benefit from being on a single platform, gaining mass efficiencies through code reuse. The output of this exercise will help you to acquire the resources needed to build and maintain the design system.

Pro tip: Compare your components against Material Design components to see what is missing. MD’s mobile-first approach carries some of the most versatile components used in today’s modern front-end designs. There are multiple react libraries built with Material Design principles out there for you to leverage.

Audit For an existing company, auditing current experiences to document what components are used will uncover how existing mental models, components, and patterns are used to accomplish goals. This will help you to identify gaps and inconsistencies within your current user interface. Start by breaking each page down into sections. For example, header, top row nav, left filters, bottom row navigation, grid, title row, etc. Then, look to see how they are similar or dissimilar with the other patterns across your site. This will form the basis of the redesign.

Audit of customer flows and components for mobile, tablet, and desktop

Test Pressure testing your ideas is one way to build a robust system that is able to scale over time. It’s simple, build consistent patterns and use them in multiple scenarios to push your solutions until they break. This is how 1.) you will develop a pattern that is able to be used in multiple places and 2.) promote code reuse. 

Scrappy Principal prototype covering the two-sided marketplace: Customer and Contributor

The pitch From your hard work, you are now prepared to pitch your business opportunity to stakeholders. It’s important to look through the lens of your stakeholders and speak to how this opportunity aligns to their business objectives. If it’s the C-Suite, you will need to articulate how this will reduce operating cost and be a force multiplier for product development.

Building the design system

Design system initiatives can be combined with other company initiatives like adopting new technologies, brand refreshes and new products. It’s an efficient way to reboot a brand and gain mass efficiencies with how a company thinks about building its products.

To build a system that is accepted by your Marketing, Product, and Engineering stakeholders, you can conduct working sessions with them to foster shared ownership. Everyone gains a shared understanding and will be more incentivized to evangelize the work needing to be done.

Your branding, color, typography, and spacing are foundational pieces to every design system element, so it's important to establish them from the very beginning.

Design System foundational elements

Rebrand example with foundational elements using immersive content

Now it's time for the colors, typography, spacing, and motion to be translated into what we call brand variables. These are the design system CSS files that control the look, feel, and scalability of your brand and will form the basis of atomic design and component-based design. With brand variables, you will be able to make changes in a CSS file, and all instances will update across your site.

Examples of brand elements translated into brand variables. Design + Code

Working with your Engineering team is key to deciding on the right mix of technologies to use for your front-end platform. For the components, you should ask two important questions. 1.) What technology to use for components? React.js was the right choice for us since it is noted as having substantial levels of adoption and a long lifespan. 2.) Should we build custom components or leverage existing libraries? Pro tip: If you leverage existing libraries, the team will need to conduct an in-depth analysis of the libraries maturity level. 

After this important step has been completed, it's time to provide component styling, motion, logic, and sizing documentation to inform the team on what needs to get built. Your designs must consider and follow web contrast standards, accessibility standards, and interactive elements have properly sized mobile touch targets.

All brand variables, components, and reusable patterns in our code repository

DesignOps

A design system enables multiple teams to drive design cohesiveness through the consistent reuse of coded components and patterns. To operationalize design and enable the benefit of design systems, DesignOps organizes, coordinates, and provides governance to product development.

DesignOps accomplishes this monumental task of providing tools, training, and process for the UX team, aiding collaboration among Engineering, Product, Marketing and many other functions across the organization. With these initiatives, design and engineering can move faster at scale, boosting innovation and high-quality experiences. There’s so much more to this subject I won’t cover here, but I've written more on DesignOps here. 

Shutterstock Design System in Sketch

Ship products

Another important design system milestone is when you ship products with it. This validates the hard work you and your team have done and the material impact it has on the products you build and maintain. One metric to track is how parts of the organization begin to adopt the design system to share progress to stakeholders. The more teams use it, the more they will find ways to contribute and make it better. This process uncovers another method that your design system team can use to maintain the health of a design system.

Pro tip: Take a look at how teams are using components and patterns to identify developer pain points and if the system requires overrides or customizations to achieve the design intent. This will inform you on how to refactor components to work like the way they were intended to.

Multi-brand design systems

From a high level, what a brand theme is and what it is defined by are the logo, type, color, iconography, messaging, and tone of a brand. A company that has multiple business units is able to use a single design system to power multiple brand themes using a library of unstyled components.

At Shutterstock, we architected a way to support multiple brand-themes with our design system and enabled all business units to benefit from each other's contributions and resources.

As your company thinks about design systems, this is one additional way to scale design and avoid wasting time on redundant work when you can be focusing on growing your businesses.

Three business units using the same components with unique brand-themes

Conclusion

As software becomes increasingly more complex, design systems are one way to scale design, improve operational efficiency, and drive a cohesive customer experience across platforms and channels.

By following the process outlined here, you can elevate your brand and help your organization’s design team keep up with the fast pace of product development and maintain a high level of quality and a stellar User Experience.

Up next

Vision video Six steps to rally an organization around a company vision

DesignOps A new way to operationalize and scale design across an organization

Lifesaver Getting past the business of life with a little help from the on-demand economy