The project editor was part of a bigger CMS project. The goal was to give design firms full control of their projects on 1stdibs and allow them to upload new projects with ease. The final product allows designers to upload and rearrange photos, add photo + project details, adjust project visibility, and tag items within each photo. 

 

07-emptyproj@2x07-emptyproj@2x

Process

I began the project with a comparative audit. After looking at many popular photo/project upload UI’s, I found that most approached it one of two ways. Either they walked the user through a series of modals and screens, or they provided an intuitive interface where the user could add their content in whatever order they wished to.

The first round of wireframes explored how our required elements would fit into different approaches and included a form-based (shown to the left below) and a tool-based (shown to the right below) version. 

A handful of early sketches:

After several iterations of wireframes, I put together an Invision prototype and had 6 designers test out the flow. I asked them to do the following tasks: 1. Add project details, 2. Add photos, photo details, and tags, and 3. Publish the project. Their feedback was invaluable to help identify potential problem areas.

Next, I moved on to visual design after incorporating key feedback from the design team. With the new designs and prototype in hand, we conducted in-person interviews with trade members who have profiles on 1stdibs to get a sense of the UI usability and nuanced feedback. I worked with our taxonomist and user researcher, Amy DeCicco, to write an interview guide to use in the user testing sessions.

Shortly after we launched the CMS, I began work on the item tagging interface. It enables designers to tag specific items within their photos. Whenever an item they have tagged matches a product on 1stdibs, their photo gets featured on that product page as style inspiration. This feature also made it possible to surface similar items from 1stdibs within the gallery so visitors could find the chair that they loved in the photo. Below is one of the screens from the tagging flow.

item_tagging2xitem_tagging2x

Below is a snapshot of the item tagging flow + interaction notes in Sketch:

05-item-tagging-flow2x05-item-tagging-flow2x

This is what a consumer would see if they are viewing a photo with tags. The tag indicators appear when they hover over the photo.

06-gallery-mockup06-gallery-mockup

UAT Process

One challenge many designers face is how to communicate their designs to engineering so that they are built as intended. Specs are not always followed, and engineers have varying levels of experience with design. In the case of this project, it took several tries at a UAT process before we landed on one that worked for myself and the front-end developer who was building the interface. At his suggestion, I ended up inspecting his code in the browser and calling out which CSS classes needed to be changed. My past experience coding websites came in handy and enabled us to work together at refining the UI.

I've included a peek into the process below. The code is on the left and my feedback on the right.

04-uat04-uat
01-desktop-published01-desktop-published