Locer
It is an India based application which provides a platform for customers to shop their daily needs from local stores.
Where should people buy their daily needs from local stores online and, it is very expensive for the shopkeeper to afford an online app and maintain it?
Other platforms like Blinkit, Zepto, Instamart, Dealshare which have their own warehouse of products which is killing the business of local retail stores.
Problem Statement
Considering all the pain points and challenges there should be an online platform which provides the solution for all these challenges.
Create a virtual grocery store experience where users can explore aisles and add items to their cart online.
Develop an AI-powered shopping assistant that helps users find the best deals, manage bulk purchases, and receive personalized recommendations.
Implement real-time freshness indicators and quality assurance measures for perishable products.
Design a multilingual and voice-enabled interface for seamless communication.
Solution
User Personas
User Research
Priya is a busy professional balancing her demanding job with family responsibilities. She values convenience and time-saving solutions in her daily life. She lives in a bustling city and often finds it challenging to navigate crowded markets and stores due to her hectic schedule.
Introvert
Extrovert
Calm
Aggressive
Exciting
Boring
Selective
Indiscriminate
Limited time to buy groceries.
Traffic and crowds.
Quality concerns.
Pain Points
User Traits
tech savvy
Seeks recomendation
proud mother
Priya
32/Female
Conducted surveys around the society to gain insight about the user and their behavior, while shopping for daily needs.
According to the survey I tried to figure out the crucial challenges and pain points which can be solved through the application.
Rohan is a 28-year-old software engineer living in Bangalore. He works long hours at a tech startup and often finds it challenging to manage his grocery shopping amidst his busy schedule.
Online
Offline
Healthy
Fast food
Multi tasking
Boring
Values time
non parametric
Limited time for grocery shopping due to work commitments.
Difficulty in finding fresh produce late in the evening.
Long queues and crowded stores during peak hours
Pain Points
User Traits
tech savvy
Use coupons
aggressive
Rohan Sharma
28/Male
Sameer is a 45-year-old small business owner in Ahmedabad. He runs a local retail store and often buys groceries in bulk for his family and business.
Local shop
Marts
Bulk
Spare
Price sensitive
Price overflow
Negotiate
Non- negotiate
Inconsistent supply and availability of products.
High transportation costs for bulk purchases.
Limited time to visit multiple stores for different items.
Pain Points
User Traits
Value time
Use coupons
family man
Sameer Patel
45/Male
After the survey and competitive research around the society many crucial objectives came out which is to be fixed immediately.
OBJECTIVES
Improves accessibility
Ensure Product Availability
Enhance Convenience
Enable Personalization
Engage and Retain Customers
Facilitate Cost Savings
Establish Trust and Reliability
Streamline Shopping Experience
BOLD
CONVENIENT
EMPOWERING
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
It is an India based application which provides a platform for customers to shop their daily needs from local stores.
!@#$%&*
roboto
Design
After the research and analysis I jumped into design the application by first designing the stylescape. It is better as it portrays the whole personification of the app. How it should look after the design.
Stylescape
Wireframe
Wireframes are a crucial tool in UI/UX design, serving as blueprints for the layout and structure of a digital product's interfaces.
LOFI Wireframes
After the empathy mapping and inspiration I have designed the wireframes for the shopkeeper and customer app, so that I can visualize the whole design into a high fidelity and it is easy to iterate after an idea is converted on paper, we can do so many iterations and the lofi design works as a structure of the main design.
Components
Components are like the crucial ingredients of a recipe, as it creates symmetry and I have chosen to design minimum number of components to increase the efficiency and for the developers to take the minimum time to design the application. Even though I have tried various iterations with components to make it user centric, and engaging for the users.
High fidelity design for customers
After designing LOFI wireframe, I have made the information architecture to get more better view of the HIFI design and I believe the more we are iterating in the beginning the less we have to make changes in the hi-fi design.
Information architecture expands more broader aspect towards the orientation, hierarchy, sequential matrix, search systems and navigation through the app.
It not only improved the usability but it also enhances user satisfaction and facilitate efficient content management.
Onboarding
Onboarding of the app was trickiest part to design. I have tried various iterations to get a eye catchy onboarding page, so that customers can get hook at the first glance.
I have designed buttons on this page by analysing hierarchy i.e visual contrast so that user can click the right button without any mistake.
User registration
After moving from onboarding, first time users has to register themselves on the app, and the illustrative drawings makes the page more user friendly and engaging.
They can register by using third party signup or they can directly create their username by filling the credentials.
Homepage
After account setup when the user lands on homepage, he can see the shops near them along with their product categories like grocery, restaurant and water.
Shop tab has minimum basic info about the store so, user can enter the shop without any doubt, it also has ratings which ensures trust of users.
The nav bar at the bottom has basic options so that user can easily switch from one tab to another. User can also change their delivery locations from the homepage itself.
scroll
Store
As the user enters in a store he can see variety of products along with the categories and product availability.
The user can also like and share the shop id to their liked users via other apps.
While scrolling the existing category section roll up into a bold FAB, so that users can surf through more variety with the category section intact one click.
The category section was one of the challenges I have solved by minimizing the categories to surf more products.
Here I have discussed only one of the store section under groceries , restaurants, meat counter and water supply are there too. As of now the viewer can get a persona of the app design, right now the app is in development mode so I am bound to share minimum details.
High fidelity design for shopkeepers
For the shopkeeper app it was actually tough to design, because when I was conducting survey among the shopkeeper it was actually tough to decide what shopkeepers want in their app.
After the survey I found out that shopkeeper has a big trouble managing their inventory and their sales report every month, and if any new product introduced in the market it was hard to make a sell. Apart from it, new customers didn’t knew about the shop timings and location.
So, the app will help them getting recognition, along with smart features of managing their inventory and they can also view their sales report on time.
I came with the idea to create a virtual library of products distributed in various categories and it was easy for shopkeepers to add in their stores and customer can buy them.
authentication
Onboarding
Onboarding of the shopkeeper was easy once they have decided to make their shop go online.
I have designed the onboarding flow in one step, just after they enter the mob no they will be redirected to the main store setup page.
Store setup
Store setup
Store setup was tricky to design as the user has to fill so many details, which increase the cognitive load on the user and create a decision fatigue. For avoiding cognitive load I have used tinder tactics to reduce the cognitive load by dividing the whole form in various sections and a green rail to create a reward factor for the user.
Homepage
After the store setup when the user lands on homepage, he can go to the setting section from left hamburger menu.
I have designed homepage by keeping the traditional way they open their shop by putting the shutter up, here the toggle button works as the shutter when it is closed it shows offline to the customers after they slide right it shows online to the customers, adesso they can buy their desirable items form the shop.
Status: offline
Status: online
Product section
In the product section it was user can change their inventory, retail price and discount to their various products.
And when a certain products inventory turns zero it automatically changes to out of stock in the customer section and the user can also change the status manually in their product section by toggle button.
Product section
User can access the library from the product section page by clicking on the FAB Button.
After clicking the user can access the full product library and the add their desirable products in the store.
I have added the label on the product so that they do not get confused while adding new products.
Shopkeeper design is under real time testing with the real users, and minimal changes are part of process.
Conclusion
It takes about 8-9 months to complete this application.
Developers were confused in the beginning to design which part first.
I have used semantic names and variables in the figma which help developers to easily grasp the design system and any changes can be made easily.
Number of APIs reduced.
With the help of components, it makes a lot easier for the developer and new upcoming designers to make implications.
I have learnt the cost cutting to design many pages, and also iterations made the job easy to reach the final design.
I have also learnt future planning and improved my vision to solve a problem with suitable approach.
watch on your desktop
for best experience
