COSMOS

Portfolio  /  CoStar Group

COSMOS
DESIGN
SYSTEM

UI Design, Component Architecture & Mobile Experience

Client CoStar Group
Role Senior Art Director · UI Design
Scope Design System · Mobile · Web · Navigation
Platform iOS · Web · Desktop
CoStar app loading screen
CoStar app onboarding — welcome screen
CoStar app onboarding — intro illustration
CoStar map view with property pins
CoStar mobile map — blue interface

Overview

Building a System
at Enterprise Scale

As part of CoStar's internal product design team, I contributed to Cosmos — the design system powering CoStar's flagship commercial real estate platform used by brokers, investors, and analysts across global markets.

The work spanned shared UI components, visual language, and cross-department adoption as Cosmos grew beyond its origin team into a multi-product system. My contributions touched the web platform, mobile application, navigation architecture, and emerging product surfaces including news and reporting tools.

Design Systems Component Architecture Navigation UX Mobile UI News & Editorial Layouts Information Design Cross-Department Adoption

The Context

CoStar Group

CoStar Group is the world's leading provider of commercial real estate information, analytics, and online marketplaces. The platform serves tens of thousands of professionals with property data, market intelligence, lease comps, and industry news — all within a single, highly complex product ecosystem.

Designing for this context meant balancing extreme data density with usability — building systems that could scale across dozens of product areas without sacrificing coherence or craft.

Cosmos was the foundation that made that scale possible.

Areas of Contribution

Cosmos Design System

Core component library and visual language for CoStar's enterprise product suite — shared UI patterns, token documentation, and cross-department adoption as Cosmos expanded beyond its origin team.

Navigation Redesign

Redesigned the primary navigation for CoStar's main product as a slide-out pullout panel — improving access to deep hierarchies while preserving screen real estate for core data views.

Mobile Application UI

UI design for the CoStar mobile app — adapting dense commercial real estate data and property search workflows to touch-first interfaces across device sizes and use contexts.

News Section & App

New interfaces for CoStar's news and editorial content — layout systems for article display, news feed components, and a dedicated news application with typographic hierarchies suited to high-frequency financial content.

New Data Display Patterns

New ways to surface complex commercial real estate data — comparative property views to market analytics dashboards — making high-density information scannable and actionable for research-driven users.

Cross-Department Adoption

Supported Cosmos adoption across additional product departments — ensuring design consistency as the system scaled to new contexts, teams, and interaction patterns not covered by the original component set.

Mobile Application

Property Search
in Your Pocket

The CoStar mobile app brought the platform's commercial real estate data to iOS — requiring every dense data view and property search workflow to be reimagined for touch. The map interface became the primary navigation surface, with property pins, radial action menus, and 2D/3D toggle views giving field professionals the same power as the desktop platform in a form they could use anywhere.

Map — San Francisco overview, blue interface
Map — San Francisco 3D view, blue interface
Map — Embarcadero close-up, blue interface
Map — San Francisco overview, white interface
Map — close-up, white interface with bottom nav

Action Menu System

The radial action menu — triggered from the center button — gave users fast access to key map interactions without obscuring the property data beneath. Each action was icon-identified and gesture-accessible, keeping the interface clean in its default state.

Map — default button layout
Map — radial action menu open

Bottom Nav States

The bottom navigation system evolved across design iterations — from icon-only to labeled tabs, and through different interaction states as the app's feature set expanded. Each state was designed to remain unobtrusive while the map was in active use.

Map — white interface 3D, bottom nav hidden
CoStar app frame detail
Designing for CoStar meant making enterprise-grade data feel intuitive — not simplified, but genuinely accessible to professionals who depend on it every day.
6+
Product Areas Served by Cosmos
iOS
Mobile Platform Designed
2D/3D
Map View Modes
∞
Properties in the CoStar Database

Navigation Redesign

The Pullout Nav

CoStar's desktop product contains over a dozen major feature areas — News, Properties, Listings, Comps, Lease Analysis, Tenants, Owners, and more. The original navigation consumed significant screen real estate with a persistent open panel.

The redesigned pullout navigation collapses to a slim icon rail by default, giving data views the full screen width they demand. A single interaction expands the full labeled menu — and deeper sub-navigation like the Properties panel opens inline, keeping users in context.

CoStar desktop — pullout nav collapsed to icon rail

Collapsed state — icon rail only

Three Navigation States

Open · Expanded · Collapsed

The navigation system was designed around three distinct states — a fully labeled open panel, a sub-navigation expanded view for deep feature areas, and a collapsed icon-only rail. The result gave power users fast access to any corner of the platform without sacrificing map or data canvas space.

Navigation fully open with labels

Full nav — labels + icons visible

Navigation with Properties sub-menu expanded

Properties submenu expanded inline

Navigation collapsed to icon rail

Collapsed icon rail — maximum canvas

New Product Surface

Report Builder

Among the new product surfaces designed during this period was a redesigned Report Builder — giving CoStar users the ability to customize the platform's most widely-used reports and create and save their own templates.

The introduction screen balanced the excitement of a significant new capability with clear wayfinding — making the transition from legacy reports feel like an upgrade, not a disruption. The "Don't ask me again" opt-out gave power users control while the primary CTA pushed new users toward the improved experience.

CoStar Report Builder introduction screen

Report Builder — introduction & feature announcement screen

CoStar app icon

CoStar App Icon

The CoStar diamond mark — five white facets arranged in a circular CoStar logo — translates directly to the iOS app icon. Set against CoStar's brand blue, it reads instantly at any size. The icon is the user's first touch point with the product, and it carries the full weight of the brand into a 60×60pt canvas.

CoStar Group is the world's leading provider of commercial real estate data and analytics. The Cosmos system underpins product experiences used by brokers, investors, and analysts across global markets.  ·  Work shown reflects contributions made as part of the CoStar internal product design team.