Review of Invisionapp’s Design System Session
Introduction
This Invisionapp’s design system manager episode reveals how organizations deal with challenges of scaling digital product design. It also reveals how the design system can bring teams together and help them provide consistency in products.
John Gall, a pediatrician said, “every complex system, that works was invariably created from a simple system, and that every complex system that was created from scratch as a complex system always breaks and fails and cannot be patched to work”.
Take-out for Designers
The most important take-out is to understand how to collaborate better and be consistent in design patterns and vocabulary.
More advantage for Design system
Most teams might kick against devoting resources into building a design system. I admit it feels exhausting at first. But there are a ton of advantages of having a design system. Brad Frost says “Design system promotes UI consistency and cohesion, allowing users to get done what they need to get done.”
For a team that works on a robust product, the design system allows for faster production and higher-quality production. It establishes a shared vocabulary among the team and between different products.
UI kit is not really Design system
A designer’s first definition of a design system is a UI kit. To create a comprehensive UI kit, specific tools like Sketch, Illustrator and any other tool would be used. Creating this UI kit is limited to a few specific tool and if a colleague isn’t proficient with this tool, then we haven’t worked collaboratively. This assumption denies us of the importance of having a design system within a team; therefore, UI kit is not design system but just a subset.
Gathering Interface Inventory
Brad Frost explains how we can basically round up and collect all of the instances of UI design patterns across an organisation’s different products. This could include different Typography, Colour Palette, Buttons, Form Fields, Icons, List views, Tabs — Navigation, Headers, Footers and the list goes on.
This stage involves the entire design team as everyone has been responsible for designing part of the products at one point.
It would help better to take screenshots of these web components from different products and different screens. We can dump these screenshots in a Google doc file, and share file with the rest of the team.
Now that our Interface Inventory is glaring, we can then sort them by category. Decision can then be made on which elements should be adopted for our products.
In conclusion
Design system came from this thought of how to find patterns where teams will know how to use things without looking too hard. It should include style guides to writing guidelines to the product voice and tone. Design system goes as far as caring about development processes like how to deploy systems and how to contribute to products.
In the coming weeks, I hope to share more about my thoughts on Design system as I also learn more from Invision’s DSM series.
https://www.invisionapp.com/design-system-manager/expert-advice/heartache-design-scale
Design system video series — Master product at scale with Brad Frost, Dan Mall, and Josh Clark.
