ALBAMaisonOpen the app
Design case study

A house
that answers.

ALBA is a concierge app for people who live in managed estates — and for the one person who runs them. It was built to make service feel attended to rather than ticketed.

Product design & front-end · Tanmay JainResident & operator · 3 journeysPrototype · Next.js, React
At a glance

What the system carries

Two audiences, three form factors, one system holding all of it. These are counted out of the codebase rather than asserted — the suite fails if any of them drifts from what actually shipped.

3
Journeys — the home, the arrival, the desk
15
Screens, each deep-linkable
3
Form factors, one set of rules
37
Tokens the system is written in
13
Colour pairs held above AA
57
Tests holding the rules
The product, running

Have a look around

This is the app itself, not pictures of it — everything here works. Follow Adrien through an ordinary week at home, arrive as a new resident being invited in, or take Rosa’s seat and run seven houses from one desk.

Adrien — living in the house day to day
● Live — Home
9:41
Saturday · 5 JulyAll settled today
Good evening,
Adrien.
At a glance
This week
Why this exists

The category’s own reviews

The people living with these products have already written the brief. Resident portals ship with years of public reviews, and the same four complaints keep surfacing — work that vanishes, money that arrives unexplained, status nobody can see, interruptions nobody asked for. I read them against established interface guidance and designed for the pattern underneath. Every source is linked; each finding names the decision it drove.

Residents report that managers can delete maintenance requests whether or not they were addressed, leaving tenants unable to see any past requests at all.

Resident Portal Mobile — user reviews
Decision

A request is a record, not a ticket. Every request keeps a visible timeline the resident owns, and resolved requests stay readable rather than disappearing from the list.

Users who are uninformed about the system’s current status cannot decide what to do next, nor figure out whether their actions were effective.

Nielsen Norman Group — Visibility of System Status
Decision

Every open request states where it stands — submitted, acknowledged, scheduled, in progress — on a track, with the time of the last movement. Status is the row, not a detail screen.

Reviewers describe payment centres that are hard to use, interfaces unoptimised for mobile, and inconsistencies such as double rent charges.

Resident Portal Mobile — App Store listing & reviews
Decision

Money is stated before it is asked for: what is owed, what the charge is for, and the date it was raised — then exactly one way to settle it.

Reviewers complain of notifications popping in at all hours, and of promotional interruptions that cannot be opted out of.

Resident Experience — App Store reviews
Decision

Notices are a page the resident visits, sorted by what needs them first — not a stream that interrupts. The estate speaks once, in one voice.

Adrien
Lives in one house

Six things a year go wrong in his house, and he wants none of them to become his job. He is not a power user and never will be — the product has to be worth opening on the four days a month he needs it.

What he judges it by · did it get handled
Rosa
Runs seven houses

Every one of Adrien’s six lands on her, times seven houses, all at once and out of order. Her day is a design problem in its own right — triage across seven ledgers, not record-keeping — and the product gives it the same weight it gives the home.

What she judges it by · what needs her, now
The call this forced

Work vanishes because the desk can delete it. Status goes dark because the desk never has to show it. Money arrives unexplained because the ledger speaks only to the desk. Notices interrupt because broadcast is the only voice it has. Four resident complaints, one address — you cannot fix the resident’s week from the resident’s screen. So the operator got the second full journey, not an admin panel, and one system holds both sides of the conversation.

The system

Read from the stylesheet, live

One system carries both journeys and all three form factors. What follows is not a description of it — the page reads the live stylesheet as it renders, so these are the product’s own values, changing the moment a token does. Hand-typed documentation starts lying the week it is written.

Colour · 37 tokens total
Type · Fraunces & Inter, self-hosted
Display · 300 · 40px
Good evening
Title · 400 · 22px
The Verde Bungalow
Body · 450 · 15px
Rent, autopay and charges.
Eyebrow · 600 · 12px
AT A GLANCE
Spacing · one owner per gap
Radius, line & elevation
0 · rows, rules
6px · swatches
999px · pills, buttons
the only shadow: the device
hairlines, never cards
Motion · one curve, everywhere
Buttons · three tiers, never two filled
Filled commits · ghost undoes · text-link goes elsewhere.
Rows · hairlines, not cards
Saltwater poolWest terrace
Olive gardenMature
Wine cellarClimate-set
16px padding, one rule above. No card, no shadow.
The drawing · one per estate, 7 in all
The same hand every time: ink line on paper, a thin sun, the ground carried through. Each draws itself in — the product’s component, not a picture of it.
Contrast · measured, not assumed
Open the design system
The decisions

Six choices that make it this

The character of the thing comes from a small number of decisions, each one a refusal of what the category does by default. Left is the usual answer. Right is ALBA — rendered here with the product’s own components and tokens.

01 · Surface

Hairlines, not cards

The usual
Saltwater poolWest terrace
Olive gardenMature
Wine cellarClimate-set
ALBA
Saltwater poolWest terrace
Olive gardenMature
Wine cellarClimate-set

What you are looking at

The same three amenities. On the left each one is boxed, shadowed and floated apart; on the right they are lines of a single list, separated by a rule.

What it makes true

Nothing is packaged. A card says here is a component; a rule says here is the next thing. The whole product carries exactly one shadow — the device frame — so the page reads as paper with ink on it rather than an interface stacked in layers.

What it cost

Boxes group things for free; a rule does not. With the cards gone, hierarchy has nowhere to live but in the spacing — which is why the gap scale became law, why every interval sits on a 4px grid, and why a test fails the build the moment the stylesheet and SPACING.md disagree. The look of restraint is paid for in governance.

02 · Image

A drawing, never a photograph

The usual
stock photograph
ALBA

What you are looking at

Where a listing would put a photograph of the house, ALBA puts an architectural elevation, drawn in the same hand for all seven estates. It draws itself in on arrival.

What it makes true

A photograph flatters, dates, and quietly promises a particular afternoon. A line drawing describes the house without selling it — and because it is drawn rather than shot, every estate can be given the same care, which is the actual promise the product is making.

What it cost

A photograph is free at any scale — someone already took it. Drawings have to be made, in one hand, for every estate that joins: at seven that is a discipline, at seventy it is a commissioning pipeline with a style guide. That bill arrives with growth, and the decision stands because a photograph could never give seventy houses one voice.

03 · Status

The status is the row

The usual
Pool heaterOpen
ALBA
Maintenance · Grounds
Pool heater cycling off
Rosa replied · Technician on site
In progress · today, 9:15

What you are looking at

One open request in a list. On the left it says only that it exists. On the right it names what it is, who last moved it, where it stands, and when.

What it makes true

Nobody should open something to find out whether anything happened. The category's own reviews are full of residents who cannot see their own history; here the record is the list, so the answer to 'is anyone doing anything' is visible without a tap.

04 · Colour

One accent, spent once

The usual
UrgentPaidPendingNew
$19,950
Everything asks at once
ALBA
Rent & charges
$19,950
$18,500 rent · $1,450 in charges
One clay mark. It is the thing that needs you.

What you are looking at

The same money, twice. On the left every state has a colour and they compete; on the right the page is ink and paper with a single clay mark on the one figure that wants a decision.

What it makes true

An accent only means something if it is rare. Clay is reserved for what needs you — the unpaid charge, the unread notice, the request that has stalled. Spend it on four things at once and the resident has to work out which one is real.

What it cost

One accent means one level of urgency, so the product has to be right about what qualifies. That is not a palette rule; it is a triage policy — every screen has to decide what genuinely needs the resident, and the accent is only as honest as that judgement.

05 · Voice

Serif for people, sans for the machinery

Sans throughout
RESIDENCE
The Verde Bungalow
BALANCE DUE
$19,950
ALBA
Residence
The Verde Bungalow
Balance due
$19,950

What you are looking at

A house name and a balance, set two ways. On the left one typeface does everything. On the right Fraunces carries the names and the figures, while Inter is left to the labels above them.

What it makes true

Two faces divide the page into what is being said and what is doing the saying. The house, the people and the money are spoken in serif; counts, tags and eyebrows stay in sans and get out of the way. It is what keeps a rent figure from reading like a database field.

06 · Address

A person, not a queue

The usual
TICKET #4821
STATUS: OPEN
ASSIGNED: —
QUEUE: MAINTENANCE
ALBA
Rosa Ibáñez
Your estate manager
Usually replies within the hour

What you are looking at

Who receives a request. On the left, a reference number and a queue. On the right, Rosa — named, pictured, with how long she usually takes.

What it makes true

Service that feels attended to has somebody's name on it. Every request in ALBA goes to a person and comes back in her voice, and the operator side is built as her desk rather than an admin panel — which is why the same design system had to serve both sides of the conversation.

Every one of the six spends attention rather than adding it. That is the whole position: in a product about service, the design’s job is to decide what the resident should not have to notice.

Tests

What the suite refuses to let slip

6 files, none of them ceremony. Four pin rules that actually broke while this was built — the list below names each bug — and two hold the page to its central claim: the app on it is real, and the journey list is the registry it navigates by. This is where design intent stops being a preference and starts being enforced.

it("no text colour drops below AA", () => {
  for (const { fg, bg, role } of CONTRAST) {
    const r = ratio(token(fg), token(bg));
    expect(r, role).toBeGreaterThanOrEqual(4.5);
  }
});

In plain language

This walks every colour the product puts text in, works out how much it stands out from the surface behind it, and fails the build if any pair is below the accessibility threshold of 4.5.

It reads the colours from the stylesheet rather than a copy. If someone lightens a grey next year to make it feel quieter, this test goes red before the change reaches anyone who has trouble reading it.

contrast.test.jsRecomputes every colour pair from the live token values in alba.css, then sweeps the whole stylesheet for any rule setting text on its own background — written after all three status pills shipped under AA on a wash of their own hue.
spacing.test.jsThe spacing scale stays on the 4px grid, and the tokens SPACING.md documents are the tokens that exist — its first run caught the doc naming a token that was never declared.
screens.test.jsEvery deep link resolves, and the journey list on this page is exactly the registry the app navigates by — the same object, so they cannot drift.
stats.test.jsEvery number printed on this page, checked against the file it describes. It has already corrected this page's own test count more than once.
case-study.test.jsxThe page renders, mounts the real app inline — no iframe, no screenshot — and is never sitting on a splash screen on a cold load.
collisions.test.jsNo class name on this page collides with one in the product's stylesheet — written after a shared name flung ten swatches into the corner of the page.
Accessibility

The audited result

Audited with axe-core against WCAG 2.1 A and AA on this page, plus a manual pass over the product itself. Contrast figures are computed from the tokens.

Text colourOnRatioAA (4.5)

What this does not prove

Zero violations is a floor, not a verdict: GOV.UK seeded a page with 143 barriers and the best of ten tools found 41%. A machine sees a missing label, never a confusing one. Past this table, what is proven is small — every control is a real button, keyboard-reachable with a visible focus ring, and motion honours reduced-motion. The next bar is a screen-reader session.

Where this goes

A house that answers before it is asked

The prototype settles the manners: how a house speaks, what it refuses to shout, whose name is on the answer. Those manners are the hard part, and they scale further than a phone. What follows is the argument for what they could carry — none of it in here, all of it the reason to build the next thing.

The house reports itself
Service before the complaint
  • The pool heater raises its own request.Plant that files a fault the week it starts drifting, so the first anyone hears of it is Rosa saying it is already booked.
  • The estate has a standing rhythm.Linens on Thursdays, guests most Fridays, the olive terrace cut before August. A household has a shape; the desk should keep it without being reminded.
  • Every promise is on the record.An account of what was asked, agreed and done that neither side can quietly revise — the exact thing residents say goes missing today.
The desk becomes a network
One picture, many hands
  • Vendors as participants, not phone numbers.The gardener confirms Thursday from his own van and the resident’s timeline moves itself. No one retypes anything.
  • An estate desk that spans houses and firms.Seven becomes seventy, across managers and trades, without the day turning into a queue with people in it.
  • Rosa’s judgement scaled, never replaced.Let the desk settle the routine so the manager spends her attention on the things that actually need a person.
The far edge
Worth arguing about
  • Ask aloud, anywhere in the house.“Ask for anything” taken literally — said in passing on the way out, understood, routed, and waiting as a request when you look.
  • Residency as something you carry.Lease, payments, requests and guests as one continuous record the resident owns and can take to the next house.
  • The system as a house style others can wear.A second estate’s name and colour inside the same manners, so quiet service is something an operator can adopt rather than commission.