Customer Info App

overview

Customer Info App helps small resellers of internet, electricity and water services in Nepal keep track of their customers: whose plan is running out, who hasn’t paid, and who needs a reminder. Staff at the businesses that use it run it on their phones.

I designed and built it on my own, from the app’s structure and interface to its design system, data model and security rules. One codebase runs on Android, iOS and the web, in English and Nepali, with dates in both the Gregorian (AD) and Bikram Sambat (BS) calendars.

the problem

A reseller’s day comes down to three questions: whose plan is about to run out, who still owes money, and who needs a reminder. Get one wrong and a customer loses service, or a payment never gets collected.

Before the app, the shop kept its customers in a paper register: names, phone numbers, plans and expiry dates, written by hand. Finding who was due meant flipping through pages, and a missed renewal meant a customer’s internet stopped before anyone called them.

my part

• Design: the app’s structure and flows, every screen, the design system, and the Nepali and dark-mode versions.
• Build: the React Native app, the Firebase data model and security rules, automated tests and release builds.
• Grow: I set it up at my family’s shop first, then pitched it to other resellers; some of them took it on.

I wrote the app with AI coding agents (Claude Code). The product and design decisions, the review, and the testing on real phones were mine.

v1 to v1.1

The first version was ready in September. Testing it on real Android phones, plus two rounds of design review, showed what needed to change, and version 1.1 rebuilt the interface three weeks later.

before · v1.0.1

after · v1.1

What changed on Home:

• Analytics stopped being a tab. Its charts moved one level below Home, and the middle of the tab bar became a raised + for the most common job: adding a customer.
• Quick actions came off Home. They repeated what was already one tap away: the + in the tab bar, and import and export in Settings.
• The counts went two by two. Once Unpaid joined them, four tiles in a row cut off their labels at larger text sizes. Two by two gives every label room, and a count only turns orange or red when it isn’t zero.
• Customers became one grouped list. Each customer used to be a separate card with its own edit button, a small target competing with the row’s own tap. Edit now lives on the customer’s profile.

Two decisions

What the expiry ring measures. Every customer’s avatar has a ring showing how much time is left. Drawn as a share of each customer’s own plan, two customers with 20 days left would look completely different depending on whether they had bought one month or twelve. I chose a fixed 12-month scale instead, so the same days left always look the same, and let color carry the urgency: green, yellow, orange, red. An expired customer gets a full red ring, which reads as “act now” faster than an empty one.

How a form shows focus. The focused field used to grow while every other field faded to 40%. It looked good but hid the rest of the form while you typed. Now focus is a thin blue outline that’s always there, transparent at rest, so nothing shifts.

design

Structure

Five tabs, a raised + in the middle for the most common job, and everything else one level below.

The two daily jobs

Staff do two jobs every day, and both start from Home.

A customer just paid. The Home banner leads to the customers who need attention, already filtered. On a customer’s profile, Recharge opens a sheet for the duration, the amount and how it was paid (cash, eSewa, Khalti, Fonepay or bank), and shows the new expiry before you confirm. Days still left are kept: the new period starts when the current one ends. Confirming saves the new expiry, the payment, an activity entry and the month’s total in one write, so the records never disagree.

Reminding customers who are due. Reminders groups customers into expired, expiring in the next 7 days, and unpaid. Tapping one opens WhatsApp or SMS with the message already written, in English or Nepali. Nothing is ever sent automatically: staff review the message and tap Send, and the app logs it (“Reminded 2h ago”) so the next person knows.

Design system

One shared kit, in code: color tokens for light and dark mode, Inter on Apple’s text scale, and components every screen reuses. Every screen follows five rules:

• One main action. A filled button only where there’s one obvious next step. Everything else is a text action.
• Spacing, not lines. Cards sit on a tinted background, with hairlines only inside a card.
• Color means something. Orange asks for action. Red means expired or destructive. A zero never turns orange.
• Contrast checked. Text colors are tuned to pass WCAG AA.
• Easy to tap. Every target is at least 44pt, and small icon buttons get extra tap area.

A design review found seven icons using a blue that dropped to about 2:1 contrast in dark mode. They now use a brighter blue at about 5.5:1.

Nepali and Bikram Sambat

The whole app switches into Nepali. Inter has no Devanagari, so Nepali text swaps to Noto Sans Devanagari at the same weight, numbers switch to Devanagari digits, and dates can show in Bikram Sambat, the calendar used day to day in Nepal.

Testing on Android caught Nepali labels being cut down to their first word: Android measured the shrink-wrapped Devanagari text as narrower than it drew. The fix was to let the text fill its container instead of sizing the box to the text.

build

• One codebase. Expo and React Native with TypeScript, on Firebase, running on Android, iOS and the web.
• Each business is sealed off. Every business is its own organization, and the database’s security rules, not just the app, stop one from ever reading another’s data. Admin and staff roles decide who can restore deleted customers, manage providers or invite teammates.
• Nothing is lost by accident. Deleting a customer moves them to a Trash that an admin can restore from.
• Spreadsheets in and out. Export to a spreadsheet, edit it, and import it back: rows that match an existing customer ID update in place instead of duplicating.
• Optional two-factor sign-in with Google Authenticator or Authy, without needing Firebase’s paid plan.
• Checked automatically. 172 unit tests and a separate suite for the security rules run on every push to the main branches, and crash reports go to Sentry.

It runs on Firebase’s free plan, which is why customer photos are switched off for now.

grow

I built it for Poudel Electricals, my family’s DishHome sub-dealership, first, then showed it to other resellers nearby. Some of them started using it after I demoed it with their own customer list imported from a spreadsheet.

Each business installs the app directly on staff phones from an Android build. It isn’t on the app stores yet.

outcome

Customer Info App is in use at businesses today. Instead of flipping through a register, staff open Home each morning and see who’s expiring, who’s expired and who still owes money, and send reminders from the same screen.

Customers rarely get cut off by surprise any more: the app flags renewals before they expire, and staff send the reminder straight from the customer’s row.

what I learned

Redesign from use, not taste. Almost every change in v1.1 came from watching v1 in use, not from how it looked: quick actions nobody needed, counts that clipped at larger text sizes, and edit buttons that competed with the row they sat in.