Case study · 2025 · 3–4 months
UI/UX Design | Construction Finance | Internal Mobile App
My role
UI/UX Designer
Timeline
3–4 months · 2025
Team
1 Designer
1 Developer
1 QA
Platform
Mobile app
Status
Private internal tool
Introduction
The client
Cash Book is a financial management platform for a construction company that runs several businesses and projects. Site managers use it to record expenses, bills and cash flow on site. Administrators use it to see the money across every business, project and location in one place. I worked on it through 4TYSIX.
My role
I was the UI/UX designer. I ran user research to understand the paper-based process, then designed the UX flows, wireframes, visual design and the design system for the mobile app, working closely with one developer and one QA.
Impact
The product was built and deployed as a private internal tool. It replaced physical account books with clear, shared financial tracking, so admins and site managers now look at the same numbers.
paper ledgers left: tracking is fully digital
user roles: administrators and site managers
roles in one mobile app: site managers and admins
deployed for the client as an internal tool
01 — The problem
The company managed several businesses, projects and locations using physical account books. Every site kept its own records, so the numbers were slow to collect, easy to lose and hard to trust. They needed a digital product for day-to-day tracking, with clear visibility across everything.
Visibility
Money spread across sites
Each project kept its own book, so admins had no quick way to see the overall financial picture.
Accuracy
"Is this number right?"
Hand-written entries were easy to miss, repeat or misread, and hard to check later.
Comfort
Not everyone speaks accounting
Site managers are experts in construction, not finance. Accounting terms made simple tasks feel risky.
The challenge
02 — Who it's for
Cash Book has two main users. Admins need the big picture and control over the setup. Site managers need to record money quickly and correctly, often away from a desk. I designed for both, without making either feel lost.
Mobile app
Business owners and finance admins who oversee several businesses, projects and locations.
What they need
• See finances across every business and site
• Add businesses, locations and users themselves
• Trust that entries are complete and correct
What frustrates them
• Chasing sites for their numbers
• Records spread across many books
• No single, up-to-date view
Mobile app
Managers on construction sites who handle daily expenses, bills and cash, usually on the go.
What they need
• Record an entry in a few taps
• Keep track of bills and payments
• Understand their project's finances
What frustrates them
• Accounting terms they don't use
• Long forms on a small screen
• Not knowing if an entry was saved
03 — Research & strategy
I started by understanding how money was actually tracked: who wrote what, where the books lived and how numbers reached the admins. The biggest insight was that people had very different levels of comfort with accounting. So simplicity and clarity became the rule for every screen.
What the research told me
Insight 01
Comfort levels vary a lot
Some users knew accounting well, others not at all. The design had to work for both without slowing anyone down.
Insight 02
Entries happen on site
Most records are made away from a desk, so adding an entry on mobile had to be fast and simple.
Insight 03
Admins need one view
The real pain for admins was collecting numbers. They needed everything in one place, by business, project and location.
How I worked
User research
UX flows
Wireframes
Information architecture
Visual design
Design system
Mobile UI
Dev handoff & QA
04 — Mapping the flow
I mapped how a single expense moves through the system, from the moment it's spent on site to the moment it shows up in the admin's overview. The map made sure each role sees exactly what they need, when they need it.
Step 1
Set up
Admin
Adds businesses, locations and users.
Site manager
Gets access to their project.
Step 2
Record
Site manager
Logs an expense or bill in a few taps.
Admin
Sees the new entry come in.
Step 3
Review
Site manager
Checks the project's balance and recent entries.
Admin
Reviews entries across sites.
Step 4
Track
Site manager
Follows bills and payments due.
Admin
Tracks cash flow by business and location.
Step 5
Report
Site manager
Understands how their project is doing.
Admin
Gets a clear overview of all finances.
05 — Key decisions
Each decision came back to one idea: the logic behind finance is complex, but the screens don't have to be.
The problem
Finance tools are often full of jargon and dense tables. For site managers, that made simple tasks feel like accounting exams.
Options I weighed
Mirror a traditional accounting tool (familiar to finance people), or hide the complexity behind plain words and a few clear steps.
What I chose
Plain language, one task per screen and clear visual hierarchy. Entries ask only for what's needed, and the system handles the accounting logic behind the scenes.
Why it worked
People with any level of accounting knowledge can record and read their numbers with confidence.
The problem
The company keeps changing: new projects start, sites move and people join. A fixed setup would quickly go out of date.
Options I weighed
Have the development team configure each new business and site, or let the organisation manage its own structure.
What I chose
A self-managed setup where admins add and edit their own businesses, locations and users, and decide who can see what.
Why it worked
The product grows with the company, without waiting on developers for every change.
The problem
Admins used to collect numbers from many books before they could understand anything.
Options I weighed
Separate reports for each project, or a single dashboard that brings everything together with filters.
What I chose
One dashboard that shows where the money is across businesses, projects and locations, with simple filters to drill into any one of them.
Why it worked
Admins see the full picture in seconds, instead of chasing sites for their numbers.
06 — Visual direction
Money needs to feel safe. I chose a professional blue as the main colour, kept the layouts calm with plenty of space, and let the numbers stand out through strong hierarchy rather than extra colour or decoration.
07 — Design system
Financial data has to be easy to scan. I built a small, consistent set of colours, type and components used across the whole app, with clear states for every number and entry.
Colour
Ocean Blue
#12548E
Ice Blue
#E7EEF4
Obsidian Black
#121514
Stone Grey
#989898
Canvas
#F7F7F7
Typeface
Clean and very legible, especially for numbers, tables and financial data on small screens.
Visual language
Clear hierarchy, minimal noise and consistent spacing, so the important number is always the first thing you see.
Components
Entry forms, amount fields, category pickers, bill cards, balance summaries, transaction lists, filters, charts and empty states, each with full states, shared across every screen.
08 — Final designs
One app, two roles. Site managers log and follow money on site; administrators manage the setup and see the full financial picture, all from their phone.
For site managers
Add entry
Log an expense or income in a few taps, in plain words.
Bills
Bills and payments due, with clear status at a glance.
Attendance
Site workers attendance tracker.
For admins
Admin dashboard
Finances across every business, project and location.
Businesses & locations
Admins add and manage their own structure.
Users & roles
Invite people and control who sees what.
09 — Outcome
Cash Book was developed and deployed as a private internal tool. Paper ledgers were replaced with clear, shared financial tracking, giving admins and site managers the same numbers to work from.
paper ledgers: every entry is now digital.
roles working from the same numbers.
deployed for the client as a private internal tool.
"Shreya made a complex finance process feel simple, even for people who had never used an accounting tool."
Project Manager, 4TYSIX
10 — Looking back
Build the design system earlier
I'd define foundational components, patterns, spacing, type, states and interactions upfront, for more consistent and faster iterations.
Test on site, sooner
I'd test early prototypes with site managers in their real environment, where entries actually happen.
Plan for every edge case
Financial data has many edge cases. I'd map them earlier, so fewer surprises reach development.
Learnings
Learn the domain first
Understanding how money really moved on paper made every design decision easier and more grounded.
Complex logic, simple UI
The system can be complicated behind the scenes. The screen in front of people doesn't need to be.
Design for real-world constraints
People have different levels of digital and financial comfort. Good design works for all of them.
Enjoyed this case study?
© 2025 4TYSIX App Labs. All rights reserved. Designed by Shreya Pandya.