Digital Khata - Case study

A Mobile app that helps shopkeeper to manage and track customer udhar

INTRODUCTION

Overview

Traditional paper khatas , Messy, and a headache to manage. No payment reminders, no easy way to track Customers udhar. Lost in the chaos. Small business owners needed something better—fast

I built a digital khata app—clean, simple, and packed with features. Automated reminders, udhar calculations , and customer Udhar tracking, all in one place. No more paper, no more stress. Just a smooth, mobile solution that works as hard as they do.

Role

UX Designer & Researcher

Project Timeline

2 months

Target Users

Shop keepers

Problem Statement

Shopkeepers rely on Traditional khata to maintain customer Udhar . Which lack an efficient system to manage customer udhar, leading to difficulties in

•  Calculating udhar ,time taken
• Sending timing reminders to customer
• Tracking Long overdue udhar customer
• Tracking over-limit Udhar customers

Research

Research Type

Qualitative field research

Target Users

Shopkeeper

Research timeline

One week

Location

Islamabad ,Pk
This study aims to understand the traditional khata bookkeeping process followed by shopkeepers.

A qualitative research methodology was employed, where data was collected through interview with shopkeeper and by spending three days in local shop to observe the actual process of how the khata is written and maintained.

Pain point

Shopkeepers find it hard to track and manage customer udhar efficiently.
  • Calculating udhar on the spot is time-consuming , especially during busy hours.
  • Sending timely reminders is difficult, as they rely on manual tracking, leading to delayed payments
  • Identifying customers with long-overdue udhar requires extra effort.
  • Identifying customers with over-limit udhar requires extra effort , because shopkeeper havn't time to calculate the total Udhar at each purchase (Udhar) or Payment (Wasool)

Storyboarding

Arif wakes up at 6 AM, opened his kirana store.
As the morning rush begins, Mrs. Khan walks in, asking for her usual groceries. “Arif bhai, can you add this to my udhar?” she asks with a smile. Arif nods, pulling out his worn-out ledger. He flips through pages, trying to find her name among the dozens of entries. It takes him a few minutes.
Mr. Siddiqui, a regular customer, walks in and asks, “Arif bhai, can you calcualte my Udhar?” Arif flips through his ledger, squinting at the messy handwriting. “Let me check,” he says, but with the heavy customer rush, it takes time to calculate Mr. Siddiqui’s udhar. Can you come tomorrow, or can you wait for a while? Because there is a lot of customer rush.
He flips through the ledger, trying to organize the entries, but it’s a mess. Some customers have exceeded their udhar limits, and he’s not sure how to handle it. “I can’t keep losing money like this,” he mutters to himself.
In the evening, post shutting down his store, Arif pours over his accounts book in the faint light. He is plagued by the mounting overdue bills. “I wish there was a simpler method to monitor all this,” he contemplates, massaging his weary eyes.

Arif persona

Pain point

Time-Consuming Record-Keeping
  • Searching through a physical ledger takes too much time, especially during busy hours.


Customer Service Delays
  • During peak hours, calculating udhar slows down service, causing frustration for both Arif and his customers.


Difficulty in Tracking Pending Payments
  • Arif struggles to identify overdue payments and lacks a clear way to remind customers.


Financial Uncertainty
  • Without proper tracking, Arif risks losing money.


End-of-Day Fatigue
  • After a long day, manually managing records adds to his exhaustion, making it harder to focus on growing his business.

Lack of Payment Control
  • Some customers take too much udhar, and Arif doesn’t have a system to set limits or reminders.

Goal

Fast & Easy Udhar Management
  • Quickly find customer records and calculate pending amounts.


Organized & Clear Record-Keeping
  • Have a structured way to manage credit transactions.


Better Customer Service
  • Reduce wait times and improve the buying experience.


Efficient Payment Tracking
  • Know exactly who owes how much and for how long.


Reduce Financial Risk
  • Prevent excessive udhar and ensure timely repayments.


Save Time & Energy
  • Automate calculations to reduce stress after store hours.


Increase Business Growth
  • Spend less time on manual work and more on running the shop.

Feature Ideas

  1. Quick Customer Tracking by Payment Status
    • Easily identify customers based on their Udhar Status (e.g., paid, pending, or overdue) for faster decision-making and follow-ups.


  2. Instant Customer Search
    • Quickly find customer records by searching their name , saving time during busy hours.


  3. Automated Udhar Calculations
    • The app automatically calculates pending amounts (udhar) for each customer, eliminating manual errors and speeding up transactions during peak hours.


  1. Automated Payment Reminders
    • Send timely reminders to customers for overdue payments via SMS or WhatsApp, ensuring timely repayments and reducing financial risk.


  1. Customizable Udhar Limits
    • Set personalized credit limits for each customer to prevent excessive udhar and maintain better control over finances.


  2. Comprehensive Customer History & Insights
    • Maintain a Udhar history for each customer, providing valuable insights to help Arif make informed business decisions.


  1. Quick Customer Addition
    • Shopkeepers can easily add new customers to their khata by entering their name and phone number. They can also import customers directly from their phone contacts for added convenience.

DESIGN

Wireframe

Some features. I knew exactly how they should look. I started wireframing right away.
Others? No clue.
So, I made some assumptions, and pieced it together. Now, the initial wireframing is done— Not perfect, but a solid start!

For the unclear features, I went back to the shopkeeper and had them review the initial wireframes.

Question: How does the flow work when adding udhar to the customer's khata?

  • After discussion :I realized that I don’t need to add too many details about the udhar items, such as the product name, size, or quantity. Only the total price of the products needs to be included.

Question: How does the flow work when adding udhar to the customer's khata?

  • After discussion :I realized that I don’t need to add too many details about the udhar items, such as the product name, size, or quantity. Only the total price of the products needs to be included.

Question: How does the flow work when adding udhar to the customer's khata?

  • After discussion :I realized that I don’t need to add too many details about the udhar items, such as the product name, size, or quantity. Only the total price of the products needs to be included.

High Fedility Design

Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
During research, I observed that Khata operates on a monthly basis. To streamline this, I implemented two tab—automatically moving users to the "Wasool nhi hua" list once they reach the time limit ( Usually 30 days) .

Ammar

Rs. 2000

Kamran

Rs. 10,400

Udhar barh gaya

Awais

30 Days

Rs. 2000

Zain

30 Days

Rs. 10,030

Udhar barh gaya

Ammar

Rs. 2000

Kamran

Rs. 10,400

Udhar barh gaya

Awais

30 Days

Rs. 2000

Zain

30 Days

Rs. 10,030

Udhar barh gaya

Ammar

Rs. 2000

Kamran

Rs. 10,400

Udhar barh gaya

Awais

30 Days

Rs. 2000

Zain

30 Days

Rs. 10,030

Udhar barh gaya

Customer type 01

  • Ammar who has fully paid their previous month's khata.

Customer type 02

  • A Kamran who has borrowed more than the allowed limit (e.g., Rs. 10,000) within a month has exceeded the credit limit.

Customer type 03

  • Awais who has not yet paid their pending khata from 30 days

Customer type 04

  • A Zain who has not clear pending khata and has also exceeded the udhar limit.
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image

dd / mm / yy

Rs. 2000

mm / dd / yy

Rs. 2000

Jun 10, 2024

Rs. 1000

dd / mm / yy

Rs. 2000

mm / dd / yy

Rs. 2000

Jun 10, 2024

Rs. 1000

dd / mm / yy

Rs. 2000

mm / dd / yy

Rs. 2000

Jun 10, 2024

Rs. 1000

During my research, I take some pictures of Khata book where I noticed that shopkeepers follow the DD/MM/YY date pattern. So, I implemented the same pattern in the design.
Weather app image
Weather app image
Weather app image
We encourage shopkeepers to organize their khata and ensure customers clear their Khata by the 1st of each month. To support this, we set the default due date to the 1st of the next month.
Also Shopkeepers have two options for sending the total Bayka bill
  • WhatsApp &
  • SMS

How the Bayka Bill Message (Reminder) Work

  • Once the due time ends (usually 30 days ),
  • The Bayka bill (Reminder) message is automatically sent to the customer via the selected option (WhatsApp or SMS).
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
During participant observation AND After talking to the shopkeeper. I understand that shopkeepers have limited time. Instead of adding item-wise details, they prefer to directly enter the total purchase amount into the customer's khata.


Also auto-selects today’s date by default, allowing shopkeepers to enter Udhar more efficiently.
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
User flow of Adding the Payment in customer khata
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
User flow of Adding the customer. You can add the customer from your contacts or also add the new customer .

How the customer get Notification

Customer have two options they can get Notification through whatsApp and SMS message

How I make the Clean Design ?

Define UI components (buttons, cards , list etc ).
Design scalable components with variants to handle different states.
Align with iOS Human Interface Guidelines for platform consistency.

PROTOTYPE

Mid Fedility prototype

  • Focus on core user flows instead of making everything interactive.
  • Use dummy content where real data isn’t necessary.
  • Avoid overloading with unnecessary interactions.

TESTING

Conducted interview with shopkeper and gathered design feedback on prototype iterations.

Shopkeeper feedback was gathered up to the high-fidelity design stage to align with end-user needs.

Here is the before and after version of the screen

Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image

Problem

The Customer List lacked clarity in distinguishing between Bakaya (pending) and Wasool (collected) payments. Additionally, the design needed refinements for a cleaner look.

Solution

We added clear labels for Bakaya and Wasool in the Customer List to improve readability. Along with this, we made subtle design adjustments for a more polished and organized appearance.

Before & After

Weather app image
Weather app image
Weather app image
Weather app image

Problem

  • I used different words for the same meaning.
  • I used words that shopkeepers don’t commonly use in their khata.
  • Customers clear their khata in the next month, not the current month. Showing "Ada ho chuka" (Paid) and "Total howa" (Total Amount) is unnecessary and may create confusion.

Solution

  • "Ada ho chuka" → ✅ "Wasool"
  • "Payment" → ✅ "Wasool"
  • "Baki rahta hai" → ✅ "Bakya"
Remove "Ada ho chuka" and "Total howa" from the design. Instead, only display "Bakya" (Remaining Amount), which keeps the interface simple and to the shopkeeper's needs.

Before & After

Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image

Problem

Previously, the Udhar add flow had 2 steps, making the process slower. Additionally, there was no item count feature, which made it difficult for shopkeepers to track bulk items.

Solution

We streamlined the Udhar add flow by reducing the number of steps, enabling faster entry and delivery. We also introduced an item count feature, allowing shopkeepers to easily count and record bulk items.

Before & After

Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image

Problem

  • Users had limited flexibility in managing reminders
  • Design is complex

Solution

We redesigned the flow by breaking it into two steps and introduced additional features. Now, users have more flexibility, allowing them to adjust and manage reminder settings as needed.

TESTING

Conducted interview with shopkeper and gathered design feedback on prototype iterations.

Shopkeeper feedback was gathered up to the high-fidelity design stage to align with end-user needs.

Here is the before and after version of the screen

Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image

Problem

The Customer List lacked clarity in distinguishing between Bakaya (pending) and Wasool (collected) payments. Additionally, the design needed refinements for a cleaner look.

Solution

We added clear labels for Bakaya and Wasool in the Customer List to improve readability. Along with this, we made subtle design adjustments for a more polished and organized appearance.

Before & After

Weather app image
Weather app image
Weather app image
Weather app image

Problem

  • I used different words for the same meaning.
  • I used words that shopkeepers don’t commonly use in their khata.
  • Customers clear their khata in the next month, not the current month. Showing "Ada ho chuka" (Paid) and "Total howa" (Total Amount) is unnecessary and may create confusion.

Solution

  • "Ada ho chuka" → ✅ "Wasool"
  • "Payment" → ✅ "Wasool"
  • "Baki rahta hai" → ✅ "Bakya"
Remove "Ada ho chuka" and "Total howa" from the design. Instead, only display "Bakya" (Remaining Amount), which keeps the interface simple and to the shopkeeper's needs.

Before & After

Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image

Problem

Previously, the Udhar add flow had 2 steps, making the process slower. Additionally, there was no item count feature, which made it difficult for shopkeepers to track bulk items.

Solution

We streamlined the Udhar add flow by reducing the number of steps, enabling faster entry and delivery. We also introduced an item count feature, allowing shopkeepers to easily count and record bulk items.

Before & After

Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image

Problem

  • Users had limited flexibility in managing reminders
  • Design is complex

Solution

We redesigned the flow by breaking it into two steps and introduced additional features. Now, users have more flexibility, allowing them to adjust and manage reminder settings as needed.

Design Metrics

We can monitor the following KPIs that will indicate the success of this solution

User Adoption
* Number of users actively using digital khata.

Engagement Rate
  • Frequency of app opens per user to record transactions or check balances.
  • Number of transactions recorded per user daily, weekly, or monthly.

Retention
  • Percentage of users returning to the app within 7, 30, or 90 days.

Customer Satisfaction
  • Net Promoter Score (NPS) indicating likelihood of users recommending the app.
  • App store ratings and reviews reflecting user satisfaction.

Monetization (if applicable)
  • Conversion rate of free users upgrading to premium features.
  • Average revenue per user (ARPU) from subscriptions or in-app purchases.

Learning

User-Centered Design

Spending time with shopkeeper and observing their workflows highlighted the importance of designing with the user in mind. I learn how to do effective research.

IOS Guidelines

I spent time learning iOS guidelines and implemented some of them in the design.

Final Design

Final Design