Redesigning IREF : using data and usability testing
IREF stands for Indian Real Estate Forum, a reddit cum quora of sorts for real estate enthusiasts, with a current traffic of around 30,000 users a week. It was acquired by housing.com in 2014, and it’s design was not much tampered with yet, owing to it’s inflexible user base that did not respond well to few changes in UI that were initiated earlier.
As an intern at housing.com, I was assigned the task to revamp IREF’s current state to a new one, and transition users to the new design. In this post, I highlight the product journey taken up by me.
Step-1 : Research
Data
Data driven design enables you to back your design decisions with solid numbers. It is a tried and tested approach at housing.com. If you're new to the concept, you can do some reading up about it here.
We prepared a handout for the data scientist, basically asking him for :
— Usage patterns
— Demographic data
— Browsing pattern of people in different city forums
— Old vs. new user behaviour comparison
— Distribution of word counts and media in posts
The data we received looked something like this:
Analyzing this data gave us a good know-how of how users reached the portal, and how they browsed through it. We used this data to draw design conclusions related to positioning and grouping of forums on the home page, designing the navigation, search flow , create new post modal and user profiles.
Step -2 : MVP, IA and flows
We created a flow, that took into account external touch points like search engine results, e-mail reminders and newsletters, and links with the housing.com site.
Step -3 : Wire framing
Now that I had a clear picture of what was needed, I started exploring wire frames, first on paper and then translating them onto sketch after some ideation and discussion. I chose to start with the home page, then going onto subsequent pages one by one.
For the home page, I grouped the information required based on usage patterns and similarity and ended up identifying three main sections:
— City wise real estate forums ( categorized 8 cities as major based on usage data)
— Other global forums (Loans, Property laws, Vastu)
— IREF Lounge (forums on socials, guidelines, promotions)
For the home page, I chose a single column layout with tiles for major city forums with a expandable drop-down for more cities, and a table with tab navigation for various other global forums. This ensured that major city forums got due attention, as 80% of our users chose to browse within a single one of these city forums.
For the internal pages, I defined a two-column layout that aided reading and provided scope for adding suggestive information and other CTAs on the right.
Step 4 : Prototyping and User testing
By the end of the wireframing phase, I along with Neelam had come up with two approaches that seemed equally effective.
Not wanting to decide solely on our intuition, we decided to go ahead with a usability testing exercise.
We created two separate prototypes on Principle. We chose principle as it speedily allowed us to create scrolling and tapping actions, and record screen videos while testing that could be analyzed later in depth.
Then we recruited users to carry out the exercise. Each user was asked to use both the prototypes, one by one, and we recorded their actions and noted their comments on each.
Prototype-1
Here is a video that was recorded during testing and shows a user navigating through prototype-1:
Prototype-2
The forum page of prototype-2 looked something like this:
For prototype-2, it was observed that users found it difficult to concentrate on one thread at a time, due to high cognitive load on the left. Here is an interesting read on cognitive load and it’s impact on usability.
Consequently, we chose to go ahead with prototype-1, after reworking a few things and refining the experience.
Step 5 : Detailing out search, create new discussion and gamification of user profiles
Now that I had the main framework and important pages all defined, I started detailing additional pages and actions.
Search
Making the search experience seamless was an important part as 25% percent of direct users were using the search bar, and a very substantial % of organic traffic via search engines landed on the search results page.
I identified 4 key means by which a user would want to search discussions on a real estate forum:
— Manually typing in queries ( eg. “What is the future of Kharghar?”)
— By Locality
— By Developer
— By Special tags (eg. Vastu, Home loans, etc.)
Then I proceeded with designing the format for predictive search and the layout for search results page, for which I stuck to the two-column layout used in other internal pages.
I also defined something called as the “Wiki Card”. For eg, if someone searches for “Properties in Kharghar”, a wiki card will show up on top, above the search results. Similarly, there would be Wiki cards for any keywords in the search query typed in by the user.
Create new discussion
The word count for new thread’s description was rarely found to be more than 250 characters, and the use of media too was less. Only 10% users chose to preview their post before posting it. Therefore, I decided to go ahead with a modal for create new post.
User profile gamification and message centre
I integrated gamification as it heavily adds to user engagement. For aiding my thought process, I went through some great articles that you can find here and here.
IREF supports an internal messaging system. I kept the layout such that a user can overview all his conversations while focusing on one.
Step 6: Defining the UI and visuals
The last step in my design journey. I chose to do my design on the 8-bit grid, in a 960px wrapper.
Typography
The font-face used is Roboto, with base size 14px. And line spacing as 1.5x of respective font size.
Color
The red for CTAs was derived from IREF’s logo to reinforce brand identity, while the blue-green was chosen as a secondary color for links.
Illustration Style
After some experimentation, I chose to go ahead with a line-art illustration style. A big shout out to Harsh for doing the amazing city line art.
Final look
Throughout the four weeks I spent on this project, I maintained a documentation on Dropbox paper that I regularly updated, noting down every design decision and the reasons behind it.
Doing this project has well acquainted me with the various stages of product design in a wholesome manner. I got to make a lot of decisions and it has been a great learning experience for me. A big thank you to Kanupriya, Gaurav, Jekin, Harsh, Sruthi and Rahul for their regular inputs.
If you want to know more about my experience as an intern at housing.com, you can read it here.
