The goal of this project was to allow design firms to regularly update their profile on 1stdibs without relying on internal support. I had designed an internal system for our team to use to build the designer's profiles for our initial launch of the Interiors section on 1stdibs. Following that launch, I designed a content management system (CMS) that put the power to edit profiles into the hands of firms. The 6 month process included research, sketches, wireframes, visual design, prototyping, user testing, and more. I broke the project down further into 2 main parts: the profile editor, and the project editor. On this page I’ll go into the process of designing the profile editor, and you can learn more about the project editor on this page.
Once I understood the goals and requirements for the project, the first step was to do a comparative audit and review feedback from our trade firms on the current content submission process. Yvonne Hung, a designer on another team, conducted a thorough study of common UI’s in her work for 1stdibs dealer storefronts. I was able to leverage her comparative research for this project. Yvonne’s audit showed us that common CMS UI’s can be categorized as 1 of 3 types:
- In-line Editor (Facebook, Linkedin, Ebay, Squarespace, Twitter, Tumblr)
- Form (Etsy, Amazon, Tailtic, Airbnb, Zumper, Postlets)
- Combo (Behance, Houzz, Chairish)
We decided the in-line editor approach was the best match for our requirements and user needs. There were several ideas guiding our designs that we drew from our user feedback and from observing other UI’s:
- Must be able to toggle easily between preview and edit mode
- Show how strong / complete a profile is to encourage users to enter more information
- Use visual interactions and animations to make forms more delightful and intuitive
- Use step-by-step onboarding to guide users through setup
- Provide a way for users to customize the order of projects and photos in a project
Designs and prototypes
I started with many, many sketches. Here's a sampling of them:
Wireframes a few rounds in included what a new user would see versus a returning user as well as hover states.
Next up was the visual & interaction design for the CMS following 3 iterations of wireframes. I remained focused on creating cohesive components that could be reused whenever possible. Each interaction has a total of 8-9 possible states, not including the transitions/animations in between each. I identified those states and created a guide outlining every state in each interaction.
Below is a zoomed out view of the component / interaction Sketch file:
Here's an example of an interaction and it's various states:
Design specs outlining the various settings menu possibilities: