Jul 2024 - Aug 2024
Helping merchants to discover
variants for a product
2x
Product additions
60%
Faster discovery
40%
Error reduction
Pincode business is designed for the merchants, that empowers to handle orders efficiently directly from the merchant’s mobile devices. Every employee within the store can log in and contribute to managing orders, ensuring a smooth operational flow.
I was assigned to solve this problem and as a solo UX designer I crafted the entire flow, did a bit of research and field visit, user testing, synced with the product team, backend engineers, frontend engineers and shipped it with the prototype.
Overview
Description of the problem
Our merchants struggle to discover the variants of a product (eg: 500 g, 1 Kg, 2 Kgs) while managing their inventory or listing items online. This results in missed sales opportunities, reduced customer satisfaction, and inventory inaccuracies.
Project goal
Design to simplify how merchants discover and manage item variants, ensuring a seamless and accurate process that minimizes time and effort while maximizing sales opportunities.
Setting out to solve
Analysing the current experience and why it is not working?
I was looking at the existing designs and was analyzing what could have gone wrong? I synced with product manager and found out merchants struggled with identifying all potential variants and often relied on manual processes or incomplete vendor catalogs. Sometimes the search is not accurate and they have to browse further spending a lot of time. The product manager highlighted the need for a scalable solution that could work across multiple product categories.
Catalogue home
To add or take immediate action, there is no button. The only options are search and browse, both of which take time.
Action page
The page is solely for adding and editing items. Layered inside are the other actions, such as stock or report.
Product details page
Within this page are some of the actions that merchants take frequently. Needless emphasis on less actionable things.
Defining the challenge with a field visit
I visited the physical stores, including small grocery shops and large retail chains, to observe how merchants behaviour and how they discover and manage variants. I sought ideas to club store behaviours to the app that could make the experience easy for them. I noticed these key behaviours of the merchants and what happens in the supermarket:
The merchants environment is very busy
Their days are filled with multitasking, quick decision-making, and customer interactions, all aimed at ensuring the supermarket runs like a well-oiled machine. This constant busyness reflects their dedication to keeping the store stocked, appealing, and welcoming for shoppers
They user scanner to add items to inventory
Scanners play a crucial role in supermarket operations, especially in inventory management. These devices streamline the process of adding items to the store's inventory system, ensuring efficiency, accuracy, and real-time data updates
All variants of an item is placed in the same rack
One common strategy is placing all variants of a product on the same rack or in the same section. This approach benefits both customers and store management by improving accessibility, enhancing the shopping experience, and streamlining inventory control.
Possible solutions for this
Based on the field study and some discussions with the product, I came up with the How might we approach for this problem. Here are the HMW statements:
How might we?
Help merchants find variants easily and
save time for them
Give them the choice to take actions
in one place
Help merchants take action on
variants in with minimal interactions
Less cognitive load
The solution
After the field visit and after aligning the HMW statements, I brainstormed with stakeholders and came up with two main solutions to this problem statement before beginning with designs.
Solution 1
Introduce scan feature
As we know that the merchants mostly scan in their system to add products to their inventory, I aligned this to the product, and the product team was happy to introduce this functionality to our app. Because every product in the store has a unique barcode, the scanner can quickly retrieve product information from the inventory database, including name, price, and quantity, by reading the barcode.
Solution 2
Link all variants
It is easier for merchants to navigate when items are logically grouped or linked by variants to a base item. This makes it easier for the merchant to keep their products visible and provide them with fast access to add or modify variants.
Over coming backend challenges
Getting a shared understanding with the engineering team
We know we want to add these features, but a significant backend implementation is required, so I had to persuade them of this. By addressing scalability, accuracy, and user needs, I was able to persuade the backend engineers that the system guarantees a smooth experience for merchants. This innovation will improve the app's overall functionality in addition to better inventory management. I made a case rooted in user needs by demonstrating the value of the scan feature, which can allow users to quickly access product details, view all variants, and make informed decisions. I also explained the benefits of how linking variants to a base product simplifies navigation, enhances search functionality, and ensures consistency in product data
Designs
Scan feature
As the backend prepared to deploy this feature, I began working on the designs and prototype. First, I looked at the scan screen and how the process of finding the items would start.
Floating action button
FAB was introduced, giving merchants the ability to search, browse, or scan for products.
Scan screen
With the motion design team's assistance, I created the scan screen and the animation.
Linking all variants on the PDP
I started drawing some sketches and looked into how all the variants could be included in the product details page. Here are some of the sketches I did during the process.
I started exploring the designs on Figma after finishing the sketches. I came up with three final versions that I thought would work well for connecting all of the variants to a single product. To get some input, I showed them around to some stakeholders and my peers. I then listed some pros and cons to decide which would be the best route to go forward.
Iteration 1
Pros
Showing all variants
Cons
Multiple journey to take action
Not scalable
Not having a seamless flow
Iteration 2
Pros
Progressive
Minimal
Cons
Multiple journey to take action
Won't work for multiple additions
Iteration 3
Pros
Showing all variants and actions
Scalable design
Less interactions
Cons
Design is slightly heavy
The decision behind iteration 3
Since the third iteration checked off every HMW statement, I chose to use it in this case. Additionally, it largely resolves the issue by connecting all variants and their actions with minimal interactions . This design is scalable for upcoming enhancements and has future potential.
Variants tab
All the variants of this particular item can been seen with the primary actions like add or edit
View details dropdown
Bringing the more details to the bottom with a dropdown format which has the least used actions
Stock toggle
Brought the most used action outside for easy access
Bottom sheet approach
This helps the user to scan, take action and go back to scan again whenever they have multiple actions to do
Redesigning the view item details page
I redesigned the page to a section with a dropdown feature. Instead of taking the user to another page and back again, this allows them to view details within the page more quickly. By examining the data, I restructured the page so that the least used action is at the bottom.
View item details page
Least used actions
Pulled the least used
actions to the bottom
Dropdown
Quick access within the
page to look for details
All screens
Here are all the screens that I have designed for this initiative
And there is some more!
How I treated the edge case, error case and a multi-level variant screens.
Multi-level variants
When there are variants within variants
Edge case
When the user enters the value above the given limit
Error case
When a page fails to load or it has a poor internet connection
User testing & impact
Testing with the merchants
I developed a prototype and tested out the experience with merchants. Eight out of ten merchants were pleased with the new flow after noticing the variants tab. They expressed their increased confidence in managing large inventories.
Quantitative Results
We took this feature live and found that sellers were adding 2x products now on their live catalogue. A 60% time reduction in finding and adding variants was noticed after measuring some feedback. This problem was largely resolved by the variants tab. We observed that connecting the variations helped to eliminate duplicates of items discovered in the inventory.
Product additions
2x
Faster discovery
60%
Error reduction
40%
View projects from Flipkart
Designing a video app
One of my first UX project where I majorly worked on the widgets and user interface
Reducing the returns rate
An analysis of how I mitigated the bounce rate by creating a fully new user experience
Reducing the returns rate
A project that provided significant insights into user perceptions of refurbished items