Menu
E-COMMERCE
E-COMMERCE
BatchBox
Empowering Small Retailers Through a User-Centered Design Approach for a B2B FMCG E-commerce Platform
Batch Box is a B2B-FMCG e-commerce app
that offers small retailers a wide range of goods and fast delivery.
Empowering Small Retailers Through a User-Centered Design Approach for a B2B FMCG E-commerce Platform
Work Type:
Work Type:
Conceptual
Conceptual
Conceptual
Role:
Role:
Role:.………………
UX Designer
UX Designer
UX Designer
Year:
Year:
2023
2023
2023
Project Type:
Project Type:
Mobile App
Mobile App
Timeline:
Timeline:
3 Months
3 Months
3 Months
Project Type:
Mobile App
Year:
2024
Store Page
Store page is a central component of the user experience, requiring careful consideration to balance extensive product information with a clean, intuitive layout. To enhance accessibility and interactivity, a vertical filter option has been integrated. This design choice aims to streamline the filtering process, making it easier for users to find and interact with products efficiently.
Product variant page features brings together the different variants of the product, including two distinct wholesale package options, into a single cohesive area.
Product Variant
A mini version of the product card was created to effectively display larger added-to-cart products, along with a section to encourage users to purchase items from their wishlist.
Cart
Payment page includes essential features such as a credit option and cash on delivery.
Payment
To eliminate the need for another page for order status integrated an order status feature directly into the My Order page itself.
My Order
To eliminate the need for another page for order status integrated an order status feature directly into the My Order page itself.
Credit Book
Problem
Small retailers (kirana stores) spend at least an hour twice a week🗓️ sourcing goods from traditional FMCG wholesalers. This process, often requiring them to close their shop or hire help, is frustrating😭, especially when transporting goods on two-wheelers. These challenges lead to under-stocking📈, disrupting operations and reducing profits.
Solution
Primary approach is to create a user experience 🧑🏼🎨that emulates the efficiency and user-friendliness of quick commerce ⏩ platforms such as Instamart, Zepto, and Blinkit. This strategy is designed to align with contemporary industry trends 📉and enhance the user experience by incorporating insights from users' past e-commerce engagements.
Research
01
Market Research
02
User Research
03
Competitor Analysis
This research delves into comprehensive market analysis, user behavior insights, and competitor evaluation to inform strategic decisions. It aims to identify key market trends, understand user needs, and assess competitor strengths and weaknesses,
This research delves into the FMCG market in India, analyzing the overall market size and breaking down region-wise market share for 2022. It also investigates the growing Ecommerce B2B FMCG sector, offering insights into its market size and the market share of various platforms during the same year.
01
Market Research
🔑 Key Insights
Ecommerce B2B market is projected to grow at a Compound Annual Growth Rate (CAGR) of 20% from 2022 to 2028.
South India has a market share of around 13%, while North India has the majority.
In B2B FMCG e-commerce platforms, Udaan dominates with 46% share
Small Retailers
Chennai
Age 20-60yrs
🎯 Target Audience
Questionnaires❓
How long have you been in this business?
How many employees do you have in your shop?
Who is responsible for buying the goods for your shop?
Where do you source your goods from?
How frequently do you place orders?
How much time do you spend on purchasing goods?
What is the average value of your orders?
How do you transport your goods to your shop?
What digital apps do you use in daily life?
Have you ever used e-commerce apps?
02
User Research
⚠️ Pain Points
Retailers have to close their business or hire someone else to buy goods
Transporting goods on two-wheelers is difficult and risky
In B2B FMCG e-commerce platforms, Udaan dominates with 46% share
I have selected four competitor apps—Udaan, Flipkart Wholesale, Jio-Mart Partner and Lots Wholesale—for a competitive analysis to assess their UX/UI, strengths, and weaknesses.
03
Competitor Analysis
Strength 💪🏼
Udaan, Flipkart, and Jio-Mart all offer low minimum order values with free delivery.
Weakness 🪫
All platforms except LOTS Wholesale struggle with longer delivery times and limited availability in Chennai.
UI/UX 📱
Udaan and LOTS have user-friendly interfaces, while Flipkart and Jio-Mart suffer from cluttered and less organized designs.
Define
01
User Persona
02
User Journey Map
In define phase, I made detailed user personas to represent key audience segments, ensuring I understand their needs, behaviors, and goals. Alongside, I develop user journey maps that visualize the steps users take to achieve their objectives, highlighting pain points and opportunities for enhancing the user experience
Following an abundance of brainstorming based on prior processes, I began to refine my ideas. I employed affinity mapping as a tool for segregation, aiming to gain a more precise understanding of the user’s needs. This approach allowed me to filter out🗂️ the most relevant ideas effectively.
01
Brainstorming
02
Information Architecture
03
User Flow
After conducting user research, I created one user persona👤 that represents the FMCG small retailers community in Chennai📍. This persona helps me define and empathise with the user, and guides me through the subsequent design processes.
01
User Persona
The user journey map covers the entire process from searching for an app to installing it🔎, performing product searches, completing orders, and handling returns or refunds📦. It details what users do at each stage, their feelings, and their emotions🙂 throughout the journey.
02
User Journey Map
Design
01
Paper Sketch
02
Hi-Fi Wireframe
During the design process, I started with paper sketches to visualize design concepts and establish the overall layout. These rough drafts were then refined into high-fidelity wireframes, ensuring detailed and polished designs that closely represent the final user interface
01
Paper Sketch
02
Hi-Fi Wireframe
Learning
Working independently on this project emphasized the importance of prioritizing the user's needs. By putting myself in the users' shoes👞 and continuously refining the design, I was able to create a product that resonated with the target audience 🎯.
Iteration🔄 played a key role in this project. By revisiting and refining ideas through multiple iterations, I was able to enhance the overall quality🌟 of the final product, ensuring it is functional.
Each stage of the project presented new learning opportunities, which not only improved the outcome but also contributed significantly to my growth🌱 as a designer.
Future Roadmap
To test features📝 like the creditbook, sort by preference and product variant tab, usability testing should be conducted to assess their impact💥 and efficiency. This enables iterative improvements based on user feedback🗣️.
Even though this project is currently focused🔎 on FMCG products, the business has the ability to expand into other sectors such as stationery, apparel, etc., providing ample opportunities for design exploration.
Some of the other ideated features such as Scheduled orders, Buy again options, Loyalty points, Subscription plans, and Linguistic options could also be awaiting implementation in the future🚀.
Take a look at my other works 👀
Grameenphone
Redesigned a Bangladesh's leading telecom website using PET strategy
View Project
LoanHub
Designed an Internal Sourcing Portal for NBFC to Streamline and Monitor Loan Process.
Coming soon...
Problem
Small retailers (kirana stores) spend at least an hour twice a week🗓️ sourcing goods from traditional FMCG wholesalers. This process, often requiring them to close their shop or hire help, is frustrating😭, especially when transporting goods on two-wheelers🛵. These challenges lead to under-stocking📈, disrupting operations and reducing profits.
Approach
Primary approach is to create a user experience 🧑🏼🎨that emulates the efficiency and user-friendliness of quick commerce ⏩ platforms such as Instamart, Zepto, and Blinkit. This strategy is designed to align with contemporary industry trends 📉and enhance the user experience by incorporating insights from users' past e-commerce engagements.
Store
Store page is a central component of the user experience, requiring careful consideration to balance extensive product information with a clean, intuitive layout. To enhance accessibility and interactivity, a vertical filter option has been integrated. This design choice aims to streamline the filtering process, making it easier for users to find and interact with products efficiently.
Product Variant
Product variant page features brings together the different variants of the product, including two distinct wholesale package options, into a single cohesive area.
Cart
A mini version of the product card was created to effectively display larger added-to-cart products, along with a section to encourage users to purchase items from their wishlist.
Payment
Payment page includes essential features such as a credit option and cash on delivery.
My Orders
To eliminate the need for another page for order status integrated an order status feature directly into the My Order page itself.
Credit Book
Credit book feature allows retailers to view their available credit balance and facilitates payment of their outstanding credit-based purchases.
Process
Research
Market Research
User Research
Competitor Analysis
01
Market Research
02
User Research
03
Competitor Analysis
This research delves into comprehensive market analysis, user behavior insights, and competitor evaluation to inform strategic decisions. It aims to identify key market trends, understand user needs, and assess competitor strengths and weaknesses, providing a solid foundation for data-driven growth strategies
01
Market Research
Market Research
This research delves into the FMCG market in India, analyzing the overall market size and breaking down region-wise market share for 2022. It also investigates the growing Ecommerce B2B FMCG sector, offering insights into its market size and the market share of various platforms during the same year.
🔑 Key Insights
Ecommerce B2B market is projected to grow at a Compound Annual Growth Rate (CAGR) of 20% from 2022 to 2028
Ecommerce B2B market is projected to grow at a Compound Annual Growth Rate (CAGR) of 20% from 2022 to 2028.
South India has a market share of around 13%, while North India has the majority.
South India has a market share of around 13%, while North India has the majority.
In B2B FMCG e-commerce platforms, Udaan dominates with 46% share
In B2B FMCG e-commerce platforms, Udaan dominates with 46% share
🎯 Target Audience
Small Retailers
Chennai
Age 20-60yrs
This research delves into the FMCG market in India, analyzing the overall market size and breaking down region-wise market share for 2022. It also investigates the growing Ecommerce B2B FMCG sector, offering insights into its market size and the market share of various platforms during the same year.
03
Competitor Analysis
Strength 💪🏼
Udaan, Flipkart, and Jio-Mart all offer low minimum order values with free delivery.
Weakness 🪫
All platforms except LOTS Wholesale struggle with longer delivery times and limited availability in Chennai
UI/UX 📱
Udaan and LOTS have user-friendly interfaces, while Flipkart and Jio-Mart suffer from cluttered and less organized designs.
I have selected four competitor apps—Udaan, Flipkart Wholesale, Jio-Mart Partner and Lots Wholesale—for a competitive analysis to assess their UX/UI, strengths, and weaknesses.
02
User Research
I conducted direct interviews with 5 small retailers selling fast-moving consumer goods (FMCG) in Chennai to assess what difficulties they face on purchasing goods for their business.
Questionnaires❓
How long have you been in this business?
How many employees do you have in your shop?
Who is responsible for buying the goods for your shop?
Where do you source your goods from?
How frequently do you place orders?
How much time do you spend on purchasing goods?
What is the average value of your orders?
How do you transport your goods to your shop?
What digital apps do you use in daily life?
Have you ever used e-commerce apps?
⚠️ Pain Points
Retailers have to close their business or hire someone else to buy goods
Transporting goods on two-wheelers is difficult and risky
Retailers order products from Amazon and use food delivery apps.
🔍 To confirm the similarity of purchasing patterns, I conducted a Direct Survey with small retailers in Chennai who sell fast-moving consumer goods (FMCG). The survey, titled 🔗Retailers’ Purchasing Patterns aimed to get a bigger picture and understand retailers better. It received 42 responses.
Research shows that the majority of the target audience is aged 25-44 📅 . Despite their familiarity with smartphones and e-commerce, most prefer shopping at traditional wholesale stores, which takes at least an hour per trip ⏳. These insights highlight the need for strategies to improve the shopping experience for this demographic.
03
Competitor Analysis
I have selected four competitor apps—Udaan, Flipkart Wholesale, Jio-Mart Partner and Lots Wholesale—for a competitive analysis to assess their UX/UI, strengths, and weaknesses.
Strength 💪🏼
Udaan, Flipkart, and Jio-Mart all offer low minimum order values with free delivery.
Weakness 🪫
All platforms except LOTS Wholesale struggle with longer delivery times and limited availability in Chennai
UX/UI 📱
Udaan and LOTS have user-friendly interfaces, while Flipkart and Jio-Mart suffer from cluttered and less organized designs.
Research
Market Research
User Research
Competitor Analysis
01
Market Research
02
User Research
03
Competitor Analysis
This research delves into comprehensive market analysis, user behavior insights, and competitor evaluation to inform strategic decisions. It aims to identify key market trends, understand user needs, and assess competitor strengths and weaknesses, providing a solid foundation for data-driven growth strategies
02
User Research
I conducted direct interviews with 5 small retailers selling fast-moving consumer goods (FMCG) in Chennai to assess what difficulties they face on purchasing goods for their business.
Questionnaires❓
How long have you been in this business?
How many employees do you have in your shop?
Who is responsible for buying the goods for your shop?
Where do you source your goods from?
How frequently do you place orders?
How much time do you spend on purchasing goods?
What is the average value of your orders?
How do you transport your goods to your shop?
What digital apps do you use in daily life?
Have you ever used e-commerce apps?
⚠️ Pain Points
Retailers have to close their business or hire someone else to buy goods
Transporting goods on two-wheelers is difficult and risky
Retailers order products from Amazon and use food delivery apps.
🔍 To confirm the similarity of purchasing patterns, I conducted a Direct Survey with small retailers in Chennai who sell fast-moving consumer goods (FMCG). The survey, titled 🔗Retailers’ Purchasing Patterns aimed to get a bigger picture and understand retailers better. It received 42 responses.
Define
Market Research
User Research
Competitor Analysis
01
User Persona
02
User Journey Map
In define phase, I made detailed user personas to represent key audience segments, ensuring I understand their needs, behaviors, and goals. Alongside, I develop user journey maps that visualize the steps users take to achieve their objectives, highlighting pain points and opportunities for enhancing the user experience
Process
Define
Market Research
User Research
Competitor Analysis
01
User Persona
02
User Journey Map
In define phase, I made detailed user personas to represent key audience segments, ensuring I understand their needs, behaviors, and goals. Alongside, I develop user journey maps that visualize the steps users take to achieve their objectives, highlighting pain points and opportunities for enhancing the user experience
01
User Persona
After conducting user research, I created one user persona👤 that represents the FMCG small retailers community in Chennai📍. This persona helps me define and empathise with the user, and guides me through the subsequent design processes.
02
User Journey Map
The user journey map covers the entire process from searching for an app to installing it🔎, performing product searches, completing orders, and handling returns or refunds📦. It details what users do at each stage, their feelings, and their emotions🙂 throughout the journey
01
User Persona
After conducting user research, I created one user persona👤 that represents the FMCG small retailers community in Chennai📍. This persona helps me define and empathise with the user, and guides me through the subsequent design processes.
02
User Journey Map
The user journey map covers the entire process from searching for an app to installing it🔎, performing product searches, completing orders, and handling returns or refunds📦. It details what users do at each stage, their feelings, and their emotions🙂 throughout the journey.
01
Brainstorming
Following an abundance of brainstorming based on prior processes, I began to refine my ideas. I employed affinity mapping as a tool for segregation, aiming to gain a more precise understanding of the user’s needs. This approach allowed me to filter out🗂️ the most relevant ideas effectively.
02
Information Architecture
03
User Flow
01
Brainstorming
Following an abundance of brainstorming based on prior processes, I began to refine my ideas. I employed affinity mapping as a tool for segregation, aiming to gain a more precise understanding of the user’s needs. This approach allowed me to filter out🗂️ the most relevant ideas effectively.
02
Information Architecture
03
User Flow
Process
Design
Market Research
User Research
Competitor Analysis
01
Paper Sketch
02
Hi-Fi Wireframe
During the design process, I started with paper sketches to visualize design concepts and establish the overall layout. These rough drafts were then refined into high-fidelity wireframes, ensuring detailed and polished designs that closely represent the final user interface
Design
Market Research
User Research
Competitor Analysis
01
Paper Sketch
02
Hi-Fi Wireframe
During the design process, I started with paper sketches to visualize design concepts and establish the overall layout. These rough drafts were then refined into high-fidelity wireframes, ensuring detailed and polished designs that closely represent the final user interface
01
Paper Sketch
02
Hi-Fi Wireframe
01
Paper Sketch
02
Hi-Fi Wireframe
Daniël
@dvdwinden
I've built pretty handy sites powered by Craft or WordPress in the past, but seeing @framer tackle CMS stuff so effortlessly is mind-boggling
Daniël
@dvdwinden
I've built pretty handy sites powered by Craft or WordPress in the past, but seeing @framer tackle CMS stuff so effortlessly is mind-boggling
Daniël
@dvdwinden
I've built pretty handy sites powered by Craft or WordPress in the past, but seeing @framer tackle CMS stuff so effortlessly is mind-boggling
Daniël
@dvdwinden
I've built pretty handy sites powered by Craft or WordPress in the past, but seeing @framer tackle CMS stuff so effortlessly is mind-boggling
Daniël
@dvdwinden
I've built pretty handy sites powered by Craft or WordPress in the past, but seeing @framer tackle CMS stuff so effortlessly is mind-boggling
Dann
@DannPetty
I learned how to build a website in @Framer! My goal was to learn the basic tools in about 20 minutes a day last week. Nothing fancy. No special design. Just random elements that's responsive. If I can do it, so can you!
Dann
@DannPetty
I learned how to build a website in @Framer! My goal was to learn the basic tools in about 20 minutes a day last week. Nothing fancy. No special design. Just random elements that's responsive. If I can do it, so can you!
Dann
@DannPetty
I learned how to build a website in @Framer! My goal was to learn the basic tools in about 20 minutes a day last week. Nothing fancy. No special design. Just random elements that's responsive. If I can do it, so can you!
Dann
@DannPetty
I learned how to build a website in @Framer! My goal was to learn the basic tools in about 20 minutes a day last week. Nothing fancy. No special design. Just random elements that's responsive. If I can do it, so can you!
Dann
@DannPetty
I learned how to build a website in @Framer! My goal was to learn the basic tools in about 20 minutes a day last week. Nothing fancy. No special design. Just random elements that's responsive. If I can do it, so can you!
Learnings
Working independently on this project emphasized the importance of prioritizing the user's needs. By putting myself in the users' shoes👞 and continuously refining the design, I was able to create a product that resonated with the target audience 🎯.
Iteration🔄 played a key role in this project. By revisiting and refining ideas through multiple iterations, I was able to enhance the overall quality🌟 of the final product, ensuring it is functional.
Each stage of the project presented new learning opportunities, which not only improved the outcome but also contributed significantly to my growth🌱 as a designer.
Future Roadmap
Future Roadmap
To test features📝 like the creditbook, sort by preference and product variant tab, usability testing should be conducted to assess their impact💥 and efficiency. This enables iterative improvements based on user feedback🗣️.
Even though this project is currently focused🔎 on FMCG products, the business has the ability to expand into other sectors such as stationery, apparel, etc., providing ample opportunities for design exploration.
Some of the other ideated features such as Scheduled orders, Buy again options, Loyalty points, Subscription plans, and Linguistic options could also be awaiting implementation in the future🚀.
Take a look at my other works 👀
Grameenphone
Redesigned a Bangladesh's leading telecom website using PET strategy
View Project
Hugo
Hugo is an AI study planner app that helps students preparing for competitive exams stay consistent in their self-study periods.
Coming soon...