LoopNet Design System

An overhaul to the LoopNet search experience necessitated a revamped design system to keep teams in sync.

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.

PROJECT TYPE

In-House Corporate

ROLE

Design Manager, Product Designer

TOOLS

Sketch, Invision DSM, Google Analytics, Atlassian Confluence

Design-System-Logo
Color-Palette
Typography
Font-Metrics
Data-Viz
Buttons
Icons
Forms

SKETCH LIBRARY CORE COMPONENTS

Selection of key components from the Sketch library that drove consistency across the core pages.

DSM-Principles-2
DSM-Layout-2
DSM-Typography-2
DSM-Navigation-2
DSM-Content-3
DSM-Forms-2

CENTRALIZED DESIGN AND DOCUMENTATION

Selection of screens from the LoopNet Design System in Invision DSM, after we centralized documentation and components.

Viewport-Heights

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.

Devices

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.

Copyright ©2023