Case study

JotShip

Jot it, ship it.

Turning chat orders into confirmed, tracked orders in three steps.

Role: UI/UX designer
Tools: Figma
Duration: [DURATION]

Welcome

Home

New order, step 1

Payment, step 2

Confirmed

Problem

Small sellers take orders through Instagram and WhatsApp chats. Customer details, payment records, shipping information and delivery updates end up in different places: the chat itself, notes, spreadsheets and courier tools.

That makes simple tasks slow. A seller has to scroll back through messages to find an address, check whether an advance was paid, or copy a tracking ID into a reply. Cash on delivery adds risk when the balance or the address is unclear.

Problem statement

Small sellers who take orders in chat need one simple place to record each order, its payment and its delivery, so they spend less time on admin and fewer orders go wrong.

Research

These findings are working assumptions based on how chat-based selling usually works. I have not run seller interviews yet, so each one needs to be validated with real sellers.

Question	What I did	Finding
How do sellers track orders today?	Mapped the usual path from a chat message to delivery (assumption).	Assumption to validate: Orders, customer details and payment notes are kept in chats, notes or spreadsheets, so details are easy to miss, repeat or lose.
Why do COD orders fail?	Walked through the cash on delivery flow to find where an order can go wrong (assumption).	Assumption to validate: Unclear balances, unconfirmed addresses and no early commitment from the customer make refusals and failed deliveries more likely. An advance payment may help.
What tools do sellers use currently?	Listed the tools small sellers commonly combine (assumption).	Assumption to validate: Instagram and WhatsApp for orders, plus notes or spreadsheets and a courier app. No single tool holds the order, payment status and tracking together.

[SELLER QUOTE 1: add a real quote from a seller interview]

[SELLER QUOTE 2: add a real quote from a seller interview]

First version

The first version was a purple, payment-first flow with a customer checkout and a tracking page.

First version screens in purple: order detail, ship order, connect Shiprocket, shipped email preview and customer tracking — First version, 2 of 2: order detail, ship order, connect Shiprocket, email preview, customer tracking.

What was wrong

Order details were difficult to organize.
Advance payments and remaining COD balances needed clearer representation.
Sellers needed an opportunity to review and edit details before confirmation.
Customer updates and shipping information needed a clearer workflow.

How this shaped the next version

These issues came from my own review of the first version. Usability testing has not confirmed them. They still guided the redesign:

A three-step order flow replaced the single quick-add form.
Advance, balance and full payment became clear, seller-recorded options.
A review screen with an Edit option for each section was added before confirming.
An email preview after confirmation made customer updates and shipping information easier to follow.

The second set of first-version screens

Order detail. Shows the order status and the payment summary in one place.Problem it addresses: Sellers lose track of where an order is and what is still unpaid.
Ship order. Collects the address, parcel weight and a courier choice, and shows the amount to collect on delivery.Problem it addresses: Shipping details and the COD amount were spread across tools.
Connect Shiprocket. A guided, three-step connection to the courier account.Problem it addresses: Sellers copy details between the courier tool and their chats.
Email preview. Previews the shipped email the customer receives, with tracking.Problem it addresses: Sellers paste tracking IDs into chats by hand.
Customer tracking. A tracking page the customer can open without logging in.Problem it addresses: Customers keep asking where their order is.

Design decisions

	Before	After
Order creation	One quick-add form, then an order link shared in chat	Three steps: customer and item, payment, delivery
Payment recording	Payment-first checkout	Seller-recorded advance payment, COD balance, or full payment
Order review	No review step before confirming	A review screen with an Edit option for each section
Customer updates	Tracking emailed automatically, plus a customer tracking page	An email preview after order confirmation
Visual style	Purple accents on white cards	Warm cream and yellow with dark text
Business dashboard	A today list grouped by action: needs action, to pack, to ship, in transit	An Orders tab with a sales summary and a separate Customers tab

Final screens

Create an order

Three steps from chat details to a complete order.

Step 1 of 3: customer name, phone, email, item and total cost — Step 1: customer and item

Step 2 of 3: payment with Cash on Delivery selected, showing total, advance paid and an auto-calculated balance — Step 2: cash on delivery

Step 2 of 3: payment with Full payment selected, showing total, amount paid and payment method — Step 2: full payment

Step 3 of 3: delivery address, PIN code, city, landmark, state and package weight — Step 3: delivery

Step 1, customer and item. Captures the name, phone, email, item and total in one short form.Problem it addresses: Details from chats are scattered and easy to miss.
Step 2, cash on delivery. Records the advance and works out the balance due on delivery.Problem it addresses: Sellers and customers need to see what is paid and what is left.
Step 2, full payment. Records a full payment and the payment method.Problem it addresses: Payment status should be clear before an order is processed.
Step 3, delivery. Collects the address, PIN code, city, landmark, state and package weight.Problem it addresses: Missing address details can lead to failed deliveries.

Review and notify

Check everything, confirm, and tell the customer.

Review order screen with customer, product, payment and delivery sections, each with an Edit link — Review before confirming

Order confirmed screen with a green check, email sent and sync status — Order confirmed

Email preview for the customer with order number, items, payment and delivery address — Email to the customer

Review. Shows customer, product, payment and delivery together, each with an Edit option.Problem it addresses: Mistakes are easier to fix before the order is confirmed.
Order confirmed. Confirms the order and shows that the email was sent.Problem it addresses: The seller needs to know the order is complete and the customer is informed.
Email to the customer. Previews the email with order, payment and delivery details.Problem it addresses: Sellers should not have to copy and paste details into chats.

Manage the business

A simple view of orders, sales and customers.

Welcome

Home screen listing today’s orders with status labels — Home: today’s orders

Orders screen with products sold, monthly revenue, total revenue, pending cash on delivery and recent orders — Orders and sales

Customers screen with a search box and customer cards showing order counts and payment status — Customers

Customer detail screen with contact details, address and order history — Customer detail

Welcome. Introduces the app with a short promise: less admin, more time to sell.Problem it addresses: New sellers need to see quickly what the app is for.
Home. Lists today’s orders by status.Problem it addresses: Sellers need to see what to ship or follow up without searching chats.
Orders. Shows products sold, revenue, pending COD and recent orders.Problem it addresses: Sellers lack a simple view of sales and money still to collect.
Customers. Lists customers with order counts and payment status.Problem it addresses: Customer details are scattered across chats.
Customer detail. Shows contact details, address and order history.Problem it addresses: Details of repeat customers and past orders are hard to find.

Constraints and tradeoffs

Delivery is handled by third-party couriers such as Shiprocket, so the app shows tracking status and does not promise a delivery date.
Payments are recorded by the seller. The app does not process money.
Integrations, such as the Shopify sync and the courier connection, are designed concepts, not built.
A three-step order flow improves structure but adds navigation steps.
Reviewing the customer email gives the seller control but adds an extra confirmation step.

Testing and results

I have not run usability tests yet. These three tasks are planned, and the result and change fields are placeholders to fill in with real data.

Task	Result	Change I made
Create an order and enter customer details.	[TEST RESULTS: add the real result after testing]	[Design change: add after testing]
Record an advance payment and calculate the remaining COD amount.	[TEST RESULTS: add the real result after testing]	[Design change: add after testing]
Prepare a shipment and review the customer email.	[TEST RESULTS: add the real result after testing]	[Design change: add after testing]

Next steps and reflection

How I would measure success

Task completion rate
Time required to create an order
Input errors
Payment-status accuracy
User feedback

Next steps

Validate the research assumptions with real sellers.
Run usability testing on the revised workflow.
Refine payment calculations and form validation.

What I learned

Breaking a complex workflow into clear steps can improve usability.
Payment and delivery rules must be understood before designing the interface.

Next projectKrishiSetu →Contact me