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.
CONTENT FOR DAYS
A sampling of the nearly 100 mockups my team and I produced, each displaying real data collected by our research team.
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.
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
Hi, I’m Josh Fallon — a design manager and product designer in Los Angeles with several years of in-house experience managing, designing, and launching products on web and native platforms for large organizations. More About Me