How a small medium business will benefit from a design system

Scattered brand image = Perceived quality, trust and your brand equity compromised

Teams are being progressively invested in. However, even when the team is small, there can be big gaps in between the intended use of design, content, media and overall branding.
With growth, nevertheless, it becomes much tougher to keep everyone on the very same page when it involves following the same layout language. Consequently, parts of the same product or a suite of products may start to feel and look as from various brands, quality, feel and perception may vary extensively.

 

Design Systems are a powerful tool to showcase inconsistencies, redundancies and, therefore, show how time and money might be being wasted in the current way of working. They also show how your brand identity is being compromised. If you have a digital product or a suite of products to maintain, some parts of them might be on-brand while others are outdated. What message do you send to your customers?

Overall the main role of a Design System is to ensure consistency and quality throughout the brand footprint.

Drastically reducing operations costs

The digital economy is growing fast, we are shifting more and more from digital products to services that require constant development. If you are not evolving, you can be sure that someone else is. As if this wasn’t enough, it’s not only the direct competition we need to constantly monitor, customers are now benchmarking digital products beyond traditional sectors.

To a large extent, this development has to do with a marketing sea change we call “fluid expectations,” when customer experiences seep over from one industry to an entirely different industry. Consider how customers increasingly compare the way their airline flight cancellation was dealt with against their most recent Zappos return, and compare their physician visit to a visit to the Apple Store’s Genius Bar.

As customer experiences with any product category affect how customers experience products in other categories previously thought to be unrelated, all businesses need to add new dimensions to how they understand and define their competitive strategy.

 

Keeping such pace without introducing a design and development increase cost is impossible unless you have a systematic approach to building digital products and services.

More accurate measurable goals

One thing is clear — if you can’t measure it, you can’t improve it. The design system allows to save big on maintaining as well as keeping everything and everyone on the same page while developing the product and the related channels.

We get started by sharing the current state (rolling out phase) and continuously measure across the same metrics to monitor the change. As the design system matures and proves the concept and gets adopted by potential partners, we should be seeing clear benefits in your ROI.

Use a goal-setting framework that your business expects. As Objectives and Key Results (OKRs) have become a widely adopted way to set the direction and track progress, below are a few of my suggestions and also some examples found in the literature .

Objectives could include:

    • Accessibility is built into everything we do

    • Maximized adoption by products within a certain timeframe

    • Reduced development times and time to market

    • Reduced design time and time to market

    • Reduced technical costs and bugs

    • Reduced UX costs

    • Increased collaboration among teams

    • Increased speed of design and development handoff

    • Speed up and improve the quality of onboarding

    • Integrating the design system into flagship product

    • A stable and consistent design system

Key results could include:

    • Employee satisfaction score with the current way of working vs design system

    • Team happiness scores

    • Time to launch new product or design, develop and ship a new feature

    • Reported bugs

    • Reduced technical costs

    • Rework — how many things had to be reworked post-launch?

    • Brand perception

    • Design system adoption rate

    • New revenue stream from Design System (Potential partnerships to use our framework)

    • Productivity (sprint velocity)

    • Measure of user satisfaction and usability more accurately

    • NPS score

    • Product/Service adoption rate

    • Customer loyalty

As you’ve now introduced the recommended solution, the alternatives, the high-level plan, and your goals. Now, it’s time to show more detail.

Money-wise, there are two ways you can help your business:

1 – Increase revenue

2 – Cut costs (make savings).

    • Product costs — these are the direct expenses you need spend to create the product itself; this is where a design system can shine as it can make the product creation much more efficient

    • Overhead costs — these are all the expenses surrounding the product (e.g. marketing, accounting and legal fees, customer service, maintenance); a design system can free up your team to spend more time thinking about the bigger picture, crafting better user and customer journeys which may ultimately need less maintenance, less customer service and if people love it, less advertisement!

With design systems, we are mainly looking at the cost-saving benefits. However, if the system helps you get to market faster or gives your team time to think more about the experience you’re designing, or opens up new revenue streams in the form of partners as mentioned before, it is also contributing to increasing the revenue.
Since we are building on top of a very specific use case, others might be interested in taking advantage of a feature, component or simply snippets of our framework to save huge amounts of resources by partnering with us.

My goal was to create a comprehensive list that you can then go through and pick the relevant items for your specific context, challenges, and business goals. Many of the benefits below would fit in multiple categories, so please ‘mix and match’ ?

Accessibility is built into everything we do

Allowing for accessibility to become the standard across the experience is something that is not only beneficial in terms of extended opportunity to reach an audience that couldn’t be otherwise be reached.

It also shows the commitment of a brand to be inclusive starting from the get-go and making sure that certain values are associated with the brand itself.
More recognition, brand equity follows as organically as possible with this kind of framework.

Accessibility is often difficult to get prioritised. When starting a design system, you can make it a rule that all components must be accessible to the broadest range of your potential customers.

Key benefits of a design system:

    • First of all, accessible products are the right thing to do.

Faster time to market – Seize the opportunity

Design systems lead to increased productivity which allows getting an idea to market faster and in higher quality.

Key benefits of a design system:

    • Ensuring consistent presence across channels and touchpoints

    • Allows you to iterate faster, especially in high-fidelity, and test with users

    • Helps you stay competitive as since you’re faster you can beat your competition to the market

    • Speeds up the initial MVP release (faster project start as you’re not starting from scratch)

    • Increases delivery frequency — faster builds through reusable components and shared rationale

Efficiency & productivity – Reduce cost of design and development

Reusability, clear standards, better communication, and much more make your teams much more efficient and productive, ultimately reducing the cost of both design and development.

Key benefits of a design system:

    • Saves time by reusing components and modules (savings from scaling, not having to recreate things from scratch)
      “Naturally, reusing an existing element, rather than building one from scratch, is quicker.”

    • Saves time when building new components and modules with established design foundations

    • Saves time by having a shared design rationale; knowing why things have been designed in a certain way cuts a lot of discussions and arguments

    • Saves time by having a one shared source of truth. Designers don’t spend time searching through old design files to look for an asset they know exists; they don’t have to make micro-decisions around text style, placement, etc. This also allows the product managers to spend more time looking into the bigger picture and not to be spending time on micro-level interactions.

    • Supports easier transfer of knowledge (breaking down the knowledge barriers)

    • Saves time by easier and faster onboarding of new designers and developers
      This also allows them to deliver value to users faster, bringing additional business benefits [28]

    • Saves time of the current team members who don’t have to spend time onboarding new designers

    • Allows engineers to work more autonomously since assets are readily available [28]

    • Easier & less frustrating design-development handover. Saves time by designers not having to annotate their work (creating ‘redline designs’) when there are usually still many unanswered details which need clarification during implementation.

    • Saves time on Quality Assurance (QA) since components that make it to the code repo are already tested and approved both design and code quality-wise

Scalability & maintainability – Reduce cost of maintenance

Since design systems are dynamic and expandable (as opposed to static style guides) they allow products to grow while preserving your design language and quality standards. A standalone design system repository serves as a single source of truth. Because everything in use is linking back to a canonical implementation, changes in one place propagate through the entire system.

On the other hand, a bloated and inefficient system means that even the smallest changes are time-consuming and fiddly to make. By improving individual components, the whole system becomes more robust and easier to maintain.”

Key benefits of a design system:

    • Saves time and effort on making product/platform-wide changes (faster the update the entire UI design)

    • Faster to update a component (e.g. because of some issue) and roll across all products (one source)

    • Aligns a lot of products, services and teams along the common purpose and shared quality standards

    • Makes it possible to scale both design and front-end areas in the future

    • Prevents design and technical debt from occurring or at least getting out of hand

    • Systemises design, as bespoke design is slow, inconsistent and increasingly difficult to maintain over time

Improved brand equity & user experience

Unifying a growing product or line of products under the same brand requires an effective design system.

A mature design system brings brand unity at scale. Especially if you’re working with third parties, or your company is having multiple products on the market, a strong design system enables everyone to comply to the same design language.

Key benefits of a design system:

    • Systematises interfaces leading to brand unity and consistency at scale

    • A shared design language, guidelines and assets supporting a consistent user experience

    • Strengthens brand image

    • Reduces learning-curve for users thanks to predictable and consistent interfaces. Inconsistencies in interaction and components cause cognitive strain on new users who can’t understand the logic of the UI.

Improved teamwork & collaboration

A shared language is fundamental to collaboration, and that’s exactly what an effective design system provides. It gives people the tools and processes to create things together. Design systems facilitate ongoing collaboration between design and development. Such a collaborative environment contributes to teams’ happiness and increases the chances of people staying longer in the company (retention).

Key benefits of a design system:

    • Facilitates the creation of a shared process and governance model

    • Helps to establish or strengthen a design community

    • Helps to break down design and development silos, and transform the ways of working

    • Improves the design & development collaboration

    • Reduces misunderstandings and frustration (for example, by avoiding ambiguity through the creation of naming conventions and shared standards)

Increase team happiness & user satisfaction

Designers and developers like solving complex problems which add value. By removing repetitive and low-value-adding tasks, they will be happier and more passionate about their work → leading to better products → leading to increased user satisfaction.

Key benefits of a design system:

    • Removing the need to do things that don’t bring value (e.g. repetitive tasks)

    • Supporting creativity (less time spent pushing pixels, more time designing for great experiences)

    • More time for exploration, discovery, user research and thinking through complex flows [30]

    • All of the above leads to better design decisions

    • Removing ‘decision fatigue’ (focusing on decisions that actually matter) [47]

    • Less time wasted and increased productivity

Cleaner design, code, and fewer bugs – Increased quality & performance

With a proper design system, your UI building blocks are carefully crafted and tested. This manifests in fewer bugs and better performance of your service.

Key benefits of a design system:

    • Usability improvements as scale

    • Components are rigorously reviewed and tested (usability tests, QA, accessibility); only the team’s best work should make it to the library; a component only needs to be done once but it needs to be done properly

    • Tested components which are then reused reduce the number of bugs and save time on QA

Agile ready – Support agile transformation

In the waterfall development, it is extremely difficult and expensive to change course later in the development process. That’s why the modular approach of a design system is a key enabler for agile development.

Key benefits of a design system:

    • Since modular design systems allow for a quick assembly of an interface, change and experimentation are an embodied trait, therefore, they support well the agile way of working.

    • Design systems facilitate ongoing collaboration between design and development necessary in agile development (as opposed to a style guide which is at one point handed over, i.e. supports the waterfall approach).

Maximized Return on Investment (ROI)

ROI is a standard measure which companies take into consideration when deciding whether to pursue a project. Although it’s simplifying the bigger picture and for wise leaders this should not be the only measure they decide upon, it helps to make various business cases comparable.

ROI = Net Benefit / Total Cost

You want to show that your project has a positive ROI. Be careful, though. A static ROI only shows a snapshot in time. Companies are moving to more dynamic overviews — ideally, you’d show how the ROI develops over several years. Then you’ll know when you break even (the break-even point).

If you’re not sure about how to calculate ROI, find again your colleague in finance and just ask.

Anyway, getting to the ROI value can be a challenge, especially since many of the expected benefits will be educated guesses at this stage, or they may be pure assumptions. Luckily, other people have been in your place before and shared their insights. Here’s my collection of design-system-supporting stats, which you can consider using as a benchmark when calculating your expected ROI.

Design time saving: 34% faster on a design task

Figma’s data scientist asked seven design colleagues decide to see what an impact a design system would have, they needed to create one screen and a screen flow for a banking app.
The designers were randomly assigned to two groups and one had a design system at hand, and the other an old design reference files. The group with the design system available, completed their tasks 34% faster than the one without it. As an extra perk, several participants reported feeling much more confident in the final result knowing that it was according to the up-to-date standards of the design syste

The Lloyds Bank design system saves ~$200,000 per project

The head of Design systems for the Lloyds Banking Group, Lily Dart, mentions three main drivers to develop their design system: consistency, quality, and cost. When it comes to cost, the Constellation design system saved ~$4.3mil between June and December 2018 across the projects which used it. More recently, Lily has reported an estimated $13.4mil in savings for the group in two years.

Building a web page 10–20x faster

Tobias Ritterbach, the Experience owner at Sipgate, reported in the Design Systems book: “Having a pattern library for sipgate.de allows us to build pages 10–20 times faster than for other product sites which are not connected to the library.”

The amount and frequency of CSS change significantly reduced

Cristiano Rastelli a UI engineer, spent roughly a year building a design system for Badoo named Cosmo and getting a lot of positive feedback, he then wanted to measure the direct impact the design system had on the company. Comparing the amount of changes in product CSS files to the number of commits in the Cosmo repository, he determined that both the amount as well as the frequency of change was significantly reduced after introducing and devloping the design system, allowing designers and developers to have more time to improve the quality of the application. The charts below aren’t, unfortunately, coming with exact numbers but still, they can show a great example of the design system impact.

A bar chart showcasing how changes in CSS code declined when a design system got introduced.

Source: Cristiano Rastelli. 2019. Measuring the Impact of a Design System [22]

30% cash savings, 10–30% increase in conversions, 10–30% increase in loyalty

In order to introduce the design system to a business’s CIO, CTO as well as Chief Executive Officer, Anja Klüver, collaborated with the business’s UX centre of quality, took actual historic product data and showed the value the design thinking and design system can bring: 30% money cost savings, 10– 30% rise in conversions, and 10– 30% rise in loyalty. They also projected financial savings of EUR2,620,277 on upgrading 10 internet websites as well as 15 mobile applications (and around 1600 customers they had at the time).

More specifically, moving away from the legacy waterfall methodology and investing more in UX to be creating useful products which are more likely to succeed on the market in the first place, they showed that projects could get delivered 30% cheaper and 30% faster.

Two bar graphs illustrating the inefficiency of legacy digital development compared to design system digital development.

Source: Design as an Agent for Change: The Business Case for Design Systems by Anja Klüver

Anja further reported the following figures:

    • Up to 50% time saving on common patterns and journeys

    • Up to 50% reduction in future managed costs (by launching better products the first time, using the design thinking and a design system)

    • Up to 25% increased product dev efficiency & efficacy

    • 2–3x faster to market

    • Up to 25% faster in building functional prototypes

Up to 100x lower cost of fixing a software error early

According to Pressman, as much as 45% software downtime is caused by defective code. Such defective code needs to be repaired leading to a loss of productivity. Software downtime further leads to missed business opportunities and sales, lost or corrupted data, high IT support and low customer satisfaction.

How much does it cost on average to fix errors? “ As expected, the relative costs to find and repair an error or defect increase dramatically as we go from prevention to detection to internal failure to external failure costs.” In the Figure below, which was adapted by Pressmen from, the difference between fixing a defect (e.g. a usability issue) during the design phase vs post-launch phase is approximately 31x lower (!). Boehm and Basili of the Universities of Southern California, and of Maryland state that “finding and fixing a software problem after delivery is often 100 times more expensive than finding and fixing it during the requirements and design phase”. IBM Design also used this figure as a rule of thumb: “Every dollar invested in ease of use returns $10 to $100.” 

 

According to Pressman, as much as 45% software downtime is casued by flawed code. Such defective code needs to be repaired resulting in a loss of productivity. Software application downtime additionally brings about missed service possibilities and also sales/conversions, increase chances of corrupted data, security breaches. high IT support cost and low consumer satisfaction.

Just how much does it cost generally to fix mistakes? “As anticipated, the expenses to find and fix a mistake or flaw increase substantially as we go from prevention to detection to internal failure to exterior failure costs.” In the below image, which was adjusted by Pressmen to show the difference in between dealing with an issue (e.g. a functionality issue) during the design phase vs post-launch phase is roughly 31x lower (!). Boehm as well as Basili of the Colleges of Southern California, and of Maryland state that “searching for as well as dealing with a software application trouble after shipment is often 100 times a lot more costly than searching for as well as repairing it during the requirements and design stage”. IBM Design likewise used this amount as a rule of thumb “Every buck invested in usability returns $10 to $100.”

A line graph showcasing the increasing price of changes on a product, the closer it is to launch + after launch.

Relative cost of correcting errors and defects; Source: Roger S. Pressman and Bruce R. Maxim. 2015. Software Engineering: A Practitioner’s Approach. McGraw-Hill Education. 

Conclusion

A design system can ensure returns of the long-term investment, faster than without it. This solution brings together all the aspects of identity, accessibility and design under one roof. The value of your design system will increase over time, completely ensured by our continuous iteration and service solution. Hopefully, this article will help answering some of the most pressing questions as well as providing some further insignts.

Acknowledgements

Many thanks to:

Fjord for introducing me to Liquid Expectations and Dan Mall or recommending the Design Systems book.