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.

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

CENTRALIZED DESIGN AND DOCUMENTATION

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

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

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.

Viewport-Heights

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.

Devices

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