Utropia — Mykyta V.

01 · The problem

A market without an index

The Dutch Caribbean is one market spread across six islands, and it had never been indexed. Listings lived on individual agency sites, in classified groups and in inboxes — so a buyer weighing Sint Maarten against Saint Martin was really comparing six different websites, and an agency's best property was invisible to anyone who had not already found the agency.

Utropia had to be two products at once: a marketplace that finally made the region searchable, and the back office the agencies would actually keep their listings in. Neither works alone. A marketplace with no listings is empty, and a console nobody publishes from is a spreadsheet with extra steps.

No single index: Six islands, six sets of agency sites. Nothing let a buyer compare across them, and nothing told an agency whether their listing was being seen at all.
Every listing shaped differently: Area, category, currency and type were recorded per agency. Rolling that into one searchable index meant agreeing on a schema before anyone could agree on a screen.
Two audiences, opposite needs: Buyers arrive on a phone, from abroad, browsing. Agents sit at a desk all day and need density. The same listing has to be a postcard on one side and a row in a table on the other.

02 · The marketplace

One search, six islands

The landing page has one job: make the whole region searchable from a single row of controls. Island, rent or buy, price, category — four decisions, then Explore. Nothing is nested behind an advanced panel, because the first search a stranger runs is the one that decides whether the index is worth anything.

Everything else on the page is evidence that the index is real. The counters sit directly under the wordmark, and the featured listings below them are whole cards — gallery, plot and built area, location, price — so the first scroll already shows what a result will look like.

Search: Island · rent/buy · price · category
Card: Gallery, plot & built area, price
Counters: 1.5k rents · 500 sales
Reach: 12 agencies · 6 islands

The marketplace landing page in full — hero, search bar, counters and the featured listings row — **Landing** The search bar straddles the hero and the listings, so it stays in reach whichever of the two you came for.

03 · Narrowing it down

Four fields on the way in, thirty once you're inside

The landing search is deliberately short. Results are where the real filter set lives, and it arrives in two tiers: the row along the top carries the four decisions almost every search makes — type, market and region, price, category — while everything else sits one click away behind All filters.

What is currently applied comes back as removable chips under the bar. That matters more here than on a mainland portal: a query that crosses islands, currencies and property types gets complicated fast, and a chip you can read and delete is the difference between narrowing a search and starting it over.

The filter vocabulary is regional rather than generic. Ocean view, beach access, gated, hurricane shutters — these are the questions a Caribbean buyer actually asks, and none of them exist on an off-the-shelf listing schema.

Top bar: Type · market & region · price · category
All filters: Status, year, beds, baths, areas
Features: 11 chips + swimming pool
Standing: Any search becomes an alert

Search results — the filter bar, applied filter chips, a four-up result grid and a promoted featured row — **Results** Applied filters read back as chips, each one removable on its own. The featured rows below the grid are a different card entirely — wide, with a filmstrip and the agency's own mark — so a promoted placement is legible as one rather than disguised as a result.

The All Filters modal — market, type, category, status, price, year, bedrooms, bathrooms, area sliders and feature chips — **All filters** Ranges are paired From/To selects, areas are sliders that top out at "Any", and features are chips rather than a checkbox list — so the panel can be read in one pass instead of scanned line by line.

Create search alert The honest answer to an empty result set. Rather than send a buyer away, the search itself becomes a standing request — this market is small enough that the right property often simply has not been listed yet.

Clear, twice Clear sits beside the bar and Clear all inside the modal. A filter set this deep needs a way back to zero that is never more than one click away.

Still under construction A checkbox, not a status. Off-plan property is a normal part of this market, and burying it inside a status dropdown would have hidden it.

04 · Finding a place

Scanning by geography, not by list

In a region, geography is the first filter — not price, not category. Somebody shopping the Caribbean is choosing an island before they are choosing a house, so browsing starts on a map rather than on page one of a list.

The rail down the left carries a price range per island, which is the cheapest possible way to rule one out: you can see that St. Kitts starts at $1,240 and Haiti at $640 without opening either. On the map itself, listings collapse into clusters that carry the count and the range together, so a zoomed-out view still answers "how much, and how many".

Map browse — island rail with per-island price ranges, and clusters labelled with listing count and price range — **Map browse** Every cluster answers two questions at once — how many listings, and what they cost — so zooming in is a choice, not a requirement.

05 · The listing

Everything a buyer 4,000 miles away has to decide on

Most people buying here will not walk the property before they enquire. The listing page has to carry the whole viewing: gallery first, then the four numbers that get compared — plot, built area, bedrooms, bathrooms — then the long technical read for anyone who is serious.

The part I care about most is the pair of amenity blocks. Included amenities and not included amenities are both listed, both with icons, both explicit. Every listing site tells you a property has a garden; almost none will tell you it has no garage or no hurricane shutters. Saying it plainly costs a little enthusiasm on the page and saves a wasted enquiry on both sides.

A full listing page — gallery, headline stats, description, technical information, the agent rail and a location map

Gallery, then numbers One hero with four thumbnails, and a media count on the button underneath — a buyer knows how much there is to see before deciding to open it.

Included and not included Two lists, a green check and a red cross. The absent amenities are the ones that end a deal late, so they are on the page early.

Surfaces and content Living, outdoor space, external storage and contents, each in m². The vocabulary is the local conveyancing vocabulary, not a portal's invention.

A named agent, not a form The rail carries the agency with a verified badge, the price, and a real person with a real phone number. Cross-border buying is a phone call, and the number is not buried behind a contact form.

Where it actually is A location map closes the page — the answer to the "location not available" that a thin listing shows in the results grid.

Report issue Sitting in the footer beside the newsletter. In a market this small, a stale listing is the fastest way to lose trust, and the people who notice first are the buyers.

06 · The agency side

The console behind the listings

The marketplace is only as good as the console feeding it. Agencies do not maintain an index because a product asks them to — they maintain it if the tool is faster than the spreadsheet it replaces. So the console is one table, and everything an agent acts on lives in the row.

Title, agent, completeness, contacts, price, market, type, category, published state, both timestamps, and the Utropia ID — visible at once, sortable on the columns that matter, filterable down to a single market. Publishing is a toggle in the row, not a workflow behind a screen.

The agency console listings table, with filters above it and per-row actions on the right — **Listings** One table, one row per listing. The filters above it are the same four fields the marketplace searches on.

A score, not a warning The ring in each row rates how complete the listing is. A property with no photos, no area and no category is the reason a search comes back thin, so the fix is shown as a number to raise rather than an error to dismiss.

Published is a toggle Nothing goes live through a wizard. The switch sits in the row, beside the data it publishes, so the state is always visible in the list.

Three currencies, one column Prices come in as $, € and NAF depending on the island. They stay in their own currency in the table and are normalised for search.

Market and region, not "location" The same taxonomy the marketplace filters on — so a field an agent fills in is a filter a buyer can use, rather than free text nobody can search.

The Utropia ID Every listing carries a short numeric ID in the last column. It is what an agent quotes on the phone and what support asks for.

Agencies see only their own The account switcher at the top right scopes the whole table. One console, twelve agencies, no shared inbox of listings.

07 · The system

One library, two products

A marketplace and a back office look nothing alike, and that is exactly why they had to be built out of the same parts. Two products drawn separately drift within a release; two products drawn from one library stay recognisably the same company even when one is a beach photo and the other is a table.

Five colours carry both. Teal is the only thing that ever asks to be clicked, navy does structure and headings, and the two warm neutrals are the ground everything else sits on. Poppins runs from the marketplace's display sizes down to the console's 12 px table labels without a second face.

The mark is a palm over a house — the two things the product is actually about, drawn as one glyph. It is specced on a grid so the lockup survives being set at 32 px in a console sidebar and at display size on the landing hero, and it ships in both a knockout and a solid-circle build for the light and dark surfaces it has to sit on.

Accent: #00CBCB
Primary: #224769
Surface: #F5EEE8 · #F6ECDB
Type: Poppins
States: Drawn, not described

Lockup Clear space is one corner block on every side, the mark's circle sets the cap height, and the wordmark's baseline is derived from it rather than eyeballed — so the pair can be rebuilt at any size without redrawing.

The token sheet — accent, primary, text, secondary and background swatches beside the Poppins specimen — **Tokens** Five colours and one face, shared by both products. Teal is reserved for the thing on screen that acts; navy carries structure; the two warm neutrals are the only grounds anything ever sits on.

Under the tokens sits the part that actually did the work: a component set drawn with its states in the file, not left to be improvised in code. Buttons exist as filled and outlined, each in three states. Inputs and selects are drawn at rest, focused and filled — the focus ring is a real specimen rather than a note in a handover doc. The console's assignment popover and the marketplace's feature picker are both here, because a search chip and an admin field turned out to be the same component with different copy.

The component sheet — filled and outlined buttons in three states, toggles, radios and checkboxes, the feature picker, text inputs and selects at rest, focused and filled, and the agent assignment popover — **Components** Every control is drawn in all of its states side by side, so "what does focus look like" is answered by the file rather than by whoever builds it first. The feature chips in the picker are the same chips the search filters use.

The marketplace on two iPhone screens — the landing search, and the island rail above the map — **Mobile** Buyers arrive on a phone. The search collapses to one column, the island rail becomes a scroller above the map, and the map keeps its clusters — same components, same order, nothing dropped for the smaller screen.

The rest of the marketplace reflows the same way. Results go one card per row and the filter bar shrinks to a type toggle and an icon, with the applied chips wrapping under it — so the query is still readable on a 375 px screen. The map does not disappear; it becomes a Show Map button floating over the results, because on a phone the list and the map cannot share a viewport and one of them has to be a mode. All Filters becomes a full-height sheet rather than a modal, and the listing page keeps every block it has on the desktop — but not in the same order. The agent card is a sticky rail on a wide screen; stacked, that would drop it to the bottom, so it moves up under the gallery and repeats at the end. Reflowing a layout is not the same job as re-ranking it.

Search results at phone width — one card per row, wrapped filter chips and a floating Show Map button — Results *scroll the frame* One card per row, and the map demoted to a button that floats over them.

The All Filters sheet at phone width — every control single-column, feature chips wrapping to six rows — Filters *scroll the frame* A full-height sheet, not a modal. Same controls, one column, chips wrapping instead of shrinking.

A listing page at phone width — gallery, headline stats, description, technical information and the agent card, all stacked — Listing *scroll the frame* Nothing is cut, and one thing moves: the agency, the price and Contact agent climb above the title, straight under the gallery — then repeat after the map. On a phone the enquiry cannot wait at the bottom of the page.

08 · Outcome

What it added up to

Two products shipped off one library, and a region that had never been searchable in one place became one index.

One index across six islands 1,500 rentals and 500 sales in a single searchable set, where before each agency's inventory ended at its own website.

Twelve agencies on one console Each scoped to its own listings, all publishing into the same marketplace through the same fields.

One library, two surfaces The marketplace and the console were drawn from the same tokens and components rather than kept in step by hand.