Hetras had a hotel app that worked, really well, but looked altogether inconsistent
After a few months of working on the Hetras product, I had continually seen the lack of consistency within the design of the product. There were multiple button styles, and multiple error styles and nothing was cohesive.
I collected as much research as I could, and presented the idea of going with a design system for the product. We could fix our broken components, and at the same time improve consistency across the application.
The September previously (in 2016), I had been to a conference in South Africa and heard about Atomic design systems from Brad Frost. It was something I was very keen to try out and my basis for this one.
I had presented to the team how we could go about this, starting small from the atoms and working our way up. This way we could also work iteratively. If we found that colour would not meet certain accessibility criteria, later on, it would be easier for us to change colours across components using the atoms set at the start.
The buy-in from management and the team was almost immediate. They were happy with this approach and we began. You can see below how we iterated with buttons and the date pickers. Working iteratively allowed us to work over components several times until we got to a point with that component was done.
The Atomic Design System process was incredibly helpful in allowing me to test and change things ever so slightly until there was something that looked great.
Months of iterations and testing inside the Hetras+ followed. Small tweaks here and there, as each new screen, was added and each component was tested inside a new environment. Eventually, the design system came together.
This was all used as a sketch library, with easy access for myself to create new screens. I was able to create screens significantly faster than previously. New features in the app. We could present new areas of the app to manage and get ideas into the app faster as well.
