Compass Design System

The design system of real estate

My contribution for components & patterns across Web, iOS & Android

design, plan, build, release, announce, test, map dependencies, and best practices,
standardize team methodology across designers,
write content for, publish, and evangelize a Design System Documentation website,
conduct user research sessions with Design System consumers to learn about areas of opportunity,
onboard designers, engineers, and Product Managers to the Compass Design System,
mentor mobile designers on best practices during high-stakes Mobility Reviews with leadership.

To date, the Compass Design System contains:

a Figma library of shared components, icons, UX patterns, and styles,
> 57 components written in React and CSS,
a 188-page website of documenting all components, best practices, code samples, and APIs for all tokens, atoms, components and patterns
product content guidelines for writing for the Compass platform,

At the time of writing, the Compass Design System is in active use at Compass by all web front-end, iOS, and Android teams. It enables 600 engineers, 85 designers, and $254M of real estate transactions yearly.

Company: Compass Real Estate
Team: Corey Greeneltch, Jane Park, Hiram Moncivais, Lucas Reis, Keri Martin, Trevor Burnham, Michael Haggerty-Villa, Kingsley Ehiogu, Kayoung Lee, Bill Heberer, Zachary Plata
Role: Staff Product Designer & Front-End Developer
Timeline: 2021-2022
Status: in active use

Here are two examples of my contributions: bulk actions and the listing card:

Bulk actions pattern

Real estate agents work fast and deal with large amounts of data yet the Compass platform had no single way of enabling agents to perform bulk actions on that data.

I designed the Bulk actions pattern for web, mobile web, iOS and Android with the additional goal of sticking close to native platform look & feel.

Desktop Web

Mobile Web

iOS

Android

Bulk actions lifecycle

Performing actions in bulk is inherently a multi-step process. To better support this notion for our community of builders, I documented the steps that take place when Bulk Actions occur.

1. Select mode: Optional
Not all pages offer item selection at the top-level. It may be necessary to toggle that mode on with a CTA.
2. Selection: Select what should be acted on.
2.1 BulkActions appears: When working with a Table, BulkActions animates up from the top of the Table when an item is selected. In non-Table scenarios, animate BulkActions from the point where Select mode is initiated.
2.2 Bulk selection: Optional
If it makes sense, offer "Select all". If so, make use of the "Select All Bar" component. Select the items on a page before offering to select all items in a data set.
2.3 Apply constraints: BulkActionBar reacts to only allow logically possible actions.

A Poptip may show to clarify why an action is disabled.
3. Action: BulkActions Buttons are an ingress to custom designed user-flows. Clicking an Button may result in the action being performed instantly, or in a modal dialog asking for more information or confimation.
4. Notification: Notify about the result of their action. This can be done with a Toast. Bonus points if you offer the possibility an Undo button in the confirmation Toast. Inform the user if an action takes longer than 1 second to perform.
5. Resolution: Once an action has been performed, return to the data list with the same items selected, unless the action triggered is one which changes the acted-upon items. (e.g. merge, delete, archive)