Amaan Dola's Portfolio

Introduction

MR AND MRS IDLY

A Perfect Place For Authentic South Indian Food. You Can Enjoy Soft Idlies, Crispy Vadas, Authentic & Fusion Dosas & Uttapams, Variety Of Rice, Chinese Cuisines, Filter Coffee And Lots More.

*Original

We identified the need for a new design system for Mr and Mrs Idli to ensure consistency and efficiency across various features and interfaces. We recognized that without a design system, inconsistencies in design and user experience could lead to a confusing and frustrating experience for users and that could hurt brand’s reputation.

Problem

Websites does not have a proper design system

User experience

Brand identity is not followed everywhere.

Solution

Creating a design system and Redesigning the website such that it resembles the brand identity of Mr and Mrs Idly

Redesign to resemble a website rather than a menu for a more user-friendly interface.

Create a brand system that can be followed everywhere.

Improve the user experience on the platform.

To properly understand what problems the users are facing with the website we took interviews of the customers.

Navigation bar visibility.

Meal service and catering service has no mention on its websites.

Research

Findings

User Research

User research is important to understand users, their needs, their pain points. It helps me to go in a correct direction for redesigning this project.

Aradhya

Sujal

Amaira

"Can’t see much of the navigation bar"

“Loves south indian food as it is has less calory and it is very nutrtious”

“The overall user experience on the website falls below expectations."

Redesign to resemble a website rather than a menu for a more user-friendly interface.

Does not really care about the website.

Improvising user expeirence

Journey Mapping

I tried to define the journey of a potential user of the website and the pain points he/she faces during it.

Amaira

Amaira visits the website frequently whenever she wants to see the menu

The navigations are

not visible and the

illustrations are very

cluttered.

Main Page

The images are way to

big and instead of it being

before the menu it should

be after it.

Our Gallery

Font size too small,

no visual hierarchy.

Hard to read

Too cluttered

Book a table/

Turning Insights Into Concepts

I took the insights from my user research and explored the potential solutions.

The meal and catering services are already available to people via offline medium why not introduce them to the website also.

Introducing Meal services and catering service

While taking interviews we came across a unique insight that people also see south indian food as light but also high in fiber, antioxidants, vitamins, and minerals.

Adding a interactive food carousal that shows all the details about the food for calorie conscious people.

Roadmap

Scene:-

Home to menu to order now

Entry

(user lands on the home screen)

Selection

(Browses items, add to the cart)

Exploration

(Navigates to the menu)

Checkout

(View cart, proceeds to order)

Completion

(Provides delivery details, select payment)

Confirmation

(Receives order confirmation)

Scene:-

Home page to catering service page

Homepage Arrival

(user lands on the website home page)

Inquiry/Booking

(Indicates contact or inquiry for more information or booking)

Navigating to catering

(Finds and clicks on the catering section

Confirmation

(Receives confirmation or catering question)

Service Overview

(Explores catering service, packages and pricing)

Scene:-

Book a table

Search and Select

(User selects book a table’s option)

Reservation

(Books a table on the website ,providing details)

Confirmation and Visit

(Receives Confirmation, arrives and enjoy the dining experience)

Finalize and post-booking

(Communicates to finalize details and receives post booking information)

Input Fields

Dropdown

eg: Vikash Goenka

Name

+91

Address

Flat/House no./ Floor/ Building

Area/ Sector/ Locality

Nearby Landmarks (Optional)

Phone Number

17/07/03

July, 2003

Pune

Udaipur

FAFAFA

F5F5F5

EEEEEE

E0E0E0

BDBDBD

Colour Anatomy

Red and yellow color is chosen for this brand to evoke warmth, stimulate appetite, and reflect their bold and vibrant personality as it matches the type of food they serve

We've opted to use grey shades as neutral colors across text and background elements on our website, as they provide a balanced visual appeal and ensure readability while maintaining a cohesive design.

E30000

E31717

E32D2D

E34444

E35B5B

A3A200

C1BD00

E0D900

FFF500

868800

Red

Red1

Red2

Red3

Red4

Yellow

Yellow 1

Yellow 2

Yellow 3

Yellow 4

Grey

Grey 1

Grey 2

Grey 3

Grey 4

Links ,Logo, Buttons, Highlights , Heading

Text and Background

Design System

Buttons

Default

Hover

BUTTON

Default

Hover 1

Hover 2

Normal

No icon

Icon

Small

Other buttons

Get in Touch

3,600/- Per Month

Subscribe Now

Order Now

100+

Cuisine

100+

Cuisine

Home

BUTTON

Default

Hover 1

Hover 2

Normal

No icon

Icon

Small

BUTTON

Default

Hover 1

Hover 2

Normal

No icon

Icon

Small

Primary Buttons

Standard Buttons

Secondary button

Tertiary button

Order Now

Effects

Shadow

#000000 (25%)

#000000 (20%)

Rough Wireframe

Main Page

Catering service

Meal service

About

Hi-fidelity Prototype

Main Page

Menu Page

Added authentic south Indian elements to the illustration

Show their gallery with Carousal instead of big images

Added a proper footer with all the proper link

Redesigned book a table and contact us such that it is properly readable

Introduced meal service and catering service which was only available offline

Redesigned the website according to the design system

Changed the placement and the background color to make the navigation more visible

Made a whole new menu page

instead of keeping it in on one page

Added a interactive food carousal that shows all the details about the food for calorie conscious people.

Gave a new look to the menu

Aligned the types of food to the left,

to give a proper understanding of the menu

Advertised the best item from the food category for better engagement

Before

After

Before

After

Catering Service Page

About us Page

Meal Service Page

Book a Table Page

Design System, UI/UX

Making

Figma Prototype link

MR AND MRS IDLY

more delicious

Creating A Design system for Mr and Mrs idli and redesigning the website according to it.

Timeline

December 2023

( < 1 Week )

Design Role

UI/UX Designer

Team

Amaan Dola

Samiksha Mutha

Figma file link

Conclusion

The long process of researching, testing, and repeatedly honing my designs has led to a project I’m proud of, but still, I believe there’s a lot of room for improvement.

Brand identity is necessary for establishing a clear understanding and connection with a brand.Brand identity is necessary for establishing a clear understanding and connection with a brand.

I'd like to work more on my research method. The sample for my initial interview research was quite small and biased given that they were my friends. While they gave me incredible insights, it definitely would have been better if I reached out to a larger audience for more diversity!

WHAT I LEARNED

SOMETHING I WANT TO IMPROVE ON

Design System, UI/UX

Making

MR AND MRS IDLY

more delicious

Creating A Design system for Mr and Mrs idli and redesigning the website according to it.

Timeline

December 2023

( < 1 Week )

Design Role

UI/UX Designer

Team

Amaan Dola

Samiksha Mutha

Figma link

Introduction

MR AND MRS IDLY

A perfect place for authentic south indian food. You can enjoy soft idles, crispy vadas, authentic & fusion dosas & uttapams, a variety of rice, chinese cuisines, filter coffee and lots more.

*Original

Problem

Websites does not have a proper design system

User experience

Brand identity is not followed everywhere.

Solution

Creating a design system and Redesigning the website such that it resembles the brand identity of Mr and Mrs Idly

Redesign to resemble a website rather than a menu for a more user-friendly interface.

Create a brand system that can be followed everywhere.

Improve the user experience on the platform.

To properly understand what problems the users are facing with the website we took interviews of the customers.

Navigation bar visibility.

Meal service and catering service has no mention on its websites.

Research

Findings

User Research

User research is important to understand users, their needs, their pain points. It helps me to go in a correct direction for redesigning this project.

Aradhya

Sujal

Amaira

"Can’t see much of the navigation bar"

“Loves south indian food as it is has less calory and it is very nutrtious”

“The overall user experience on the website falls below expectations."

Redesign to resemble a website rather than a menu for a more user-friendly interface.

Does not really care about the website.

Improvising user expeirence

Journey Mapping

I tried to define the journey of a potential user of the website and the pain points he/she faces during it.

Amaira

Amaira visits the website frequently whenever she wants to see the menu

The navigations are

not visible and the

illustrations are very

cluttered.

Main Page

The images are way to

big and instead of it being

before the menu it should

be after it.

Our Gallery

Font size too small,

no visual hierarchy.

Hard to read

Too cluttered

Book a table/

Roadmap

Scene:-

Home to menu to order now

Entry

(user lands on the home screen)

Selection

(Browses items, add to the cart)

Exploration

(Navigates to the menu)

Checkout

(View cart, proceeds to order)

Completion

(Provides delivery details, select payment)

Confirmation

(Receives order confirmation)

Scene:-

Home page to catering service page

Homepage Arrival

(user lands on the website home page)

Inquiry/Booking

(Indicates contact or inquiry for more information or booking)

Navigating to catering

(Finds and clicks on the catering section

Confirmation

(Receives confirmation or catering question)

Service Overview

(Explores catering service, packages and pricing)

Scene:-

Book a table

Search and Select

(User selects book a table’s option)

Reservation

(Books a table on the website ,providing details)

Confirmation and Visit

(Receives Confirmation, arrives and enjoy the dining experience)

Finalize and post-booking

(Communicates to finalize details and receives post booking information)

Turning Insights Into Concepts

I took the insights from my user research and explored the potential solutions.

The meal and catering services are already available to people via offline medium why not introduce them to the website also.

Introducing Meal services and catering service

While taking interviews we came across a unique insight that people also see south indian food as light but also high in fiber, antioxidants, vitamins, and minerals.

Adding a interactive food carousal that shows all the details about the food for calorie conscious people.

Input Fields

Dropdown

eg: Vikash Goenka

Name

+91

Address

Flat/House no./ Floor/ Building

Area/ Sector/ Locality

Nearby Landmarks (Optional)

Phone Number

17/07/03

July, 2003

Pune

Udaipur

FAFAFA

F5F5F5

EEEEEE

E0E0E0

BDBDBD

Colour Anatomy

Red and yellow color is chosen for this brand to evoke warmth, stimulate appetite, and reflect their bold and vibrant personality as it matches the type of food they serve

E30000

E31717

E32D2D

E34444

E35B5B

A3A200

C1BD00

E0D900

FFF500

868800

Red

Red1

Red2

Red3

Red4

Yellow

Yellow 1

Yellow 2

Yellow 3

Yellow 4

Grey

Grey 1

Grey 2

Grey 3

Grey 4

Links ,Logo, Buttons, Highlights , Heading

Text and Background

Design System

Buttons

Default

Hover

BUTTON

Default

Hover 1

Hover 2

Normal

No icon

Icon

Small

Other buttons

Get in Touch

3,600/- Per Month

Subscribe Now

Order Now

100+

Cuisine

100+

Cuisine

Home

BUTTON

Default

Hover 1

Hover 2

Normal

No icon

Icon

Small

BUTTON

Default

Hover 1

Hover 2

Normal

No icon

Icon

Small

Primary Buttons

Standard Buttons

Secondary button

Tertiary button

Order Now

Effects

Shadow

#000000 (25%)

#000000 (20%)

Lo-fidality Wireframe

Main Page

Catering service

Meal service

About

Hi-fidelity Prototype

Main Page

Menu Page

Added authentic south Indian elements to the illustration

Show their gallery with Carousal instead of big images

Added a proper footer with all the proper link

Redesigned book a table and contact us such that it is properly readable

Introduced meal service and catering service which was only available offline

Redesigned the website according to the design system

Changed the placement and the background color to make the navigation more visible

Made a whole new menu page

instead of keeping it in on one page

Added a interactive food carousal that shows all the details about the food for calorie conscious people.

Gave a new look to the menu

Aligned the types of food to the left,

to give a proper understanding of the menu

Advertised the best item from the food category for better engagement

Before

After

Before

After

Catering Service Page

About us Page

Meal Service Page

Book a Table Page

Prototype

Conclusion

The long process of researching, testing, and repeatedly honing my designs has led to a project I’m proud of, but still, I believe there’s a lot of room for improvement.

Brand identity is necessary for establishing a clear understanding and connection with a brand.Brand identity is necessary for establishing a clear understanding and connection with a brand.

What i learned

Some things i want to improve on

All work

Next Project

Spotify

Website Redesign