Visual home buying experience for newly constructed and under construction real estate

About SliceView

SliceView is the trademark product from Housing that serves as a platform for home buyers to explore new housing projects visually and book their home online. On the business side, it enables builders to make their projects stand out and expose inventory level information on each home within the project.

The Context

When I initially joined Housing, SliceView 1.0 for desktop web was already live and making its presence felt among the online real estate portals as the only platform of its kind. The brief given to me was to take this product to mobile, make it even better in terms of usability and solve the problems faced in terms of users interacting with its pseudo-3D experience.

User Research & Personas

Housing at that time did not have any research team and had not done any previous research into understanding really what people were looking for while buying a new home. Hence I started off with talking to 12 different people in the target user segment who had recently bought a home, were currently in the process of looking for a home and used online services in their search for a home. The objective of the research was to look for behaviours and the different sets of needs among people while buying a new home and not specifically for SliceView.

Following were the personas that emerged from this study:

Exploring interactions for mobile

The evolution of the interaction design for mobile SliceView

1. Wireframes and quick paper sketches

2. Mock buildings using Google SketchUp

Since the design needs to scale for different kind of projects and different sizes of buildings, I used Google SketchUp and some building mockups available in the community to mock up the projects and explore different interactions and views possible. Here are some samples.

A project level view
A 60 floor high rise
A floor level view

3. Iteration 1: Wireframes

Building selected
Floor selection with drag interaction
Unit level view

4. Iteration 2: Wireframes

Filters with preferences applied
Floor selection on high rise building
Unit level view with filters applied

Final SliceView Mobile app

The what and the why behind key design decisions

1. Onboarding while project loads

Since each project has significant visual assets, it takes a while for the project to load. Using this time to show a small animation of what SliceView is helps home buyers get a glimpse of the flow like exploring buildings, choosing a floor and then a specific unit.

Frame-by-frame wireframes for the onboarding animation

2. Choosing a building from the project

A building can be selected by tapping on the building itself or the building name. When a building is selected, the user is taken to the floor selection screen where initially there’s a small bump animation in order to help them understand that they can start swiping or dragging up to move across floors.

3. Floor selection interaction

The user can either swipe up or down to move exactly one floor above or below. Or use a drag gesture to keep holding and move across multiple floors.

4. Floor selection for out of view floors

While dragging or moving towards floors in a building that are outside the viewport, the viewport automatically moves to bring it within the visible area.

5. Moving into a specific floor

Tapping on a floor while it being selected, takes the user to the floor view where they can now browse specific units.

6. Viewing unit level details

Users can tap on the unit in the floor view and look at further details of the specific unit to decide if they’re interested in buying that unit.

SliceView desktop web app

Optimizations from the first version of SliceView desktop

1. Image usage optimizations

Based on latency checks using Google Chrome’s inspect element, I realized that the images being loaded in the current implementation of SliceView on desktop web was not the optimal.

Original implementation of images for the floor selection had a full jpeg render of the entire image for each and every floor. This greatly increased the total size of the images downloaded for this purpose to an average of 15-20 MB for a project. The recommendation I made was to instead use a single jpeg image for the background and use transparent PNGs over them for each floor. This implementation eventually reduced the total download size to around 2-5 MB and improved the user experience of not having to wait for that long.

2. Modular side panel for navigation

The side panel for navigation was redesigned to be more modular and accommodate contextual cards based on the stage of the journey the home buyer was in.

Project level view Filters help in narrowing down which buildings have their preferred units User can navigate either by hovering over the building itself or choosing it from the side panel

3. Color codes for quick identification of availability

On hovering over the building, each floor is highlighted with the units that are available to buy. At a floor level, sold units and filtered out units are faded out with a tag indicating the same

Further explorations

This was an exploration in the direction of a city level SliceView based discovery

Home buyers can select a region within a city that they’re interested in buying The projects within the region are highlighted along with overall availability Choosing a particular project gives you insights into what people there are discussing along with neighborhood ratings like education, public transport, healthcare and recreation.

A summary of more of my work at Housing

Photostories for resale properties

Photos uploaded under resale properties were often not in a consistent order and hence made it difficult for potential buyers to look and compare a number of them in one sitting. Photostories brought in a standard navigation paradigm to view these photos according to different tags like bedroom, living room, kitchen, amenities, etc.

List view for the Buy platform

There were about 15 data points that we found were critical for a home buyer to even get interested in a property. The information presented in the list view helps people to look through multiple options as per their preferences and narrow down the ones that they’re interested in exploring further.

Back to projects