CASE / 03

Aurelia

A sales experience where the product is a photograph, an area and an aspect.

Role: Frontend architecture · UI
Year: 2026
Stack: Astro · TS · View Transitions
Status: Self-directed showcase

FIG 00 · AURELIA — DEVELOPMENT COVER

Aurelia cover: a limestone residential building at dusk under a serif claim, with a phone-sized residence card for a three-bedroom home overlaid at the lower right — An image-led product. The photograph is the argument; the interface's job is to stay out of its way and still let someone find the one home that suits them.

01 — PREMISE

The product is a photograph and a number

A residential development sells on light, aspect and area. Those are the things a buyer sorts on, and they are also the things that photograph well, so the interface has to let an image run full width and still surface the numbers that let someone rule a home in or out.

The type system does most of the work here. A serif display voice carries the marketing claim, a quiet mono carries the specification, and nothing else competes with the photography.

02 — INDEX

Filtering on what people actually choose by

Bedrooms, collection and outlook are the filters, because they are the three things a buyer already knows before they arrive. Each row carries the collection, the bedroom count and the interior area, so the index is scannable without opening anything.

Aurelia residences index: three residences listed with collection name, bedroom count and interior area, above a filter bar for bedrooms, collection and outlook — FIG 01 · RESIDENCES INDEX — the filters sit with the list, not in a drawer, so the effect of a choice is visible as it is made.

FIG 02 · RESIDENCE 4.2 — THE TERRACE COLLECTION

Aurelia residence page: a full-height interior photograph of a living room opening onto a terrace with a river view, beside a specification panel giving bedrooms, internal and external area and aspect, with an enquiry action and a floor plan below — Every home resolves to a page an advisor can send: one image sequence, one specification table, one floor plan, one action.

03 — NEIGHBOURHOOD

Context is part of the specification

Aurelia life page: a vaulted indoor pool photograph under a serif heading, above a neighbourhood section pairing a street photograph of Estrela with a simplified map locating the building relative to the river

EVIDENCE · 01

The map is drawn, not embedded: a tile service would load a third-party script into a page whose whole argument is the photography.

04 — CONVERSION

One conversion, three steps, one screen

There is only one thing to do on this site: arrange a visit. So the appointment request is not a funnel — it is date, time and details on a single screen, with the steps numbered so the length of the task is obvious before it starts.

Aurelia private appointment screen: a numbered three-step request with a week of selectable dates, four appointment times, and a details form for name, email, phone and residence interest, beside an editorial panel introducing the client director — FIG 03 · PRIVATE APPOINTMENT — the form is on one screen because the alternative is a three-page funnel for a single enquiry. Fields show seeded prototype data.

WHAT I'D DO NEXT

A saved shortlist an advisor can send as a link, which is how this conversation actually happens.

Availability that can go stale — a sold residence needs a state, not a removal.

The gallery is built for a fixed image count per residence; a home with two images and a home with twelve should not use the same sequence.

PROOF

Live prototype URL REQUIRED

Component source REPO REQUIRED

A proof link renders only once its destination exists.

INDEX Back to work NEXT · 04 Atelier Casa