Project: Redesign of the Featured Properties Widget
At a la mode, inc., one of the biggest pain points I heard from our real estate website customers was the poor design and usability of the current Featured Properties widget. Unfortunately it was part of the built in CMS and had been developed almost a decade ago and hadn’t been kept up over the years.
I decided to do some research and then sketch and mockup a new alternative to help improve our overall website product.
Team: Solo project, meant to utilize down time to help innovate products.
My role: UX/UI Designer
Target Audience: For all our Real Estate agent customers, who were located throughout the U.S. with a specific focus on Florida customers.
Challenge: Current Featured Properties widget would get complaints about look and usability from our customers on a regular basis.
User Interviews
It was great that at a la mode, inc., we had direct access to our users. This made it easy to conduct interviews to get feedback on that widget. I received consistent feedback that the widget design and functionality was a big pain point across the board.
Main Insights:
- The photos need to become more of a focal point since they're such an important part of a listing for agents.
- There should a clear difference between clicking for more information about a property and simple scrolling between properties.
- It needs to be more flexible so it can be customized.
I planned on incorporating each of these insights into the new design. In order for the widget to be customizable, I would work with the developers to make sure with the new design that the designers could use CSS to update the styles.
Wireframes & User Testing
Since the widget was pretty straightforward, I did some quick sketches and then began wire-framing out some options.
Program: Sketch
Created: 3 versions
Testing/Results: I almost didn't test for this project because it was so simple, but that would have been a mistake. Testing ended up revealing that the for sale button needed to be more prominent and button-like in order for it to get noticed.
Also, almost no one knew what "(MOL)" meant by the square feet listing ("More Or Less"), so after doing some research I replaced that with "(+/-)" so it would be easier to understand.
UI Design
After testing I moved onto the UI Designs, and created 3 versions, using stock imagery that looked similar to some of our clients listings in Florida.
Program: Sketch
Design: Made the listing image the focal point of all 3 designs, since that is such an important part of a property listing. Also added more balance and hierarchy in the information, verses the original designs that had everything around the same font size and weight. I wanted to make sure and utilize the space well and make the widget accessibility-friendly.
What have I learned from this project? The biggest lesson to me, was to always make testing a priority. Whenever possible, work it into my process, and I always have since then. Even if they project is small, I'm relying on my own perspective too much if I don't get feedback from others.
