Hostmaker Design Evolution II - from tailored design to a solid & scalable design system
From the touch of a blanket to the button of the guestApp, every touchpoint becomes an opportunity to connect meaningfully - consciously or unconsciously - with our stakeholders.
To ensure a consistent and a seamless experience across all of them, we decided to align all design disciplines around a shared vision - design to create meaningful connections with all our stakeholders- and three main design principles - thoughtful, experiential and flexible design. It was a good start, but it wasn’t enough to get close to a “pixel-perfect '' design.
As different designers and creative collaborate on the design process and as we had multiple platforms and dimensions of our products, we find the need for creating a flexible design system, that becomes the design team central source of truth, and allowing to scale Hostmaker experience sustainably and efficiently.
The Design process
The building of Hostmaker flexible design system started with a list of variables (atoms) that would be used everywhere to keep the different modules unified and the system scalable. We conducted an inventory and audit of all brand and UI elements with its variations and styles, and have some debates to agree on which elements were essential.
The inventory was rethinked to establish foundations: the atoms were redesigned taking in account usability best practices, with web (desktop and mobile) and software versions. The goal was to guarantee its flexibility: we should be able to update any atom without breaking molecules or components.
The different status, behaviour and interaction of the components were planned according to material design principles, in constant communication with the development team, and tested for accessibility in different screens.
The Design System creation was a good exercise where brand and product design work hand in hand, to achieve a responsible and accessible, but flexible design, and learn from each other field.
Make it come to life
We defined a system naming convention, easy to understand and apply, essential to keep the system organised and speak the same language. We based it on Material Design classification.
Zeroheight was the tool we used to help us categorize and present our design system, which integrates perfectly with Sketch and Figma. The development team gave life to it with a parallel investigation, finding the perfect tools to create the components with interactive previews, directly integrated with Zeroheight.
Project Tags
Companies
Hostmaker
- Technology