Redesigning UI/UX of the Redfin App

“It’s art if it can’t be explained. It’s fashion if no one asks for an explanation. It’s design if it doesn’t need explanation.” If we go by the words of Wouter Stokkel, then a great design is one that speaks for itself. ‘Aesthetic, understandable, usable, and sustainable.’ 

For a UI/UX that works, design thinking is the widely adopted approach in the designer ecosystem. It ensures that a human-centered design is created and optimized through the best app design policies that help in the acquisition, retention, and satisfaction of customers. 

In continuation to our series- redesigning of popular mobile apps, we are here with a new blog post where we will be redesigning the UI/UX of one of the most popular real estate apps- Redfin. 

Redfin is a technology-powered real estate brokerage firm. It deals in buying, selling, and mortgaging residential properties. The company operates in 80+ markets and offers local agents to simplify buying and selling experience for consumers. 

Redfin mobile application enables its users to search nearby properties for sale, browse photos of homes, check out property details, take a virtual tour of properties and book a free home tour with a Redfin real estate agent. It is one of the most popular real estate apps in the United States, with approximately 6 million unique monthly visitors (according to Statista). This top-grossing app has over 200K downloads on the app stores. 

ALSO READ: How Redfin Works: Business Models and Revenue Streams

The aim of the project taken up by team Daffodil is to analyze the user interface of the existing Redfin mobile app (which is currently available in the market) and then redesign it for a better user experience. We will be using the Design Thinking approach to redesign the app. Let’s get started. 

Analysis of the App

“Creating an interface is much like building a house: If you don’t get the foundations right, no amount of decorating can fix the resulting structure.”

We started by analyzing the improvement scope in the app. For this, the existing functionalities and user flow of the app were analyzed. Then, by using appropriate methods and principles, the user interface of the app is analyzed to define the areas of improvement. 

Heuristic Analysis

It’s a usability engineering method that helps to find out usability-related issues in the user interface. 

• Consistency and standards

Consistency in UI means making sure that all the elements in the UI are uniform i.e. they look & behave the same way. This helps to constantly prove a user’s assumptions about the user interface right, creating a sense of control, familiarity, and reliability. In the Redfin app, some elements were found to be inconsistent. 

Example:

In this image, it can be observed that the primary buttons, illustrations, alignment, colors, and headers are not uniform across all the screens. 

The use of identical icons for different functions can lead to miscommunication and confusion. Similarly, there are some other areas in the app (headers, text labels, etc.) where the inconsistency is analyzed. 

• Recognition rather than recall 

This means minimizing the user’s memory load by making elements, actions, and options visible. The user should not be made to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.

Example: 

In this image, it is difficult for the users to acknowledge that there is a switch option between list view and map view as all the options are not visible on the screen. 

• Flexibility and efficiency of use 

This means adding flexible processes that can be carried out in different ways so that people can pick whichever method works for them.

The problems related to flexibility and efficiency of use in the Redfin app were:

Unavailability of a search option – The app has no search option for users to look out for a type of property, directly. Instead, they have to set filters in order to view the desired property. 

Unavailability of proper landing/home page – Apps are meant to be used over and again. Thus, there should be a landing page that a user can use to have easy access to desired actions.  

• Aesthetic and minimalist design 

Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information creates a distraction from the primary task and diminishes their relative visibility.

The property details page and filter page of the application is information-heavy and have long scrolls which makes it difficult for the users to look for the desired information.

Define

“A problem well stated is a problem half solved.”

After analyzing the app, we created a checklist of improvements to be made in the app. This included the following: 

• Creating homepage of the app
• Maintaining consistency in the identified areas
• Adding a universal search option for searching properties
• Making the switching option of the map and list view more user-friendly
• Creating minimalistic design for long pages containing huge amounts of data (property details screen and filter screen).

Ideation

Some rough ideas for the new design of the app are ideated by sketching.

Final Designs

Colors

Home Page 

Previously the “find home” page was the landing page of the app but now a new Homepage is designed where the feeds page is integrated and some new features are added. The new features include: 

• Universal search- to let users easily search for required home type instead of setting filters.
• Categories- to view properties of a single category.

The home page will be helpful to quickly search for properties as well as recommend the user about appropriate properties based on their past searches which will improve user flexibility and efficiency.

Find Homes

• Added a ‘Find Homes’ page with a universal search option 
• New categories were added as tabs  to quickly filter out searches  
• Introduced a toggle button between the list and map view which keeps the users informed about available view modes

ALSO READ: Why Good UX Design Needs Ethnographic Research

Property Details 

The information load in the new design is distributed into different subheaders. Users can easily access information that they want to view by just expanding that particular subheader. This minimalist design will help improve the user experience

Filter Screen 

The UI is redesigned to maintain consistency and to reduce information overload. The subheaders are converted into toggle options so that the users can choose the filter. 

Conclusion: 

Even a simple change in the interface can make a big difference. The user experience out of an app interface puts a huge impact on its customer base. Users always prefer to complete desired actions easily and avoid unnecessary interaction. Hence, apps with better user interfaces and experiences have the potential to attract more customers in a competitive market.

Need a similar kind of experience for your brand, connect with our expert UI/UX team.