Khaswad Khajina
Khaswad Khajina offers traditional Indian sweets and snacks. The products are all homemade, fresh, and custom made to order. A brand run by two mothers made with love and healthy ingredients. The project aimed to design a responsive web application for Khaswad Khajina. The goal was to create a user-friendly and visually appealing interface that adapts seamlessly to various devices and screen sizes. This case study outlines the key stages and decisions made throughout the UI design process.
Project Type:
UX/UI Design
Date:
2023
Platform:
Responsive Web App
Client:
Career Foundry Student Project
Tools:
Figma
Photoshop
UX Design
Research
The usability research was conducted by analysing the competitive products in the market to understand their common UX/UI patterns.
1. Patil Kaki: UX Competitive Analysis
Patil Kaki is an home grown bran started in 2020. They supply home-made snacks and sweets all over India. They are a small team of 25 people.
Usability
-
The app is intuitive and easy to follow. Users can easily navigate between different food items offered by the business.
Navigation Structure
-
The navigation of the app is simple.
-
Users can also scroll horizontally and vertically on screen to view and access multiple programs and options
Calls to Action
-
Prompts to start shopping and adding items to cart.
Layout
-
The layout is simple, There is a top navigation bar, which allows users to navigate between different food menu offered by the business.
-
There is banner at the top which offers contact and business information.
-
Another banner also displays announcements and offers.
-
A top banner has call to action button to start shopping.
-
The cards layout to display food products is inconsistent.
Compatibility
-
Patil Kaki is a web responsive app
2. Chitale Bandhu Mithaiwale: UX Competitive Analysis
The Chitale Bandhu Mithaiwale company operates in Maharashtra and specializes in Indian snacks. It was started in 1950 and first outlet was established in Pune. Today it has multiple outlets in all major cities in the state of Maharashtra but their products are found in stores all across India. They also export their good to USA, Singapore and Israel, catering to international market.
Usability
-
The app is intuitive and easy to follow. Users can easily navigate between different menus in the navigation bar.
Navigation Structure
-
The navigation of the app is simple.
-
Users can also scroll horizontally and vertically on screen to view and access multiple programs and options
Calls to Action
-
Prompts to start shopping and adding items to cart.
Layout
-
The layout is simple, with a top navigation bar, followed by a carousel promoting their products.
-
As a user scrolls further, a cards layout showcasing different food categories to choose from.
-
A further scroll showcases best sellers, and a brief history about the company and client testimonials.
-
In the products page, there is always an option to filter according to categories, and sort the products alphabetically or based on pricing.
-
It is also possible for users to change the card layout, to view further details of the product.
Compatibility
-
Chitale Bandhu is a web responsive app
Analyzing competitive products for UX/UI patterns, common navigation calls to actions were identified. Consequently, iterative design decisions are made based on design strengths and weaknesses, resulting in more user-centric and competitive digital products.
UX Design
User Personas
User personas were developed to understand and empathize with the users.
Aisha: Food Enthusiast
Age: 25 Yrs
Gender: Female
Profession: Marketing Manager
Status: Single
Location: Mumbai, India
Aisha is 25 years old and works in marketing. Her recently acquired job required her to relocate to Mumbai from Indore. She usually has a hectic day balancing her job and the move. She enjoys eating and misses her mother’s sweets & snacks. As she works long hours, she needs healthy snack options. She avoids store options because she believes they contain too many preservatives
“I hope I can find some delicious and freshly made snacking options which remind me of home so that I am not hungry and be productive at work.”
Daily Activities
-
Morning Yoga
-
Household errands
-
Working on Marketing Strategies
-
Other office duties.
-
Socializing
Motivation
-
To stay healthy with eating right.
-
Finding healthy snacking options.
-
Wants to eat food rooted in Indian culture.
Needs and Goals
-
Wants freshly made food products.
-
Wants food from traditional recipes
-
Wants to order them Online.
Frustration
-
Missing Home-made food
-
Cannot find healthy options for snacking
-
Store bought products are unhealthy
UX Design
User Stories
User stories were constructed to understand the users experiences with Khaswad Khajina’s responsive web app.
As an unregistered user, I want to create a profile so that I can track my orders.
As a registered user, I want to login to my profile so that I can track my orders.
As a user, I want to be able to save or mark products I enjoyed or interested in.
As a user, I want to be able to browse through various products offered by Khaswad Khajina.
As a user, I should be able to order and pay for products Online.
As a user, I want read the description of the food products and read its ingredients.
UX Design
User Flows
In order to illustrate the overall navigation and structure of the app, user flows are developed.
UX/UI Design
Low-Fidelity-Wireframe
Low-Fidelity wireframes were created to understand and establish basic layouts and navigation patterns
UX/ UI Design
Mood Board
Two mood boards were created to identify the visual mood of the product. A brand's philosophy and ideology were reflected in both mood boards.
Mood Board 1
Mood Board 2- Selected Option
