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.

This writeup briefly explores some of the new features and comments on the challenges and triumphs of the redesign.

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.

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. 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.

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.

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

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.

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

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!