A society management dashboard where the building itself is the interface: flats, payments, complaints, staff and security in one calm panel.
Role
Product Designer
Industry
Residential societies
Users
Committee & admins
Platform
Web dashboard
Project overview
Running a housing society means tracking 192 flats, monthly maintenance, visitors, complaints, staff and expenses, usually across registers, spreadsheets and group chats. Bella Casa puts the whole society on one screen the committee can trust.
01DashboardSociety at a glance
02FlatsResidents by block & floor
03PaymentMaintenance & collections
04ComplaintsIssues and their status
05StaffSecurity, cleaning, upkeep
The challenge
A whole building, scattered everywhere.
Committee members are residents with day jobs, not full-time administrators. The panel had to answer the questions they ask every day in seconds, without training.
Challenge 01
Money without a clear view
Maintenance dues, late payments and expenses live in different places, so the society balance is always a guess.
Challenge 02
Who lives where?
Matching a flat number to a resident, a payment or a complaint means flipping through registers.
Challenge 03
Requests get lost
Complaints, repair jobs and resident messages arrive in chats and calls, with no single to-do list.
Challenge 04
Security is a separate world
Visitors and camera feeds sit with the guard, not with the committee that is responsible for them.
The big idea
The building is the navigation.
Instead of hiding flats in a long table, the dashboard shows the actual building. Pick a block, point at a flat, and its story appears: who lives there, whether maintenance is paid, and who is visiting. Try it.
FlatA-1201Point at a flatMaintenance statusGuests today: –
0Paid
0Pending
0Vacant
PaidPendingVacant
Interactive demo with sample data
In the design: hover a flat for its status, hover a face to see the committee role
Dashboard anatomy
Everything that matters, nothing that doesn't.
Ten zones, each answering one question a committee member would otherwise have to ask someone. Tap a number to see what it does.
01 / 10
Top navigation
Payment monitoring
Who paid, who didn't, and one tap to remind.
Same shell, different focus. The KPI row switches to collections, charts show the monthly trend and payments by tower, and every pending row carries its own Remind action, so follow-ups happen from the table, not a phone.
145/192Flats paid
Progress against the whole society, not just a total.
RemindInline action
Every pending row gets one tap to nudge the resident.
A · B · C · DPayments by tower
Spot which block is falling behind each month.
InvoiceOne-tap billing
Preview the maintenance bill, then generate it for everyone.
Design decisions
Calm glass, over a real building.
The interface floats on frosted glass over a photo of a residential tower, so it feels like the society's own home, not generic admin software.
01
Spatial, not tabular
Committee members think in towers and floors, so the main view is the building itself. Tables stay one click away in the Flats and Payment modules.
02
Glass over context
Frosted cards over the society photo keep the brand present while text sits on calm, high-contrast panels.
03
One action per card
Each card has at most one primary action, Sent, Generate Invoice, Remind or Clear, so nobody has to guess what to press.
Visual language
One sky blue, a colour for every signal.
Sky blue marks the single primary action on every screen. Softer accents separate chart series and statuses, always paired with a label.
Aa
Urbanist
A geometric sans with soft, open shapes that keeps numbers and resident names easy to scan on glass surfaces.
LightRegularMediumSemi-BoldBold
Type scale · Urbanist Bold
H160 / 72
H248 / 64
H340 / 52
H430 / 40
H524 / 32
Body20 / 32 · 16 / 24
What was delivered
From brief to handoff.
Web dashboard. The main pieces of the final design:
