LoopNet Search Results

Complex content display use cases were solved through protoyping and leveraging multiple resources.

PROJECT TYPE

In-House Corporate

ROLE

Design Manager, Product Designer

TOOLS

Sketch, Illustrator, HTML/CSS/JS

In tandem with the LoopNet listing detail page, the search results page was redesigned as part of an initiative to better focus on the core audience of listers (owners and brokers) and searchers (tenants and investors). The high level design changes involved reworking the search cards to feature more relevent content as well as designing alternate layouts to accommodate portrait-oriented photos. As we started working with development teams to implement the new design, we needed to supplement static mockups with prototypes to better illustrate how real data should be handled. My team also ended up taking the lead on creating the workflow for sourcing hundreds of vectorized branding logos for listing clients.

SEARCH RESULTS, REDESIGNED

Among other wholesale updates, the redesign featured larger results cards and specialized data for each property type, along with a refreshed UI for the filter bar.

SRP-Default-1

CARD HEADERS PROTOTYPE

Card headers had 4 data points, each which had the possibility of displaying long strings of text. To help decide how to best handle the different cases of data colliding, I created an HTML prototype illustrating different combinations of using flexbox, CSS grid, and text-overflow.

Header-Prototype-2

VECTOR OWNER LOGOS

A sample of the over 200 white vector logos my team and I sourced and/or recreated in Illustrator to seed the system when we first launched. These were displayed on top tier search results to add extra branding value for owners. After launch, I documented our process and trained an internal research team on how to source new logos going forward.

Owner-Logos

DESCRIPTION PREVIEW PROTOTYPE

On top tier listings, our research teams were tasked with writing the listing descriptions that appeared on search results cards. Since we had different card layouts based on the listing photo orientation and the listing ad level, there were various max fill amounts for the description text. I created an HTML prototype to show how we could build an internal tool for our researchers to get a live preview of the descriptions on multiple cards as they wrote them.

Placard-Preview-Prototype-1

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