Building Chaayos App

Building Chaayos

App for safe

dine-in

for safe dine-in

for safe dine-in experience

experience

experience

With social distancing and hygiene concerns at the forefront, our goal was to offer a solution that allowed customers to enjoy safe dine-in experience at Chaayos cafes without the need for physical contact with waitstaff or shared menus.

With social distancing and hygiene concerns at the forefront, our goal was to offer a solution that allowed customers to enjoy safe dine-in experience at Chaayos cafes without the need for physical contact with waitstaff or shared menus in the cafes.

Project

Project

mobile app

ui design

My Role

UI designer

Team

sparklin design team

Shipped

may 2020

of the app

Watch a quick trailer of the app

Watch a quick

Watch a quick trailer

trailer of the app

About Chaayos

Chaayos is India's biggest and most loved chai and snacks cafe with over 200+ cafes in Delhi, Mumbai, Chennai and more cities.

Their vision to create a unique tea experience for the consumers of India. With several tea experiments, today the customers of India can easily have access to a good cup of tea and snacks.

Chaayos is India's biggest and most loved chai and snacks cafe with over 200+ cafes in Delhi, Mumbai, Chennai and more cities.

Their vision to create a unique tea experience for the consumers of India. With several tea experiments, today the customers of India can easily have access to a good cup of tea and snacks.

UI design process

UI design process

I joined the project with a team of designers who had already laid the groundwork for the Chaayos App. Prior to my involvement, the team had conducted extensive research, established user personas, crafted intricate wireframes. As a visual designer, my role was to bring the user-centric insights and design concepts to life through the UI. Together, we transformed these well-founded foundations into a visually captivating and user-friendly interface

I joined the project with a team of designers who had already laid the groundwork for the Chaayos App. Prior to my involvement, the team had conducted extensive research, established user personas, crafted intricate wireframes. As a visual designer, my role was to bring the user-centric insights and design concepts to life through the UI. Together, we transformed these well-founded foundations into a visually captivating and user-friendly interface

step 1

Analysing the wireframes & collecting references

We analysed the wireframes and started exploring and collecting references to set up a visual language to start the UI design process.

step 2

Sketching and
UI Design iteration

We designed multiple UI iterations for the screens and constantly reviewed and tested it with our peers and stakeholders.

step 3

Polishing and Prototyping

Every UI element was meticulously corrected to ensure a flawless, visually pleasing user experience.

Figma prototyping enabled in making the design tangible, interactive, and easy to comprehend for all stakeholders

step 4

Design handoff

In the final stages of the project, we prepared comprehensive design assets and documentation for the Chaayos development team. This included creating detailed design specifications, comprehensive style guides, and delivering all essential graphic assets

Colours

Colours

We made a deliberate choice of limited colour palette which included a small set of primary and secondary colours. This approach was used to ensure visual simplicity and consistency throughout the design. By restricting the number of colours, we created a more cohesive and harmonious user interface that is both aesthetically pleasing and user-friendly. This simplification also made it easier to maintain brand identity and ensure that the design remains consistent across different screens & devices.

We made a deliberate choice of limited colour palette which included a small set of primary and secondary colours. This approach was used to ensure visual simplicity and consistency throughout the design. By restricting the number of colours, we created a more cohesive and harmonious user interface that is both aesthetically pleasing and user-friendly. This simplification also made it easier to maintain brand identity and ensure that the design remains consistent across different screens & devices.

Primary colours

Primary colours were inspired from the Chaayos brand colours to keep it aligned with the brand and also keeping in mind the contrast & sensitivity of the UI

Chaayos Dark Green

#4A8132

White

#FFFFFF

Secondary colours

Secondary colours were inspired from brand colours & primary colours

Chai Yellow

#FAE8BE

Chaayos Light Green

#E7F5EA

Typography

Typography

We went with Nunito as the typeface for the project because Nunito is known for its balanced and versatile sans-serif design, making it suitable for various digital platforms, including mobile apps. Its rounded terminals convey a friendly and approachable feel, which can enhance the user experience by creating a welcoming atmosphere within the app

We went with Nunito as the typeface for the project because Nunito is known for its balanced and versatile sans-serif design, making it suitable for various digital platforms, including mobile apps. Its rounded terminals convey a friendly and approachable feel, which can enhance the user experience by creating a welcoming atmosphere within the app

Iconography

Iconography

The iconography style was thoughtfully designed to align with the brand's modern and user-friendly identity. The icons are clean, simple, and easily recognizable, ensuring that users can quickly grasp their meaning. Consistency was a key principle, with all icons adhering to a unified style, creating a cohesive visual language across the app. These icons were carefully tested for scalability, making sure they remained clear and legible in various contexts.

The iconography style was thoughtfully designed to align with the brand's modern and user-friendly identity. The icons are clean, simple, and easily recognizable, ensuring that users can quickly grasp their meaning. Consistency was a key principle, with all icons adhering to a unified style, creating a cohesive visual language across the app. These icons were carefully tested for scalability, making sure they remained clear and legible in various contexts.

UI screens

UI screens

Home screen

Home screen

The home screen is designed for effortless navigation. It features an 'Express Order' section, intelligently pre-selecting the user's frequently ordered items for convenience. Users have the flexibility to either confirm these selections or explore the full menu. The interface offers a seamless transition between grid and list views, enhancing user choice and accessibility.

The home screen is designed for effortless navigation. It features an 'Express Order' section, intelligently pre-selecting the user's frequently ordered items for convenience. Users have the flexibility to either confirm these selections or explore the full menu. The interface offers a seamless transition between grid and list views, enhancing user choice and accessibility.

Express Order

Grid View

List View

Cart and Payment screens

Cart and Payment screens

This screen streamlines the ordering process. Once a user adds items to their cart, they can proceed to make payments directly within the app. Multiple payment options are available to cater to individual preferences. Following a successful transaction, a confirmation screen reassures the user of their payment completion.

This screen streamlines the ordering process. Once a user adds items to their cart, they can proceed to make payments directly within the app. Multiple payment options are available to cater to individual preferences. Following a successful transaction, a confirmation screen reassures the user of their payment completion.

Cart

Payment

Success Screen

Other screens

Other screens

This screen streamlines the ordering process. Once a user adds items to their cart, they can proceed to make payments directly within the app. Multiple payment options are available to cater to individual preferences. Following a successful transaction, a confirmation screen reassures the user of their payment completion.

This screen streamlines the ordering process. Once a user adds items to their cart, they can proceed to make payments directly within the app. Multiple payment options are available to cater to individual preferences. Following a successful transaction, a confirmation screen reassures the user of their payment completion.

My Orders

Profile

Offers

Loyaltea Rewards

No Internet Screen

Error Screen

Crafted with passion by an innovative

Crafted by an

Crafted by an innovative

innovative

design team

design team in May 2020

in May 2020

This was one of my first projects as a UI Designer at the innovative design studio, Sparklin, which got successfully completed in May 2020. The Sparklin design team, comprising the founder, head of design, a lead designer, and 2 UI/UX designer including myself, brought their collective expertise to the table. Our journey on this project commenced in February 2020, coinciding with the onset of the Covid-19 pandemic. Together, we embarked on a mission to complete this project while facing the daily battles we had by changing from a work from office model to a work from home model.

This was one of my first projects as a UI Designer at the innovative design studio, Sparklin, which got successfully completed in May 2020. The Sparklin design team, comprising the founder, head of design, a lead designer, and 2 UI/UX designer including myself, brought their collective expertise to the table. Our journey on this project commenced in February 2020, coinciding with the onset of the Covid-19 pandemic. Together, we embarked on a mission to complete this project while facing the daily battles we had by changing from a work from office model to a work from home model.