Design Systems are the ”new norm” in the product design industry
Market transformation is accelerating in every field, and also the importance of production line resiliency is constantly increasing. Customers require rapid change, businesses merge, and others close down. Some solutions gain popularity and boom, while others become obsolete.
This constant change also requires product and service development processes to react and adapt to new situations more rapidly than ever. To enable this, a systemic approach is needed. Design System is a solution to manage changes in product development in a sustainable and profitable way.
Design System ensures an efficient development flow between different organization units in an ever transforming, complex environment.
Design System – what is it?
As the naming affirms, a Design System approaches the product development systemically, on both atomic and holistic levels. Every developed element – be it an icon, software code or a component shape – is part of a bigger product portfolio system and can be utilized in several instances. The system gets updated in real-time by designers, developers and engineers, and always provides access to the most recent materials.
“Design System also streamlines the design maintenance process. This maintenance impact is significant specially in software development: When one item is changed, it will be automatically updated in all its instances. This reduces the manual updating burden greatly.”
Design System enhances collaboration and communication
Some of the key ideas of a Design System are accessibility and transparency. Design System provides a platform that all stakeholders are can access in real-time, be it the marketing department, construction, manufacturing, production, industrial design, software development, or user interface design unit, for example.
Design System elements
Design System adapts to organizational needs, and the elements it covers can vary. Some of the more common elements are:
1. DESIGN
- Visual building blocks
E.g. Icons, Universal shapes, Font sizes and typefaces, Warning labels, Color Palettes, Components and modules, Templates - HMI patterns
E.g. Error patterns, User Interface interaction rules
2. PROCESSES AND STANDARDS
- E.g. Ergonomics, Tone of voice, Design Principles, UI grids, Implementation standards
- E.g. Design-Manufacturing workflow, Design-Code workflow, Component version control, Component adaptation and management, Naming structure
3. ENGINEERING AND SOFTWARE DEVELOPMENT
- E.g. Code snippets and base, engineering specific work-flows etc
Start small
Instead of starting from a giant development effort when building the Design System, start small. Proceed step by step in phases that will bring instant value to your development process. Be agile and proceed in increments.
Start by making an inventory of the existing components and identify the universal elements. Start to build such a component library that everyone can access and update (get in contact for more practical tips). More elements can be then added later on to the system – let it grow alongside the natural development cycle.
Build your Design System iteratively. Design System is never ”ready”; rather, it is a constantly evolving artifact. It is more of a scalable platform and approach, than a ”single shot” solution.
Design System saves money and increases velocity
Some of the commonly faced problems and Design System solutions:
Problems: |
Design System Benefits: |
|
|
Without a design system: |
With a design system: |
|
|
Let’s say we have a multivendor team of 40 people – designers, engineers and programmers. And let’s assume all of them spend in average 30 minutes per day pondering about the following issues:
”What shade of blue are we using?”
”Can you redesign this? We can’t build it”
”Where’s our logo?”
“Do we have already an icon we can use for this function?”
“How did our new colleagues in the other department solve this?”
”Was this pattern used somewhere else?”
“How do we build this pattern?”
”Where are our approved stock photos?”
“Can you rebuild this, it doesn’t match the design?”
“What’s the latest documentation?”
“Does this meet the code/construction standards?”
“Where are our universal components?”
–> 2,5h/week per person * 48 weeks * 40 people = 4 800 h.
Let’s multiply that with a cost of 70€/hour = 336 000 €
In this example, the annual ROI of a Design System would be 336 000 €.
And even more: this calculation doesn’t include the cost of re-building nor bad customer experience due to wrong component usage in the development process.
And let’s not forget the human factor: Using a Design System provides a motivational and productive boost for the employees by removing everyday workflow obstacles.
Gofore’s case examples
We have successfully created several Design Systems for our clients, e.g. public sector, mining technology and agricultural manufacturing. These solutions serve the development of dozens of services and products. (Contact us to hear more, we would be happy to share our experiences).
What next?
We’re happy to help you to plan on how to take the Design Systems effectively in use so that it supports your business and processes. Book a free planning session with us: jonna.iljin@gofore.com or call: +49 173 391 0744
Read also:
Design Systems Simplified – An Outlook Beyond the Trend
Jonna Iljin
Designer