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.
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.
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.
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.
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