1stdibs Message Center

Overview

My work at 1stdibs was focused primarily on the Message Center app. When our team realized some exciting new features would be too cumbersome to retrofit onto the existing UI, we initiated a major redesign - and I spearheaded the front end work.

The Inbox

This is what a 1stdibs seller first sees when opening the Message Center:

This inbox view is an interface for the Message Center SOLR core, which allows for fast, cached retrieval and flexible querying.

The main view holds conversations with potential buyers about items from the seller’s inventory. The navigation panel on the left allows the user to filter the list of conversations by certain criteria - for instance, unread messages or messages with an ongoing price negotiation.

Filtering & Navigation

Selecting an option from the navigation pane immediately reloads only the relevant conversations:

In order to take action on conversations (such as archiving old threads or marking a particular conversation unread), the seller selects the relevant row with the check box to the left of the item image.

Search

I also built out the front end inbox search feature. Entering a term in the default search box runs a SOLR query across all fields, but the seller is also able to search in a more granular fashion by opening the dropdown and entering terms into one or more of the search fields.

Search terms are applied in conjunction with whichever folder is selected in the navigation panel, for more control over search refinement:

Starring Conversations

To save a conversation for later response or just to highlight its importance, sellers can also “star” a thread. The star functionality is revealed on hover:

Clicking the newly revealed icon will tag the conversation with a star and will make it visible in the “Starred” folder in the navigation panel.

Responsive Design

The design is fully responsive, with mobile legibility down to 1stdibs’ minimum supported screen width of 320px.

Tech Stack

Technology	Purpose
React	UI components
Relay	GraphQL client
Redux	State management
GraphQL	API layer
SOLR	Search indexing

My time working on the 1stdibs Message Center taught me a lot about best practices, working in an enterprise environment, and coding with a team.