Rental Genome Map Visualization

Location Intelligence platform providing data-driven insights for Single-Family investors.

B2B
0-1
Web Map App
Mapbox
Industry

Real Estate

Duration

1 month

Responsibilities

User Research

Geospatial Data Visualization

Map Interaction Design

Rapid Prototyping

Usability Testing

Quality Assurance

Team

1x Product Designer

1x Product Manager

4x Engineers

Overview

Business Opportunity

Turning 1B+ proprietary data points into actionable insights

Roofstock’s 1B+ proprietary data points represented a major competitive advantage, but the insights weren’t accessible. The business opportunity was to unlock this asset by making the data visible, interpretable, and actionable for investors and analysts.

The Solution & Impacts

Interactive mapping solution to guide smarter investment decisions

We developed a Map Visualization Strategy that transforms Roofstock’s data into an interactive mapping solution, providing investors with the clarity and confidence they need to explore new markets, benchmark opportunities, and expand existing portfolios.

Results

1 B+

Data points on interactive map

$3B+

Assets being supported for investment decision

2x

Faster Analysis

Solution

Select a map layer to display the data and interact with the map.

Design process

Discovery & Definition

  • Conducted User & Stakeholder Interviews

  • Mapped user decision-making workflows

  • Analyzed 5 competitor platforms

  • Prioritized key data requirements

  • Defined success metrics and KPIs

Map Data Visualization

  • Collaborated with engineers on technical exploration in Mapbox

  • Tested 4 clustering approaches with 1,000+ datasets

  • Evaluated different map styles

  • Defined map interactions

Prototype


  • Interactive Prototyping (Figma)

  • Cross-Functional Alignment

  • Validated choropleth designs

  • Tested color schemes

  • Design System Contribution

Delivery & Development

  • Developer Collaboration

  • Edge Case & State Validation

  • Comprehensive Test Case Development

  • Responsive QA & Bug Triage

Research & Insight

Key Research Insights

How do investors make decisions?

Location Drives Investment Strategy

Investors structure their decisions from market → neighborhood → property.

Fragmented Tools Slow Decision-Making

Investors currently switch between multiple platforms to gather data, slows down their evaluation process.

Transparency in Data Sources

Trust is critical. Investors want to know exactly where each dataset comes from, how often it is updated, and whether it is reliable.

Comprehensive Property, Market & Neighborhood Data

Investors need a holistic view—market trends, neighborhood insights, rental performance, before they can make confident decisions.

What data investors care about most?

User interviews revealed the most critical data points for property evaluation. I categorized these findings, collaborated with the internal team to assess data availability and implementation effort, then created a prioritization matrix. Features rated 4+ stars (high user value, feasible development) were selected for the MVP launch.

Map Visualization Strategy

Map Style Selection

Visualizing thousands of properties with a Choropleth map

The biggest challenge was transforming thousands of dense property data points into a single, actionable, and scannable map view. I partnered closely with engineering to rapidly test visualization methods in Mapbox Studio—evaluating Dot Density, Heat, Hexagon, and Choropleth styles. Through rigorous testing against user clarity and technical performance, we concluded that Choropleth maps were the most intuitive and familiar format for investors, significantly boosting data comprehension.

Dot Density Map

Pro: Shows raw property concentration at a glance.

Con: Too chaotic for pattern recognition at scale.

Hexagon Map

Pro: Eliminates boundary bias with uniform grid.

Con: Unfamiliar format confuses non-technical users.

Heat Map

Pro: Instantly reveals high-density hotspots.

Con: No clear boundaries for actionable decisions.

Choropleth Map
Selected

Pro: Familiar geographic boundaries.

Con: Visual bias toward large, sparse areas.

User Testing Feedback
Engineering Feasibility

Strategic Map Visualization Decisions

Diverging vs. sequential color schemes

I iterated from sequential to diverging color schemes after aligning with the PM, because diverging palettes reveal deviation from meaningful thresholds (like market average or "moderate" rating), not just magnitude. This helps investors instantly identify areas performing above or below benchmarks, enabling faster comparative analysis.

Sequential Color Scheme

Pro: Works well when the dataset has one direction of meaning.

Con: Colors can blur together, making it difficult to differentiate.

Diverging Color Scheme
Selected

Pro: Highlights deviation from a meaningful midpoint, makes “good vs. bad” patterns instantly visible.

Con: Slightly more visually intense.

PM Feedback
Competative Analysis

Color choice

I chose a red-to-green diverging palette based on internal design team discussion, because investors naturally interpret green as positive and red as negative, matching financial and real-estate dashboards. This direction improved instant comprehension and reduced the need to rely on the legend.

5 vs. 7 classification levels

User testing showed investors made decisions faster with 5 classification levels compared to 7 levels. With fewer classes, users spent less time cross-referencing the legend and could identify patterns through rapid visual scanning. Five levels also align with cognitive science research on optimal pattern recognition.

7 Classification Levels Map Legend

Crime Score

0

2

4

5

6

7

8

10

Pro: Higher data precision.

Con: Higher cognitive load.

5 Classification Levels Map Legend
Selected

Crime Score

0

2

4

5

7

10

Pro: Easier to read at a glance.

Con: Less granular detail.

User Testing Feedback

Map Controls

Map Layer Activation

Choosing a scalable pattern for map layer exploration

To find the most intuitive way for users to explore map data, I prototyped and tested four interaction patterns. The left-side panel emerged as the strongest solution—users found it familiar, and it aligned with existing UI components, reducing development time, and it also easily supports future expansion of map layer data.

Option 1: Dropdown

Pro: Compact and familiar UI pattern.

Con: Hard to scan long lists.

Option 2: Bottom Toolbar

Pro: Provides categorized entry points.

Con: Unfamiliar format confuses non-technical users.

Option 3: Overlay Panel

Pro: High scannability, cards help visually distinguish different datasets.

Con: Covers a large portion of the map.

Option 4: Left-side Panel
Selected

Pro: Familiar interaction pattern used in GIS platforms, supports future expansion of layers.

Con: Reduces horizontal map space slightly.

Engineering Feasibility
Competative Analysis

Map controls

Map Legend

Crime Score

0

2

4

5

7

10

Popups on Hover

Crime Score

7/10

Popups on Click

Census Tract: 008301

Property Count

1,364

Grass Yield

5.54%

Roofstock Rent Est.

$3,250

Renter-ship Rate

35%

Corporate Saturation

28%

Neighborhood Score

2/5

Crime Score

7/10

Basemap Switcher & Zoom Controls

Streets

Satellite

Light

Dark

Retrospective

Data visualization isn't about showing everything—it's about revealing what matters

We had over a billion data points for this map visualization project, and my first instinct was 'let's show investors as much as we can.' But when I actually talked to users, they weren't asking for more data—they were asking for faster ways to spot patterns and make decisions.

That totally shifted how I approached it. I tested four different visualization styles, and ended up choosing choropleth maps—not because they displayed the most information, but because investors already understood how to read geographic boundaries. Same thing with colors. I dropped from 7 color levels down to 5 after testing, because people made faster calls with fewer options.

The big takeaway for me was that good data viz isn't about cramming in everything you've got—it's about making the right insight obvious.

Rapid technical collaboration beats endless design iteration

For the Map Visualization, I had to choose between 4 visualization approaches. Mocking them all in Figma would've taken weeks and wouldn't show real performance with 1,000+ properties.

Instead, I partnered with engineering to prototype directly in Mapbox Studio. We tested all 4 styles with actual datasets in days. This revealed insights I'd never catch in static designs—like how hexagon maps performed well technically but confused users, while choropleth maps felt immediately familiar.

This taught me that for data-heavy projects, tight engineering collaboration during exploration accelerates better decisions. Working shoulder-to-shoulder meant we evaluated user value and technical feasibility simultaneously, shortening our timeline and creating a more scalable solution.

I’m Ready for My Next Challenge - Let’s Build What’s Next

Accelerate Product Delivery
Build Scalable Solution
Impact-Driven Product Thinking
Smooth Team Collaboration
Establish Testing Frameworks
QA-Ready Design Handoff

I’m Ready for My Next Challenge -Let’s Build What’s Next

Accelerate Product Delivery
Build Scalable Solution
Impact-Driven Product Thinking
Smooth Team Collaboration
Establish Testing Frameworks
QA-Ready Design Handoff

I’m Ready for My Next Challenge -Let’s Build What’s Next

Accelerate Product Delivery
Build Scalable Solution
Impact-Driven Product Thinking
Smooth Team Collaboration
Establish Testing Frameworks
QA-Ready Design Handoff

I’m Ready for My Next Challenge -Let’s Build What’s Next

Accelerate Product Delivery
Build Scalable Solution
Impact-Driven Product Thinking
Smooth Team Collaboration
Establish Testing Frameworks
QA-Ready Design Handoff

For the best experience, please view this case study on desktop.

For the best experience, please view this case study on desktop.

For the best experience, please view this case study on desktop.

For the best experience, please view this case study on desktop.