Product page

MetroResidences • February 2020

The current design of the property search results page on the MetroResidences website was designed to showcase a large number of listings. The company was entering into new markets with only a handful of apartments that will be listed and the existing search results page would look too bare if there are only a handful of listings. This prompted the need to create a new layout that will be used to display a small amount of listings without the page looking too bare.

Tools used

AdobeXD
Webflow

My role

I was the sole designer for this page.

Platform

Responsive web

Current design of the listings page.

Wireframes

I had to work with the marketing team as well as the landlord of the building in Malaysia for the design of this page. The design direction that was given to me by the design lead was to create an interactive page that will capture the user’s attention. 

I started by creating a quick wireframe for the structure of the page as the contents in this page differs slightly from what we usually show. I used this as a guide for the placement of the content in the high-fidelity designs.

Prototype

The plan was to try something new - to use a no code solution, Webflow, to build the interactive page. We wanted to test if that was something feasible. While I was able to design most of the page on Webflow, I hit a roadblock whereby the interactions were not working properly on tablet and mobile. After trying to troubleshoot the issue for a couple of days, we agreed that it’s best to outsource the development of the page as the interactions that we were looking for may be far too advanced for a no code solution to handle at this point in time. 

In the meantime, as we had a deadline to meet, I quickly set up a static version of the design as a placeholder while the interactive page is being built.

Static page

Interactive page

Current project status

The interactive version of the page is currently being built by an outsourced developer. We’ve received a draft but it seems like the developer is having issues making the interactions work right but we’re giving him more time to work on it to see if the issues can be fixed.

See more work