Idealista Redesign
Redesigning Idealista's mobile home and feature interfaces for a better user experience.
- Role
- Mobile UX/UI
- Year
- 2023
- Client
- Idealista (passion project)
- Duration
- 3 weeks
( Overview )
Idealista is a popular online platform for finding properties to buy or rent across Europe, especially in Spain, Portugal, and Italy — with detailed listings, photos, contact info, mortgage calculators, and property valuations. But there were issues I recognised while using the mobile application, gathered from reviews and real-time problems from users I interact with.
( Problem Synopsis )
Idealista is a popular online platform for finding properties to buy or rent across Europe, especially in Spain, Portugal, and Italy. It offers detailed property listings with descriptions, photos, and contact information. Users, whether looking for a new home or real estate professionals, can easily search for apartments, houses, and more. The platform also provides useful tools like mortgage calculators and property valuations to help users make informed decisions. But there were some issues I recognised while using the mobile application (gathered from reviews and real-time problems from users I interact with):
- Some menus and modals are not labelled or they are poorly labelled
- First-time users looking for rooms can't find rooms in the drop-down menu
- Icon inconsistencies
- No clear demarcation between menu items
- No notification panel
- Hidden navbar
- Missing filters
( Expected Outcomes )
To redesign these content models, I set out to identify, prioritise, and visually articulate key actions a user wants to make that align with their mental model to get satisfaction from using the application. This potentially impacts the user flow in very interesting ways.
( Who Is Our User )
We will divide our Idealista users into two groups:
- House seeker
- Property Owner
For this study, we will focus on the house seeker, their mental model, and how the application brings them information with the existing content model.
The House Seeker
This is a user who is on the application to find apartments or land properties to rent, buy, or lease, as their needs vary. I'll be working from the house seeker's perspective.
Making assumptions: a house seeker who comes to the application is looking to get an apartment, land, or a house with an already existing mental model from other housing, rental, and land leasing applications — so, for example, a house seeker would like to:
- Search for apartments
- Save apartments found
- Communicate with apartment owners
In viewing and analysing mental models of similar applications, I showcased the wireframe of what the present home screen on the Idealista app looks like, and highlighted the issues I found in it.
If a user is to go by existing mental models of applications like Spot a Home, Airbnb, Fotocasa, and Pisos (apps I identified from interacting with a few users of Idealista and picking their brains on other similar applications they've used), the following needs to be addressed:
- The menu is in the sidebar, which deviates from the user's mental model of seeing the navbar at the bottom of the screen.
- The image on the screen leaves users confused about its purpose — no trigger tells them it leads to a page containing the features of the house being shown.
- The labels for the two menus don't use the right filler text (this may be due to different language restrictions, as it was originally in Spanish and had to be changed to English).
- There is a missing indicator telling users that their searches will appear under the 'Post a Listing' button; it's just vacant and makes the page look empty, wasting valuable space.
- No notifications indicator.
I created a wireframe for an interface that corrects these defects:
Reviewing different UX patterns used in designing renting and housing applications like Booking.com, Airbnb, and Pisos, I came up with this. In picking the icons and features on the menu bar, I thought about the most important features the user would like to access, drawn from the mental models I studied.
Content Model for the Search Results Page
In as much as users have their own mental models of how flows should be, we as designers should curate the right content model for them — designing interfaces and patterns to fit underlying mental models. For example, for the search results page, the content model should look like this:
Live App Screens
Refined High-Fidelity Screens
I designed an essential bottom nav bar which corresponds with users' mental model and has the essential menu items users frequent on the application (this decision was made from carrying out a usability test with present users of the application and running a heuristic evaluation).
On the search page, there's a notifications button that leads to a notifications page housing updates from messages with landlords and price changes in properties, and more.
A more detailed inbox page which also has a search bar and a filter option, for more control over the messaging menu.
The search results page has been edited to feature a less cluttered visual experience and prioritize highlighting the most sought-after information in the models.
A notification section where you get notified on message replies, price updates on apartments, and changes to the availability of apartments (this didn't exist on the live app).
Moved the 'Become a Landlord' modal to the profile page and also added effective copy along with a corresponding image to further drive the message home.
( Key Takeaways )
- Creating a more detailed content model helps designers understand the mental models and the different flows house seekers go through when using this application — and it doesn't hurt to make the application more visually appealing.
- There are topics I believe we can explore as designers in terms of inclusivity — for example, the sex of the tenants a property owner wants in their house, and how we can be more inclusive on topics like this. I had designed a new filter page but chose not to add it because of this.
- Deeper exploration into satisfying users — not just creating a product that users use because they have to, but one they enjoy using even if they have to.
( Going Forward )
I'd like to:
- Investigate the importance and effects of gender identity in house hunting — I feel this will help designers make better judgements when designing for inclusivity.
- Add the green colour scheme for Idealista (I didn't add it to most of the redesign because of accessibility concerns).
- Research how landlords use the other offerings of the application, to make design improvements to that side also.
- Show an animated prototype of how my redesign works.
( References )
- Closing the Experience Gap
- Case study: Redesigning an online home rental marketplace
- 10 things to learn from Airbnb's design
- Content model: Why you need one and how to make your colleagues take notice — @GatherContent
Next project
Olynfilm Experience Design