1stdibs Message Center

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

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

1stdibs Message Center landing page

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.

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

filtering the inbox

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. Here’s an example using the “select all” feature for convenient bulk actions - note that the greyed out options to the top right of the first conversation are now selectable. Archiving or marking a conversation read / unread moves the conversation to its appropriate folder in the navigation panel and updates the total counts for each folder as appropriate.

selecting a conversation

Optimizing the way the inbox updates presented a challenge. If the seller takes an action on a conversation which would move it out of the current view, we'd have to refetch the entire list of conversations for that view to keep the state of the data in the UI aligned with the backend representation of that data.

To solve this issue, I implemented two separate relay mutations - one for views that need wholesale refetching (like the “unread” tag) and one for views that only need to update (and therefore refetch) a smaller selection of individual conversations.

I also built out the front end inbox search feature, which you can see in the top left of the page. 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.

searching the inbox

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

multiple inbox filters

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:

hovering over a conversation

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.

starring a conversation

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

Rescaling is easy, but reflowing different components for legibility on smaller screens took custom media queries and a lot of meticulous work with the CSS flex box model!

sweet sweet responsive design

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 (and of course the React, Relay, GraphQL ecosystem). Hopefully that’s evident here!