Building the user experience around the map
By: Joe Gomez
Everything from prices, legal risks, and brokerage services are difficult to navigate when buying a home in Russia. HomeApp.ru is improving the buying experience with detailed maps, real-time data, and AI-powered recommendations.
They used Mapbox Studio, our Maps SDK for Mobile, our Directions API, and dynamic features like animations and 3D buildings to engineer a web and mobile experience that’s centered around the map:
In 2018, online real estate search apps need to be mobile and map-based. User retention is critical for our business — the more our client uses our app for search, the more we know what he or she wants and the better services we can offer. It’s simple: Our customers want mobile, map-based search. -Alexey Igoshin, Founder/CEO
HomeApp.ru wanted to display thousands of homes, neatly organized by different geographic boundaries and zoom levels while also maintaining performance on mobile. They needed to create their own map layers and custom-style the data.
Because of the speed and customization, vector maps were on their radar from the beginning. Here’s why they chose us:
After extensive research on providers, we chose Mapbox because transitions between different zoom levels are smooth and clear. Each zoom level is fully customizable and provides so many opportunities for a better user experience like aggregating statistics at higher zoom levels and very detailed and specific information on low levels like 3D buildings. Mapbox Studio is also a powerful map customization tool that doesn’t require programming skills from our design team. -Viktor Kotlovsky, Head of UX/Design
A key factor for a lot of homebuyers is distance and mobility. How far are schools? Transit? and Entertainment? HomeApp.ru is leveraging our Directions API so users can explore this information while viewing a property.
Routing is a “killer” Mapbox feature. For our users, surroundings are as important as the real estate listing information. This gave us a powerful visual tool to highlight accurate distances to the most important places around like hospitals, schools, and public transport. -Viktor Kotlovsky, Head of UX/Design
As you explore the map, some of the finer details stand out like hover effects, fly-to animations based on scroll position, and custom markers. The ability to manipulate data based on map events allowed the developers to make content in the side panel responsive to map interactions, turning the map into an intuitive interface.
HomeApp.ru is taking data-driven mapping beyond the consumer experience. They’re using our heatmaps as a tool for the real estate operations team to better understand clients’ preferences based on actual search data.
Mapbox has a lot of great products that help us create really fast and beautiful vector maps. We used turf.js to prepare data for the map; Tippecanoe to create lightweight tilesets of custom layers like buildings and administrative boundaries; OSRM to normalize textual directions data, and Mapbox Studio for fast design prototyping.
Combining these instruments made the features that would seem impossible, easy and fast to implement. -Alexander Lashkevich, CTO
Use our SDKs and APIs to add context to real estate applications with custom data layers, directions, and fast maps. Have questions? Reach out to our team.
The HomeApp.ru real estate app was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.