Enhancing UI – Property Cards: #2

In a (very) similar manner to a recent entry that I posted about redesigning property cards, a client wondered whether any enhancements could be made to their proposed design layout.

Whilst the content is similar to that original article, the layout of the information and details required to be shown to the user are different. For this reason, I thought it would be worth sharing the work that was undertaken.

It also provided a good example to demonstrate how similarly themed information can be presented differently to the user.

Some background

The client was again, a building company displaying new homes on their website. The names, developments and finer details have been changed as their new site is yet to be launched.

Currently, a property card appears as shown below:

The design of the card isn’t necessarily offensive, neither is it groundbreaking (no building pun intended).

By re-purposing some of the elements of the UI, I felt that it would be possible to present the information in a far clearer, more coherent manner.

The changes that I made, along with annotated comments are shown in the image below.

Nothing fundamental has been added or removed to the UI. I’ve simply restructured the card information hierarchy slightly. Regardless, the information is now clearer for the user.

When the rows of property cards now appear on the site, it becomes apparent that the details a user is looking at (bedrooms, location, value) are far clearer.

There are various changes happening to the development site as this was written. When it goes live, I’ll update this entry and you can hopefully see the above changes for yourself.

Thanks for reading.   🙂