Dream Home UI case study — Anna Jennings

Responsive web app · Property search for first-time buyers

Property search that starts with what you can actually afford.

Dream Home desktop search page with a map on the left and a grid of four property cards on the right, each showing a photo, address, price and bed and bath counts

RoleVisual design, design system, mockups, handoff

PlatformResponsive web — mobile, tablet, desktop

DeliverablesStyle guide, 25 components, developer handoff

Every property app asks you to filter by price before you know what your price is. For someone buying their first home, that's the hardest number in the process and the first thing the interface demands.

Dream Home turns it around. Onboarding asks for income, debt, savings and rate, works out a range, and carries it into search. The app then connects buyers with an agent they already know, or matches them with one who specialises in first purchases.

I took this from moodboard to developer handoff: the visual direction, the design system, every screen at three breakpoints, and the asset package at the end.

The briefasked for greens and blues, and gave three words: clean, quick, smart. I found sharper ones — pristine, swift, playful.

Two directions, and the one I talked myself out of

I built a dark, high-contrast board — straight lines, deep charcoal, pops of orange — and a light one built on neutrals, circular shapes and natural light.

I preferred the dark one. It has more drama and the orange is genuinely good. But property photography is bright and open, full of white walls and window light, and it's shot that way deliberately to make rooms feel larger. A heavy interface would have spent the whole page fighting the only content that matters.

So the light board won on an argument rather than a preference, and the palette that came out of it is warm, low in contrast, and noticeably unlike the saturated blues the category defaults to.

Two moodboards side by side: a dark one with charcoal, deep green and orange interiors, and a light one with sage, cream and white rooms arranged in circles — Dark and moody, and light and playful. The second one frames the photography instead of competing with it.

Held all the wayThe map beside a rail of results appears in the first sketch and survives unchanged into the built screens.

Sketch, grey, then colour

Layout and hierarchy were settled in pencil and then in greyscale, at full resolution, before any colour landed. By the time the palette went on there was nothing structural left to argue about — which is the point of working in that order.

Three hand-drawn wireframes: a Find Homes search screen with a filter control, a Messages list ending in Contact Pro, and a desktop layout with a large map beside a rail of result cards — First pass. The desktop map-and-rail arrangement is already here.

Three greyscale wireframes: the budget calculator with four sliders, the edit filters panel over a map, and a property details screen with a photo carousel and feature list — Second pass. Full resolution, real copy, no colour yet.

Four inputsMonthly income, monthly debt, down payment, interest rate — then a range, not a single number.

The screen the app is built around

Sliders rather than fields, because the point is to explore a range rather than to report a figure precisely. The result is deliberately a band — a first-time buyer doesn't have one number, they have a territory — and it feeds the price filter so nobody has to guess twice.

The budget calculator in greyscale and finished form, showing four sliders for monthly income, monthly debt, down payment and interest rate, and a resulting budget of $600,000 to $650,000 — Greyscale and finished. Nothing moved; the system just arrived on top of it.

IconsNeat and tidy with a hand-drawn feel, filled solid, never transparent. Twenty-four of them, one rule.

The system

Nine colours, each with a job. Five heading levels and a full set of body, emphasis and label styles. And a written rule for photography, because in a property app the pictures are most of the interface.

#0D1338Headings and body

#A9D4C3Primary

#559499Secondary

#CFE6C3Secondary

#728776Accent

#FDF6DCAccent

#FCFAF4Background

#CC7373Error

#96EBAACorrect

Heading 1

Black · 56

Heading 2

Bold · 40

Heading 3

Regular · 32

HEADING 4

Light · 24

Heading 5

Light · 18

Body copy, first size

Regular · 18

Body copy, second size

Regular · 13.5

BUTTON LABEL

Bold · 18

Photography rule: bright and neutral, strong light, a sense of space and contemporary style. Natural tones, green and plants. Staged rooms or people, always as the subject.

FiltersAn overlay on a dimmed map rather than a separate page, so you keep your place while you change your mind.

Finding somewhere

Criteria first, then a map, then filters over the top of it. Every target is full width with room around it, and the filter panel returns you to exactly the view you left.

Three Dream Home mobile screens: the criteria form with beds, baths, home type and location; the edit filters panel open over a dimmed map; and the home screen with Search, Favorites, Connect and Resources buttons

NavigationSix bar variants across the three breakpoints, plus search and onboarding states — designed as one family rather than per screen.

Three widths

On desktop the map and the results sit side by side and the filters become chips in the bar. On tablet the results narrow to a rail. On mobile the two trade places — map or list, one at a time, with a toggle between them.

A property details page on desktop with a photo grid beside price, address and a two-column feature list, and the same content stacked on mobile — Details. Desktop pairs the photo grid with a two-column feature list; mobile stacks the same content in the same order.

Handed overAssets at 1× and 2×, components as SVG grouped by type, a documented style guide, and a linked prototype.

What the developer got

Twenty-five components exported individually and grouped the way they'd be used — buttons, form fields, cards, navigation — alongside the icon set, the photography at both densities, and the style guide that explains the rules rather than just showing the values.

What I'd do next

Write the criteria form properly. Several checkboxes still read “Select” — placeholder copy that never got replaced.
Check the calculator against real lending rules. It behaves sensibly but it hasn't been tested against how a lender actually works.
Design the empty, loading and error states. The palette defines an error colour that no screen uses yet.