Design Language System
Garden
Garden is a design language system which aims to deliver a consistent experiences across different verticals. Garden is an ever evolving system to solve the problems of component based design.
Garden was made for GuestHouser to solve their need to ship features fast to millions of users. Built on needed a coherent system to achieve a less-code fast-iteration framework
Understading the problem?
Garden was built to serve more than 10,000+ users. The aim was to create an ecosystem for both development and design team. An ecosystem that can house rapid changes and A/B testing. Another problem that garden solves through its engineering is to create a holistic solution for cross device platform dependencies. Garden now works seamless with all screen sizes and devices which is driven by just one library
Principles
Like any other solution, Garden is built on three core principles. Any new component which is to be added the ecosystem should adhere to these principle strictly
Clear
Garden is designed and built to be accessible to all, regardless of ability or situation
Consistent
Garden is designed elegantly to ensure consistent, cohesive user experiences.
Modular
Garden is made to ensures maximum flexibility in execution to fit the user
Process
Garden was started off with research and trying to analyse the actual problem. A lot of discussions with developers on selecting the right approach to create a component. Garden also experiences a lot of overhauling happened during the initial phase of the system with difficulties keeping all platform teams on the same ground for approaching a problem
Startegise
started with organizing and strategizing the life cycle of our design system
Research & Brain storming
Made sure every developer was looped in the weekly meetings we had. Approach was the key
Design
time to show off visual design & interaction design skills
Develop
Each component we designed, straight away went to the developers to code
QA
Design and code review check by our QA engineers
Build Guidelines
Once component is set in place, write guidelines & how to use it in the system
Evolve
Ever evolving system that caters changes but with some fixed parameters
Colours
Garden was built to open source later. One can easily modify the exposed variables and create a new identity for their system. The colour palette restricts to the most primitive shades required. Each colour has a core colour and the 4 shades created around it by manipulating the saturation and luminosity values
Typography
The classic typographic scale is a harmonious progression of font sizes, like the notes of a musical scale. The formula was used to deduce the typography scale for the entire system. Garden is built using major third(1.250) scale. Line height follows the standard golden ratio (Fi * 1.618)
Iconography
Modified version of feather icons is used in Garden, a two tone appearance can be seen in the icons. Garden also has a provision to use Material Icon pack. Total of 230 icons are available across the system
Components
Garden is designed in Sketch and versioned in Abstract. Garden has logical pinnings and adaptive layouts, you can scale the components to any width or height without worrying about inconsistencies in spacing or padding. Over 100+ components following atomic based design approach are available. The system has one parent sketch file governing all the components and can't be modified once included in the following child sketch files
Screens
With over 50+ screens re-designed using Garden, the entire application has a fresh and young look to it. The aim to create an experience for the user was achieved using the new principles and design language system. The library will go in beta testing from mid June. Have a look at some of the designs made from the new language