For this assignment, I developed GreenNest, a demo property search platform designed to streamline the discovery of homes. The primary objective was to move away from cluttered interfaces towards a layout that prioritises user intent and visual hierarchy.

A Two-Tiered Layout Strategy

The main design challenge was organising a high volume of search controls without overwhelming the user, and using iframe. By using Flexbox and CSS Grid, I was able to stack these complex components while maintaining a logical reading order.

Technical Implementation and CSS Grid

The interface relies on CSS Grid for the property listing columns and the integrated map view. This approach offers significant advantages for responsiveness. As the viewport narrows, the layout transforms to stack content vertically.

I utilised the object-fit: cover property for property images. This ensures that the photos, regardless of the source aspect ratio, is presented within the UI.

Visual Branding and Performance

I opted for a ‘Deep Green’ colour scheme, implemented using CSS variables.

Performance was considered throughout the build. By keeping the CSS modular and minimising external dependencies, the platform remains lightweight. The use of sticky positioning on the search bar shows that filtering options are always accessible to the user.

The demo site can be found here.