LoopNet Listing Detail Page

A content-heavy page required extensive data validation and prototyping to ensure it was ready for prime time.

PROJECT TYPE

In-House Corporate

ROLE

Design Manager, Product Designer

TOOLS

Sketch, Principle, HTML/CSS/JS

We set out on a redesign of LoopNet's most visited page with a couple goals in mind: 1) increase the marketing value for owners and brokers, and 2) make it more consumable for tenants and investors by displaying the most relevant content for each of several distinct property types. One of the bigger challenges was that for most of the content we planned on featuring, it was new to the page and our research teams hadn't completely sourced or created it yet. My team of 4 designers and I worked across multiple teams to mock up nearly 100 variations with real data to ensure that each property type was accounted for and to support the stories being written by product managers. Along the way, I also prototyped several components and interactions in Principle and HTML to support the efforts of product managers and development teams.

YOUR FUTURE OFFICE

A sample listing detail page, redesigned with more consumer-focused content.

LDP-Main

CONTENT FOR DAYS

A sampling of the nearly 100 mockups my team and I produced, each displaying real data collected by our research team.

LDP-Variations-1

AVAILABLE SPACES INTERACTION PROTOTYPE

Prototype created in Principle showing how sticky headers and summary rows would behave when scrolling through available spaces.

AVAILABLE SPACES TABLE PROTOTYPE

The expanded row interactions of the component didn't allow us to use a standard fluid table, so I built an HTML prototype to show how data summary columns could be evenly distributed like a standard HTML table instead of having fixed widths. The rendering logic was inspired by the Mozilla browser source code for calculating table row widths.

LDP-Table-1

CONTACT BROKER STICKY MODULE PROTOTYPE

My favorite concept had the brokers section at the top get clipped as it scrolled past the top of the container, and then just displayed the brokerage contact information and the call to action. It looked cohesive and elegant, but ultimately was too complex to build quickly so we settled on a functionally similar but less fluid solution.

More Projects

LoopNet Design SystemCorporate In-House

LoopNet Listing Detail PageCorporate In-House

LoopNet Search ResultsCorporate In-House

Wall of QuotesPersonal Project

Dribbble Top Player StatsPersonal Project

Body Weight AnalysisPersonal Project

Gymnastics Scores Data VizPersonal Project

Copyright ©2020