LoopNet Design System
An overhaul to the LoopNet search experience necessitated a revamped design system to keep teams in sync.
PROJECT TYPE
In-House Corporate
ROLE
Design Manager, Product Designer
TOOLS
Sketch, Invision DSM, Google Analytics, Atlassian Confluence
As my team of designers in Los Angeles were collaborating with product teams in Washington, DC to iterate on redesigns for the site's core search experience (homepage, search results, listing detail page), it became evident that we needed to grow our design system. We had a process for updating common elements and components, but we were lacking guidance on how and why we make higher level design decisions. We decided to port our shared Sketch library into Invision DSM so we could centralize components and documentation and have them be accessible to developers and stakeholders outside of the design teams. Also, to supplement our updated patterns and components I wrote documentation for our design principles and other top level process guidelines, like which breakpoint widths and viewport heights we design for, which devices/browsers/OSes we test with, and font and padding scales.
SKETCH LIBRARY CORE COMPONENTS
Selection of key components from the Sketch library that drove consistentcy across the core pages.
CENTRALIZED DESIGN AND DOCUMENTATION
Selection of screens from the LoopNet Design System in Invision DSM, after we centralized documentation and components.
VIEWPORT HEIGHT REPORTING
Based on Google Analytics data, every quarter I created a custom report calculating the weighted average of the most popular browser viewport heights for each device category. This was critical for intelligently designing fixed and sticky UI elements.
DEVICE, BROWSER, AND OS TESTING STANDARDS
Another quarterly report I created based on Google Analytics data to make sure we were being smart about using the right combination of devices, browsers, and OSes to get the best test coverage.
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