Building a webapp for merchants

Oct 2024 - Dec 2024

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

Design a Webapp that allows merchants to

perform the same tasks as their mobile app.

Why build a Webapp?

Our merchants had only the mobile app to access the Pincode and didn't have the option to toggle with a webapp. Many of the merchants use an ERP tool to update their stock and order management. They insisted for a webapp where they could access they actions. Our product team had a third party webapp for a few merchants for a while. But the costing was high and the business team wanted to cut the cost down

The goal

Design a webapp for the merchants to manage their orders and catalogue actions and try to scope for future ERP tool.

The thinking process

Things to consider

Before building the the Webapp, there were a few points to consider that needs to be looked up on:

Adapt from the mobile app, leveraging the same style and colours
Build a scalable design for future scope like
integrating a billing system for the business
Build a new design system for the Webapp purpose
but create variables along with the mobile app
Use the same components for engineers to build
on Compose Multi Platform functionality

Designs

  1. Dashboard/Home

The home page on the mobile app was converted to a dashboard for the Webapp. A seller dashboard is an essential tool for managing an online store effectively. It provides sellers with a comprehensive overview of their store’s performance, order management, inventory tracking, and customer interactions. The key features that I focussed for this dashboard was store's sales, order management and navigation.

  1. Order Management

I designed the order management page with a very progressive approach. I introduced the tabs for the users to toggle between order states for them to take actions faster.

Order button states

Filter

The Order Details Page provides an in-depth view of individual orders, allowing sellers to manage and process them efficiently. The page focuses on items ordered, time to deliver, customer and location details, and action for the seller to take.

Order Status Updates: Real-time updates on pending, completed, canceled, and refunded orders.

Order states

  1. Catalogue Management

I wanted to design an effective catalog management system that is crucial for ensuring product availability and optimizing sales operations. So, I wanted to show the listed, unlisted, and available inventory options. Also, I wanted to suggest the seller add some items that are doing well among customers and other stores.

Browse Page

Product Details Page

  1. Dispute Management

Dispute management is a crucial feature for handling conflicts between sellers and customers effectively. I created a well-structured dispute resolution system that ensures transparency, improves customer satisfaction, and minimizes financial losses. I designed a centralized dispute dashboard that allows sellers to track and manage all disputes in one place.

Complaint Details Page

More Screens of the Webapp

User testing & impact

Testing with the merchants

I developed a prototype and tested out the experience with merchants. I gathered a group of existing mobile app users to gather initial feedback. I identified usability issues and required optimizations for the web interface and fixed it.

Quanlitative Results

Post the usability testing, some merchants highlighted how easily they could navigate features like order management, inventory tracking, and dispute resolution. They also spoke about the efficiency of the web app compared to its mobile counterpart. Overall, this was a very successful initiative, and the qualitative result was anticipated.

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