Design Smarter, Not Harder: How to Accelerate Your Workflows With a Design System

Need to Know 

• Having a consistent design system can save organizations time and money by giving designers and developers a single source of truth for design assets, reducing the need for revisions and unnecessary iterations
• Implementing a design system can speed up time-to-market, enhance workflows, elevate your organizations perception, and significantly reduce costs
• To decide whether a design system is right for your organization, it’s necessary to review your current design practices, gather feedback from stakeholders about how it fits into their workflow, and evaluate available design system solutions to see if they’ll suit your unique needs

Imagine this: your team has recently finished putting together content for your upcoming campaign and passed the project to design to build out the visual components. But when the designs are ready for review, your team is divided about the approach taken, resulting in additional discussions, meetings, and numerous revisions.

As a result, your design team’s resources become stretched thin as they work to address all the revisions and ensure that every piece of content is designed and formatted uniformly.

 By the time the campaign is released, it’s later than you originally intended and your team is now behind on other projects. The process then continues to repeat itself on subsequent projects.

Does this sound familiar? Then now is the perfect time to start thinking about implementing a design system for your organization. 

Keep reading to find out how implementing a design system can:

• Speed up your time-to-market 
• Simplify your workflows
• Improve design consistency across touchpoints, and
• Drastically reduce your costs
   

What is a design system?

A design system is a comprehensive framework of design tools, components, and guidelines organizations use to create and unify their approach to design across applications and touchpoints. It comprises an organization’s visual language and serves as a single source of truth, including defined standards for typography, colour palettes, and imagery styles.

Why invest in creating a design system?

Building a design system doesn’t just improve an organization’s appearance — it’s also been shown to improve user experiences by creating consistency across touchpoints, increasing trust and memorability. But the benefits don’t end there. 

Design systems allow for the rapid creation of assets at scale, decreasing time-to-market and fostering improved collaboration between designers and developers. By minimizing the ambiguity of your internal design practices, a design system can also reduce errors and the need for revisions, saving costs and producing a rapid ROI.

In fact, in a 2019 study for the design tool Figma, designers creating assets with a design system were found to complete their work 34% faster than those without. 

Companies like Apple, Google, IBM, and Shopify are just a few of the countless businesses that have embraced design systems in order to produce at a faster pace. 

For many organizations, the question is not whether to build a design system, but how to create one that will help them achieve their objectives. 

That being said, there is a significant time investment involved with the initial creation of a design system, and if you’re thinking of taking on this kind of project, it’s important to understand every step in the process to decide if it’s the right choice for your business. 

Though it can be a laborious process, our experts have seen first-hand how the results and returns are more than worth the commitment for our clients. 
 

What are the steps to create a design system?

1. Review your current approach to design. Does your organization have assets and templates for designers and developers to use, or are they designing on a project-by-project basis? Are your assets easily accessible? Are your standards for colours, typography, and imagery defined and simple to review?
    
2. Get feedback from your internal and external audiences. Depending on the size of your teams, you may choose to have one-on-one meetings with individual members or to gather feedback via surveys or polls. This information will prove invaluable when deciding whether a new design approach is needed, and how to start shaping it based on your users’ needs.
    
3. Evaluate the available design system solutions. The design system platform you choose should answer the user needs you outlined in the last step. 
   We’ve broken down the high-level pros and cons for some of the most popular design systems below — though this certainly isn’t an exhaustive list of all the excellent design systems available. 
    

​​Figma

Pros:

¹ https://www.figma.com/blog/measuring-the-value-of-design-systems/

• Figma is currently the most widely used design software for visual design and the maintenance of design systems.
• Allows multiple team members to collaborate on design assets simultaneously in real-time
• Enables designers to track and revert to previous versions of assets
• The platform’s component library capabilities can synchronize changes to source components across all instances, so teams can make revisions without pushing out timelines
• Auto-layouts make it easy to swap in new components or increase the number of populated results in any given design component, and if configured correctly, other components will react to and accommodate these changes
• Design tokens add consistency to design properties like colours, typography, and spacing, making it easier to maintain a design language
• Has excellent tools for documenting design systems, improving communications and transitions between design and development
• Gives developers the capabilities to examine designs, retrieve code snippets, and access assets directly within the platform, simplifying the transition of assets from designers to developers
• Accommodates plugins and integrations that enhance the design-to-code process, enabling developers to smoothly move from design prototypes to executable code
• Developers can utilize the platform’s responsive design capabilities to determine how the designs will adjust for various screen resolutions and designs

Cons:

• Figma is highly dependent on an internet connection, so designers and developers may encounter restrictions when working without internet access, which could be a limitation in specific scenarios
• Though Figma has a user-friendly interface, designers may encounter difficulties adjusting to its unique features and layout, especially if they are accustomed to other design platforms

Storybook

Pros:

• Free, open-source platform
• Isolates components within a User Interface (UI) to provide clear documentation
• Allows for automatic visual testing to avoid bugs when making changes throughout the development process
• Improves communication between design and development, allowing teams to start development before any back-end work or building commences

Cons:

• When it comes to updating components, this platform can almost double the work involved, as changes made to a component within Storybook need to be tracked and replicated within the structure of the website
• Relies on add-ons and decorators for handling test data and dummy content
   

Pattern Lab

Pros:

• Free, open-source platform
• Displays a real-time UI preview of design components, allowing designers and developers to see how the elements will look and behave in the final product
• Can act as a living style guide that can be referenced and shared for a more unified design direction presented via production codeEncourages collaboration between designers and developers, as both can work on the same system and see how changes affect the overall design

Cons:

• Pattern Lab can have a steep learning curve, particularly for designers and developers who are new to the concept of atomic design and pattern libraries
• Setup and maintenance of a Pattern Lab instance can be resource-intensive
• While the platform works well with static design components, it may not be the best choice for highly interactive or dynamic design elements

Emulsify

Pros:

• Designed specifically for Drupal, Emulsify seamlessly integrates with Drupal's theming system. It generates Twig templates and SCSS files compatible with Drupal themes, simplifying integration for websites on the Drupal platform
• Promotes reusing and modularizing UI components, making it easier to maintain and develop consistent components throughout the project
• Designers can work on components independently, and developers can easily integrate them into Drupal
• Includes an instance of Storybook, allowing users to preview and test UI components in isolation
• Has an active community that offers resources, documentation, and community-contributed components that provide solutions to common challenges and  accelerate development 

Cons:

• If your team isn’t familiar with how to utilize Storybook’s tools to manage a design system, there will  be a learning curve for both designers and developers. There is a strong likelihood you’ll need to provide workflow training for development and design team members
• The initial setup and configuration required to integrate Emulsify with a Drupal project requires a considerable amount of upfront work
• Adds an extra layer to a project's front-end infrastructure, which may require additional maintenance. This includes updating the Emulsify platform and managing component dependencies
• Can introduce additional unneeded complexity for smaller projects. For that reason, we recommend it for larger projects where the benefits of component-driven development and collaboration outweigh the potential drawbacks

Carbon Design System

Pros:

• The Carbon Design System is a widely-used open-source design system developed by IBM that provides both a Figma file for customization of its default components and a pre-built instance of Storybook. The system is used to create consistent and accessible user interfaces across multiple projects
• Offers a Figma design library that includes a wide array of UI components, typography styles, colour palettes, and other design assets. Your design team can leverage the Figma file to create and customize your designs based on what the Carbon system provides out-of-the-box
• Follows the WCAG 2.0 AA guidelines, ensuring that the user interfaces created with Carbon are accessible to all individuals. The system provides guidelines and components that prioritize accessibility, supporting the creation of inclusive and user-friendly interfaces
• Boasts a rich library of reusable components that streamline the development process. From buttons and forms to navigation elements and data visualization components, Carbon offers a wide range of well-documented and customizable components
• Supports theming, allowing for the application of different visual styles while maintaining consistency across the system. The platform is designed with extensibility in mind, empowering developers to customize and extend the components to suit their specific needs
• Has an engaged community that plays an active role in product development. Should you encounter issues during your design process, reaching out to this community can offer custom solutions to your challenges

Cons:

• Limited to IBM products, so will not be an option for those using others

Work with a partner specializing in design system creation and implementation. At Northern, we specialize in helping our clients build better digital experiences for internal and external users that help them achieve and exceed their business goals.

Our experts have helped hundreds of organizations transform their approach to design, saving them time and money by investing in a design system that simplifies workflows and decreases time spent creating and publishing assets.

Though the upfront work involved in creating a design system may be significant, it’s an investment that pays for itself when it comes to business perception and internal efficiency.

Want to chat with our experts about whether a design system could be right for your organization? Contact us to get started.