How we built ‘Kosmos’ a Design System for Vault Intelligence product suite (web, mobile and wearables)
‘Cosmos, or Greek ‘Kosmos’ implies viewing the universe as a complex and orderly system, a system of thought, orderly arrangement.’
Vault Intelligence provides Risk and Safety Management Software. We built a design system to uplift our product build and unify, simplify and add consistency to Vault Intelligence Product Suite.
Vault Enterprise web platform
Check Mobile App
Notify Mobile App
Audit Mobile App
Vault Solo web platform
Vault Solo mobile App
Vault Solo App for Galaxy Watch
Vault Solo App for WachOS
Vault Solo watch (Omate watch)
When I joined Vault to build a new design capability, I immediately identified the need for a design system. The first action was to educate the product team and broader business on the value of a design system then followed by an inventory and a plan to build the design system.
Proving the value of a design system to the team and the business was not difficult but I believe that the key was open communication and bringing everyone along the journey. It was important to show how many hours of designers and developers work can be saved, how it empowers the product team, speeds up the building and nurtures a shared language that is translated in the products we build.
After a workshop with the product team, everyone agreed to help with an inventory of existing components, colours, patterns, accessibility, etc. This exercise reassured everyone of the importance of a design system and helped us to prioritise the work to be done.
Project Management
The design team started working 80/20, 80% of the time working on sprints, research, strategy and 20% of the time working on the design system. We hired Evan, React developer whose main task was to lead the design system from the development side. The IOS and Android developers also decided to work 80/20 to be able to get the foundations right and the system up and running.
We defined our DS ceremonies and workflow:
• Weekly design system review
• Weekly stand up
• Showcases
• Jira board to manage all the design system work from design to development and testing
Our process
We followed Brad Frost Atomic Design principles.
https://bradfrost.com/blog/post/atomic-web-design/
As we were working on Sketch, Craft and Invision we opted to use Invision Design System Management as a host. DSM integrates with Storybook to bring interactive components directly into DSM library. The Sketch integration allowed us to upload Sketch libraries files to DSM making it easy to share the design system.
The Design system
Components, typography, colours, grids, interactions and page layouts are in sketch libraries. Our libraries are organised by devices — web, IOS, Android, WatchOS and Android Watch.
Documentation is a fundamental part of a design system. We wrote our documentation on Confluence for sharing and reviewing before exporting to DSM. Elements, components, patterns are supported by documentation that aims to help the user to understand the design system and work independently.
We took every opportunity to test our design system with designers and developers.
There are other aspects of a design system that are not visual and played an important role in our shared language. Kosmos DS has a section called Experience that contains writing style, voice and tone, haptic feedback, messages, notifications and more.
Kosmos DS in use
