Skip to content

Connecting homes with local context

Yaca Properties brings the home and its surroundings into the same search. I designed the map, search results, and listing views, building on the local ecosystem we created with Yaca Places. We're developing the core functionality in this first iteration, with a redesign planned for the second.

Product snapshot:

Product status
First iteration, functionality in development
My role
Product direction, UX/UI, information architecture, and responsive flows
Ecosystem purpose
Connect homes with the places around them through Yaca Places
What the work produced
Map, list, and listing views across desktop and mobile
Read the Properties mission

01 · Problem

Understand the home and its surroundings

Choosing a home is also about choosing where to live. Price and space matter, but so does everyday life in the area.

We want to make that search more personal. Someone might prefer a quiet neighbourhood, away from busy tourist spots. Our goal is to help people find a home that fits how they want to live.

That's why we built Yaca Places as the local ecosystem for Properties. It gives us a foundation for connecting homes with the places around them.

02 · Discovery

Three ways to explore homes

Browse photos, compare key facts, or explore prices on the map.

Compare homes visually

I gave photos room and kept price, rooms, and floor area in the same order so homes are easier to compare.

Tradeoff

Larger photos mean fewer homes fit on screen.

Desktop · Cards and map

Yaca Properties desktop card results for apartments in Ourense, with prices, agency names, filters, and a map.
Compare photos and key facts beside the map.

Mobile · Cards

Mobile property cards showing a 560,000 euro apartment in Ourense, five beds, four baths, 217 square metres, and its agency.
Give photos more room on a small screen.

Compare more homes at a glance

I used compact rows with price and key facts in the same position, making it easier to scan several homes.

Tradeoff

Compact rows give each photo less space.

Desktop · List and map

Desktop property results in compact rows with price, photos, rooms, floor area, agency references, and a map of Ourense.
Scan more homes with the same facts in view.

Mobile · List

Mobile list of apartments in Ourense with photos, prices, beds, baths, floor area, and a Show map control.
Compare price, rooms, and floor area in rows.

See what homes cost in an area

I put prices on the map and added a preview so people can check a home while keeping its location in view.

Tradeoff

Grouped markers keep the map readable, but take another step to explore.

Desktop · Map overview

Full desktop map of Ourense with blue price markers, grouped property counts, filters, and a Show list control.
See prices across the surrounding area.

Mobile · Selected property

Mobile map with a selected 170,000 euro property marker and a preview showing a kitchen photo, five beds, one bath, and 170 square metres.
Inspect a home while keeping its location visible.

Example listings in Ourense, Spain

03 · Listing details

Put the home's essentials first

I put photos, price, location, and key features first. On desktop, agency details sit alongside them. On mobile, the content follows a single column, with the full description further down.

Tradeoff

Larger photos make the home easier to explore, but push longer descriptions further down the page.

Desktop · Listing details

Desktop listing dialog for Piso in Centro, Ourense with a photo gallery, price, key features, description, agency, reference, and update date.
Keep property facts and agency details together.

Mobile · Listing details

Mobile listing for Piso in Centro, Ourense showing the photo gallery, 560,000 euro price, location, property features, and description.
Move from photos and price to practical details.

Design system

Yaca Properties design system

A focused foundation for the Properties direction: agency onboarding, listing previews, publishing states, trust signals, and property discovery.

In progress / pre-pilot

Property discovery and agency workflows

Uses Tailwind sky shades for publishing, trust, listing, and property-context flows.

Shared slate and neutral surfaces support text, borders, and dark sections. Functional icons keep publishing and trust states easy to scan.

Tailwind sky palette

Color tokens in use

Product accents

sky-700

#0369a1

Primary buttons, links, and CTA areas

sky-100

#e0f2fe

Panels, info badges, and cards

sky-200

#bae6fd

Focus and selected-card states

sky-400

#38bdf8

Dark-mode accents and focus rings

sky-950

#082f49

Accessible text on pale sky

60 / 48 / 38 / 30 / 24 / 18 / 16 / 14 / 13 / 12

Type hierarchy

Gabarito carries headings and editorial moments. Nunito carries body copy, controls, labels, helper text, and dense UI.

8 / 12 / 16 / 20 / 24 / 32 / 48 / 64

Spacing and radius

Stable stacks, equal-width cards, tighter product radius values, and softer marketing sections keep the system consistent.

WCAG AA minimum

Accessibility

Bright accents stay restrained on dark surfaces. Green and blue states keep readable text and visible borders.

04 · Shared foundation

Connect the home with the area around it

Places helps people explore an area. Properties adds the details of the home, from price and floor area to rooms and the agency behind the listing.

Next, we plan to show nearby Places alongside each home. Over time, we want to help people explore areas that suit their preferences. Both are planned steps.

  1. 01

    Places foundation

    Explore an area, learn about local places, and contribute information.

  2. 02

    Properties adds

    Compare homes by price, features, and location, with agency details close by.

  3. 03

    Planned connection

    See nearby Places alongside a home to get a feel for the area.

05 · Outcome and next steps

A property experience taking shape

We're building the core search and listing functionality first. The second iteration will focus on the redesign.

The product flows are already defined. We're now building the agency onboarding, metrics, and messaging functionality.

We want to help people find a home and a neighbourhood that feel right for them.

Explore the foundation

See the local discovery and contribution ecosystem built to support Yaca Properties.

See Yaca Places case study