<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Poul Luisen</title>
    <description>The latest articles on DEV Community by Poul Luisen (@poulluisen).</description>
    <link>https://dev.to/poulluisen</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4098973%2Fd56f6678-f772-43d1-afa8-b6b3c26fdfd9.png</url>
      <title>DEV Community: Poul Luisen</title>
      <link>https://dev.to/poulluisen</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/poulluisen"/>
    <language>en</language>
    <item>
      <title>Building Better Property Platforms: 5 UX Details That Matter</title>
      <dc:creator>Poul Luisen</dc:creator>
      <pubDate>Fri, 28 Aug 2026 13:08:20 +0000</pubDate>
      <link>https://dev.to/poulluisen/building-better-property-platforms-5-ux-details-that-matter-4mn8</link>
      <guid>https://dev.to/poulluisen/building-better-property-platforms-5-ux-details-that-matter-4mn8</guid>
      <description>&lt;p&gt;Property platforms often serve two very different types of users.&lt;/p&gt;

&lt;p&gt;One person wants to find a home. Another wants to publish a property and find the right tenant. Both may use the same platform, but their goals, expectations, and workflows are quite different.&lt;/p&gt;

&lt;p&gt;From a frontend and UX perspective, this makes real estate products particularly interesting to work with. Here are five details I try to keep in mind when designing property-related interfaces.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Start With the User's Intent
&lt;/h2&gt;

&lt;p&gt;It can be tempting to build one large interface around all the functionality a property platform provides.&lt;/p&gt;

&lt;p&gt;In practice, the first question should be much simpler: &lt;strong&gt;what is the user trying to accomplish?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For someone searching for a rental, the starting point might be:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;location&lt;/li&gt;
&lt;li&gt;monthly budget&lt;/li&gt;
&lt;li&gt;number of rooms&lt;/li&gt;
&lt;li&gt;move-in date&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A landlord has a completely different starting point:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;property address&lt;/li&gt;
&lt;li&gt;property type&lt;/li&gt;
&lt;li&gt;size&lt;/li&gt;
&lt;li&gt;expected rent&lt;/li&gt;
&lt;li&gt;availability&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Separating these journeys early makes the rest of the interface easier to understand.&lt;/p&gt;

&lt;p&gt;From a frontend perspective, even a simple intent selector can help establish the correct flow:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"intent-selector"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;data-intent=&lt;/span&gt;&lt;span class="s"&gt;"find"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Find a property&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;data-intent=&lt;/span&gt;&lt;span class="s"&gt;"list"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;List a property&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The goal is not to show fewer features. It is to show the right features at the right moment.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Keep Search Filters Predictable
&lt;/h2&gt;

&lt;p&gt;For renters, filters should behave exactly as users expect them to.&lt;/p&gt;

&lt;p&gt;Price ranges need clear minimum and maximum values. Selected filters should remain visible, and removing one filter should not reset the entire search.&lt;/p&gt;

&lt;p&gt;On mobile, I prefer keeping secondary filters behind a single obvious button and showing the number of active filters next to it.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"filter-button"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  Filters &lt;span class="nt"&gt;&amp;lt;span&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"filter-count"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;3&lt;span class="nt"&gt;&amp;lt;/span&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It is a small detail, but it gives users immediate feedback about the current state of their search.&lt;/p&gt;

&lt;p&gt;The same principle applies to landlord workflows. If someone has already entered an address, property size, and monthly rent, moving between steps should not cause those values to disappear.&lt;/p&gt;

&lt;p&gt;Predictability is often more valuable than clever interaction design.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Make Property Cards Easy to Scan
&lt;/h2&gt;

&lt;p&gt;A property card does not need to show everything about a listing.&lt;/p&gt;

&lt;p&gt;Its main purpose is to help users quickly decide whether a property is worth exploring further. I usually prioritize a few key pieces of information:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;photo&lt;/li&gt;
&lt;li&gt;location&lt;/li&gt;
&lt;li&gt;monthly rent&lt;/li&gt;
&lt;li&gt;size&lt;/li&gt;
&lt;li&gt;number of rooms&lt;/li&gt;
&lt;li&gt;availability&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A simple structure might look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;article&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"property-card"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"apartment.jpg"&lt;/span&gt; &lt;span class="na"&gt;alt=&lt;/span&gt;&lt;span class="s"&gt;"Apartment interior"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

  &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"property-content"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;p&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"location"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Copenhagen, Denmark&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;h2&amp;gt;&lt;/span&gt;Modern City Apartment&lt;span class="nt"&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;2 rooms · 78 m²&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;strong&amp;gt;&lt;/span&gt;14,500 DKK / month&lt;span class="nt"&gt;&amp;lt;/strong&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/article&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The visual hierarchy matters more than the amount of information shown. Price and location should be immediately noticeable, while secondary details can remain less prominent.&lt;/p&gt;

&lt;p&gt;This becomes especially important when several property cards appear next to each other. Consistent placement of key information makes comparison much easier.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Design the Listing Flow Around the Landlord
&lt;/h2&gt;

&lt;p&gt;Property platforms should not treat listing a home as an afterthought.&lt;/p&gt;

&lt;p&gt;For someone who wants to &lt;a href="https://www.copenhagenquarters.dk/udlej-lejlighed-kobenhavn" rel="noopener noreferrer"&gt;udlej lejlighed i København&lt;/a&gt;, the process may involve much more than uploading a few photos and entering a monthly price. Property details, availability, documentation, presentation, and tenant expectations can all become part of the journey.&lt;/p&gt;

&lt;p&gt;That creates an interesting UX challenge: how do we collect enough information without turning the listing form into one intimidating page?&lt;/p&gt;

&lt;p&gt;A step-based approach usually works better:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;listingSteps&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Property details&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Location&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Rent and availability&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Photos&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Review&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Each step should have a clear purpose, and users should always know how far they are from completing the process.&lt;/p&gt;

&lt;p&gt;Progress can be communicated with something as simple as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;progress&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"3"&lt;/span&gt; &lt;span class="na"&gt;max=&lt;/span&gt;&lt;span class="s"&gt;"5"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Step 3 of 5&lt;span class="nt"&gt;&amp;lt;/progress&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I also prefer saving form state between steps. Losing ten minutes of property information because of an accidental refresh is exactly the kind of small technical failure that becomes a major UX problem.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Design for Mobile From the Start
&lt;/h2&gt;

&lt;p&gt;Property platforms involve a lot of interaction.&lt;/p&gt;

&lt;p&gt;Renters open filters, browse photos, save listings, return to results, and compare options. Landlords may upload images, enter property details, review information, and respond to inquiries.&lt;/p&gt;

&lt;p&gt;Trying to compress a desktop interface into a smaller screen usually creates unnecessary friction.&lt;/p&gt;

&lt;p&gt;For a renter, the core flow might be:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Search → Results → Property → Back to Results&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For a landlord:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Property Details → Photos → Pricing → Review → Publish&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The previous state should survive throughout both journeys.&lt;/p&gt;

&lt;p&gt;Buttons need comfortable touch targets, filters should not cover essential information, and forms should use appropriate mobile input types wherever possible.&lt;/p&gt;

&lt;p&gt;Image upload is particularly important for landlord flows. Users should be able to select multiple photos, understand upload progress, and reorder images without fighting the interface.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Good property-platform UX is mostly about reducing small points of friction.&lt;/p&gt;

&lt;p&gt;Clear filters, scannable property cards, useful forms, preserved state, and predictable navigation may seem like relatively minor decisions individually. Together, they determine whether using the platform feels straightforward or exhausting.&lt;/p&gt;

&lt;p&gt;The most important lesson for me is that property products rarely have just one user journey.&lt;/p&gt;

&lt;p&gt;Renters and landlords may meet on the same platform, but they arrive with very different goals. Good frontend architecture and thoughtful UX should make both paths feel intentional rather than forcing everyone through the same interface.&lt;/p&gt;

&lt;p&gt;For developers, that is a useful reminder that UI components should not only look clean in isolation. They need to support the decisions users are actually trying to make.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>frontend</category>
      <category>ux</category>
      <category>css</category>
    </item>
  </channel>
</rss>
