Formulating the MASALA Design System for Kolkata Chai Co
Standardising and uplifting the authentic awaz (voice) of the elements that make up New York's hottest Chai brand.
Overview
Kolkata Chai Co. is an authentic Indian chai brand started by two brothers with roots in Kolkata, India with the simple aim of extend the authenticity, respect and tradition behind a cup of masala chai to NYC
DURATION : 14 weeks
PROJECT TEAM : Nikita Bawa, Shivani Kolte, Tanmaya Jyothula
CLIENT : Kolkata Chai Co. (unofficially)
PROJECT CONTENTS : Design system, UI Inventory, Figma UI Kit
My Role
-
Evaluated a comprehensive UI Inventory of the constituents of the Kolkata Chai Co. website.
-
Analysed the need for a design system based on documenting inconsistencies based on brand guidelines and values across the website.
-
Documentation of the MASALA design system on zeroheight.
A small preview of the flavours :
Have a look at a quick preview of how smooth the collaborative building process is after a design system is established before we get into the nitty gritties of why we needed one.
"Design systems are a culture change disguised as a UI KIT"
- Lauren LoPrete
WHY A DESIGN SYSTEM?
Distilling the website down to get a closer look at the ingredients its made of
A breakdown of the website's components and ui elements clarified the existing structure and gave a perspective of the existing patterns
APPROACH :
As the website presented to be a vast variety of elements and layouts made up of several different elements and their permutations.
(fig 1) Overview of the interface inventory
Sifting through the identified elements systematically and spotting the missing ingredients
APPROACH :
We decided to build on an MVP and worked on three distinct sections - Homepage, About Us and the Product page - that we saw were recurring through the website in different combinations.
From this, guided by Brad Frost's atomic design model we, reverse engineered the framework and broke the sections down to identify the atoms, molecules and organisms that existed
(fig 2) The elements on the website broken down referring to Frost's Atomic Design model.
WHAT IS IT MADE OF?
WHAT IS IT MISSING?
Assessing the missing spices and how they needed to be added in
-
The layouts lacked structure and heirarchy proving difficult for screen-readers to read them in the right order
-
The implementation of the typography was randomised and unlearnable.
-
The grids and spacing were varied across pages
(fig 3) Cards from the 'Homepage' and 'Store Location' page exemplifying the lack of consistency and structure in the pages.
The website had inconsistencies across the application of elements such as banner layouts and product cards without different purposes assigned to them which increased the cognitive load and also hindered the scaleability. We also identified a unique factor of the website's brand which was the scrapbook feel which was elevated through curated juxtaposing layouts. While this was fun to scroll through, it made the website inaccessible on multiple levels covering factors such as readability, visibility and therefore the parsability of the information.
-
Due to the inconsistencies presented, the scope for scaleability was limited as there were no set modularity to follow and the expansion of the brand was thus difficult.
-
The example below gives a glimpse of the 'product card' which is of primary importance as a component given the commercial nature of the website - but occured in random variations across teh website.
-
The main challenge with accessibility and retention of the brand essence presented in the unique typography style established across the website. Though visually pleasing, it was illegible and the colour contrasts did not match WCAG guidelines which was a basic issue that needed immediate attention.
(fig 6) Screenshots of sections on the website presenting accessibility issues through contradicting the WCAG guidelines on Colour contrast and text on image regulations for visual layouts.
(fig 5) Various product cards appearing across the website.
Leading to the question...
How might we
-
Retain the brand essence of a scrapbook style but make a more accessible website.
-
Introduce a structured yet versatile design system that imbibes the principles of Authenticity, Boldness and Clarity.
Creating the MASALA base
After outlining a main value product and the primary issues that we wanted to improve upon through the system, we outlined established the basics and provided guidelines on their usage and aspects such as variations, do's and don't's and their accessibility standards to keep in line with MASALA's principles of boldness, authenticity and clarity.
Laying down the Foundations of Colour, Typography, Icons, Layouts and Images
(fig 7) Foundations of MASALA
The standardisation of elements such as typography and colour were some of the cementing factors that empowered the flexibility we were able to provide in building components in the next steps.
A diverse booklet of fonts that the website presented (prior to the design system) were undocumented and presented a difficulty for use in the expansion of the website. The documentation of the typography and its usage clarified and increased the understandability of the scrapbook feel of the website. Similarly, the colour - foundations limited the variation across shades and tones and gave a more constructive freedom in the customisation of the components.
(fig 8) Foundation/Typography
(fig 9) Foundation/Colour
Building intentional Components from the foundational atoms
Following the incremental process, we then build out purposeful components such as the banners, buttons, cards and text blocks which facilitated..
and were documented in a way that provided just enough of a guideline to allow the creativity of the Eclectic compilation impression that was to be maintained through the designs across the website.
(fig 8) Featured components from MASALA
An example of this is the provision of the hero cover card that allows for different images and badges added to it but limits the design in terms of incorporating stroke only text and laying text on images following the Accessibility standards.
(fig 9) Examples of inaccessible components on the existing website + the documentation proving guidelines to solve for the same.
Consideration of the people that hold stakes in MASALA and its usage.
INTERNAL STAKEHOLDERS
Design Team, Development Team, Product Managers, Executive Leadership
Effeciency
Scalability
Collaboration
EXTERNAL STAKEHOLDERS
Clients, Partners or Contractors, End Users
Consistency
Accessibility
Usability
Taste-testing MASALA
(Peer review)
.jpeg)
Having considered the different stakeholders, we tested with designers and people with experience as developers to see how MASALA performed.
(fig 10) Peer review in process
(fig 11) List of updates and changes to be made from the feedback received
The review majorly showed us issues with some of the categorisation of the elements enclosed within the design system leading to decreased searchability, An example of this was the hero cover which 2/3 participants did not expect within cards. components but had a section of its own and made us realise a lack of responsiveness with some of the components.
On the bright side we had covered elements in a way that 90% of the homepage was replicated successfully within 10 minutes by a person using the design system for the first time.
(fig 12) Replicated homepage during peer review
Final flavour adjustments
After the peer review, we made some much needed changes to improve upon categorisation, labelling, proper documentation and the responsiveness of the components.
Serving the chai with the final MASALA
“The name of the system is so apt, would you like to actually pitch to them? They would love to find out about this“
The team pitching MASALA to the class who assumed the roles of internal stakeholders as the design team for Kolkata Chai Co.
Future Work
-
Pitching to Kolkata Chai co.
-
Working with a developer to adjust the language and labelling of the system in a way that it caters to the primary stakeholders better.
-
Expanding the components section with more customisations to make the website more unique keeping in mind accessibility as the guiding factor in interactions.
-
Exploring how the system and the website expand from a small scale business to one needing a more detailed and nuanced system as it grows bigger.
Learnings and Takeaways
-
Attention to detail : When creating a system, the atoms are repeated on multiple occasions and therefore need to be created intentionally, so that the components and thus the molecules and organisms developed further are accounted for.
-
Importance of tokens : Establishing the basics to start with is of utmost importance in order to not have to go back and fix issues retrospectively.
-
How a well articulated documentation of a design system (however small) can make things much easier in terms of usage by all audiences.