Saffron Spice
Digital platform for seamless Indian grocery shopping
Role:
Year:
UX/UI Designer
2024
User research, Persona Development, Information Architecture, Wireframing, Prototyping(low-fidelity and high-fidelity), Visual Design, Usability Testing.
Tools Used:
Figma, Miro
Responsibility:
Quick Links
Background
Why I Chose this as my case Study?
Driven by the lack of convenient options for Indian groceries in my area, I designed this website for Indian grocery store. Many existing stores have no online presence, if had one, they are not user friendly and lack informations. Today's busy lifestyles make in-person shopping a challenge. This platform aims to provide a personalized and seamless online shopping experience for Indian groceries, addressing the growing demand for convenience and efficiency.
The stores that have online websites are not very useful for the customers. It was actually frustrating them. There were no information about the products or any useful services offered by them. I want to focus on clarity and impact that is going to be created.
Problem
As a regular grocery shopper myself, I often observe people are frustrated when it comes to their grocery store visits. The challenge becomes even more pronounced for those who are away from their home country, as there are only a few native grocery stores. Despite this, the store’s lack of an online presence, absence of door delivery options, and unavailability of store pickup services add to the challenges especially for the working population. Also the lack of online presence pose significant limitations and impeding the store's ability to reach a broader customer base.
Goals
The primary goal is to establish a robust online platform, creating a significant digital presence that goes beyond the grocery store's physical location i.e., aiming to build a website that should be easy to navigate and use, even for those unfamiliar with online grocery shopping. This means an intuitive design, clear categorization of products, and a smooth checkout process. The website should go beyond simply selling groceries. It must educate users about Indian ingredients, inspire them to try new flavors, and should involve recipe suggestions and cultural information sections.
Research
Empathetic Design Approach
“When you start with empathy, you move from designing for users to designing with users.”
User-centered design starts with understanding users' feelings deeply and compassionately. By empathizing with their experiences and needs, we uncover valuable insights that inform our design decisions. Asking thoughtful questions not only helps us discover new user problems but also paves the way for innovative solutions to enhance the overall user experience.
I started to ask questions:
who are the users I am targeting,
which features will be useful for them,
what are their goals and
what are the users needs, pain points and desires
Methodology
The user research strategy comprised of Competitive Analysis, interviews with certain demographic range of users, providing an intimate understanding of their motivations and pain points. I conducted non-direct user interview with the target customers. Through this I gained valuable insights that served as the foundation for my design decisions.
Competitive Analysis
Know your enemy and know yourself, and you can fight a hundred battles without disaster." - Sun Tzu, The Art of War
By examining how existing online stores operate, I gained valuable insights into what works well and where there's room for improvement. This knowledge empowered me to create a website that stands out from the crowd and understand the target audience's online shopping habits and preferences for Indian groceries. Also this allowed me to design a user-friendly experience that caters to their specific needs.
User Interviews
To gather a well-rounded perspective on online Indian grocery shopping experience, I talked to people with diverse backgrounds. This included individuals of different age groups from graduate students to retired people, representing various professions like chefs, software engineers and homemakers, and with varying family situations like single, married with children. This diversity helped me to understand the user needs, pain points and preferences of broad range of customers.
Interview Goals
Grocery Shopping Habits
Understand the participant's grocery shopping preferences
Know about pain points in their current experience.
Online Grocery Experience
Investigate past experiences with online Indian grocery shopping, including both positive aspects and challenges encountered.
Explore what might make people who currently shop for Indian groceries in-store feel comfortable switching to online shopping.
Website Features & Expectations
Gather insights about desired features for an online Indian grocery store
Understand what information is crucial for product pages to help me in decision-making about the design.
Identify common concerns about online grocery shopping.
User Pain Points
Paint Point 1
Not able to personally select fresh produce and can’t be sure if they're getting the right products when ordering online and Limitations in selection and availability at smaller local stores.
Paint Point 2
Long drives to physical Indian grocery stores and limited selection at local stores are major inconveniences.
Paint Point 3
There is no inspiration or guidance with recipe suggestions when shopping for Indian groceries online.
Paint Point 4
Not comfortable with online shopping, Difficulty managing heavy bags after shopping trips.
Define
“To design meaningful solutions, we must first define what matters most.”
User Persona
Based on user research, I've developed a user persona named Rohit. Rohit embodies the characteristics and goals of a typical user group I identified. Personas like Rohit helped me understand the needs and challenges of the target audience, allowing me to design a website that truly meets their expectations.
User Story
User stories keep the emphasis on who you're designing for and the problem you're solving, not just on technical details. User stories can also serve as a “checklist” to make sure we’re addressing and solving the key problems the users might face when engaging with the product.
User Journey Map
The primary goal is to identify the pain points, challenges, and opportunities throughout his grocery shopping experience. The ultimate aim is to guide the design of a seamless and convenient online platform, ensuring that Rohit's journey is streamlined, efficient, and aligned with his preferences and values.
Project Goal
Defining the project goal will define success. Before I frame the project goals, I have to first concentrate on the user goals and the business goals. Here, the user goals will define what the users expect when they are shopping indian groceries. The business goals concentrates on what the business is focusing, like what they are aiming to achieve, increasing the sales and be upfront and gain competitive advantage. The project goals should be the elements that align both user goals and business goals. It should benefit both the users and the business. In this case, having Pickup and Delivery option will make Saffron Spice standout from the Competitors and thus it fulfills both the user and business needs. The project goal should answers what does a successful outcome look like, both from the user's perspective and the business standpoint. Understanding the project goals will prevent scope creep and ensure the features designed truly address user needs.
Problem Statement
Goal Statement
A well-defined goal statement served as a guiding light for this project. It established clear vision and helped me through every design decision by addressing core user problems. It keeps the project, user-centric. It served as a contact reminder about the user pain points and needs that has to be addressed. It helped me to continually evaluate the progress and make adjustments whenever necessary, paving way to achieve the desired outcome.
Ideate
“The key to ideation is not coming up with the “right” idea but with generating a breadth of possibilities.”
Site Map
I designed a sitemap to create a clear blueprint of my grocery website's structure and content hierarchy. This serves as a navigational roadmap, ensuring that users can easily find the information they need. A well-organized sitemap promotes a seamless user experience by making it easy to browse products, find recipes, or access important pages like contact or shipping information.
User Flow
I designed a user flow to visualize the step-by-step journey a user takes while interacting with the grocery website. This helped me identify potential roadblocks in the experience before the website is built. By mapping the flow, I was able to streamline processes, ensure important information was easy to find, and create easy path for users to successfully accomplish their goals, whether that's finding a new recipe, adding spices to their cart, or completing checkout.
Story Boards
I designed a storyboard to visualize the user's experience with our grocery website. Storyboards are useful because they help transform ideas into narratives. This allows me to identify potential pain points or moments of delight early in the process. Furthermore, a storyboard ensures that I am working towards a vision of an ideal user.
Low-Fidelity Wireframes
Paper Wireframes
The Paper Wireframes are the essential part of early stage of designing, it allowed me to sketch some layouts structures. It helped me to focus on the structure and it’s content. Also designing paper wireframes ensures that the layouts and navigations are well planned before deciding about the visual aspects.
Digital Wireframes
The Digital Wireframes are basically a visual blueprint that help us to visualize the user flow. It allowed me to preview the design and to iterate and adjust the layouts to fit the screen size effectively. I focused on designing a website with interactivity and ease to navigate techniques in mind.
Responsive Lo-Fi Wireframes
Testing and Improvements
After the wireframes were created, I decided to do some first round of testing through interviews in which users were asked to perform a some tasks like add products to cart, edit profile, save credit card, check out etc. By watching users use the product I found that there is still a lot of improvements needed and that there were a lot of areas that were confusing and are not clear enough. There were some suggestions about functionality they would like to see that might improve the quality of the website.
Feedback:
Can't easily tell which page they're on because the menu bar doesn't highlight the active section.
Fix:
The selected menu in the menu bar is highlighted.
Feedback:
It is difficult to find the store address. Add the Store location in header to easily access the address.
Fix:
Store address and phone number is added to the header section.
Feedback:
Need provision to add/Edit the delivery address when adding the product to the cart.
Fix:
Add/Edit address button is placed in the product section.
Feedback:
Suggested an additional feature in recipe section to display the ingredients quantity according to the serving size.
Fix:
Customize serving sizes and ingredient amounts adjust automatically.
Taking all into account, I made some changes to the wireframes and I wanted to do a second round of testing.
When doing the first iterative testing, almost 40% of the users were able to complete the desired task without confusion. After making some changes, about 70% of the users were able to complete the tasks and commented about the simplicity of the website and ease of navigation.
Prototype
“A prototype is a conversation starter. It's a way to get your ideas out of your head and into the hands of users.”
Mood Board
A mood board helps me define the website's overall look and feel. By collecting images, colors, textures, and typography evoke the desired ambiance. They capture the "vibe" i want users to feel when interacting with the site.
UI Kit
I designed a UI Kit to streamline the development of the website and ensure a cohesive user experience. This is an Indian grocery Store Website so I have created a kit that reflects the brand adjective.
Brand Adjective
Green
Energy
Earthy
Modern
Fresh
Color Palette
Logo
Buttons
Fonts
Icons
The reason I chose the Website name, Saffron Spice and the Logo, a Lotus flower,
Saffron Spice: Saffron is a precious spice commonly used in Indian cuisine. It evokes a sense of luxury, quality, and authenticity. The theme for the website also resonates with Indian Flag. The flag has Saffron color on top, White in the middle and Green in the bottom. I want to incorporate this in the website to give a true sense of Indian culture and emotion.
Spice: This is a term for flavorful ingredients, and using it in the name alongside saffron emphasis the connection to Indian cuisine.
Logo:
Lotus Flower: The lotus holds profound cultural significance as the national flower of India. It represents purity, enlightenment, and power. These qualities reflect the values such as providing pure and high-quality ingredients or offering a positive shopping experience.
Combining Name and Logo:
The combination of the name "Saffron Spice" and the lotus flower logo reinforces the idea of a high-quality Indian grocery store that offers a curated selection of spices and ingredients.
