How can we improve the workflow of sotheby's employees through digital design?

product design: Building internal tool that supports sotheby's business foundation

vikings-illustration.jpg
 

Working with a development team based in Iceland, we called this project "Viking." It's a project long overdue to update the workflow from consignment of an artwork, to cataloging it for auction, and through the point of sale at an auction both live and online. It replaces or works with existing third-party software to improve process and reduce redundancies, and is cloud-based to allow users to update information in the system in real-time.

Scope: 5 months (on going)

My role: 

  • Create UI flows, build empathy maps, journey maps, and user story maps.
  • Design clickable high-fidelity prototypes using Sketch, Principle and Invision.
  • Conduct qualitative research to discover new insights and unmet needs to help solve user problems. 

 

 

sitemap

 
 

When I joined this project the dev team had created a basic foundation for the structure of the tool, but there was no detailed sitemap to understand how interactions would guide the user to complete a given task. I designed a detailed visual sitemap flow that would allow our team to understand the complexity of the tool we were building together while also giving us the flexibility to make changes to user flows quickly just by viewing how it looked on this sitemap.

 

style guide

 

Building a complex tool from scratch, it is easy to run away with the amount of colors, font sizes and text layouts without any guiding foundation. In developing a style guide for this project, we focused on using Sotheby's brand colors as the base while constraining the rest of the palette to aid the user in remaining focused on the task at hand by using color to assist in the process. 

 
Color Palette@1x.png
 

When choosing fonts, we wanted styles that would reflect Sotheby's brand of refinement, but also be utilitarian enough to be used in a tool that employees would look at on a daily basis. We chose Mercury Display for Headers because it's contemporary and was originally designed for the everyday headline font for Esquire Magazine. It looks smart, quick, and very articulate.

For paragraphs, breadcrumbs and tabs we chose Benton Sans. It has an impressive eight weights for flexibility and differs from other realist sans-serifs in its organic shapes and subtle transitions of stroke width, all contributing to a less severe, humanist tone of voice.

And for buttons we chose Google's system font Roboto because according to Google it is "modern, yet approachable" and "emotional." And we think it looks great on buttons!

 
Text Styles.png
 

For all CTA's and Icons, there are three states to guide the user to know whether they can use a button, when they can't and when an action will occur if they hover over a button/icon and click on it. 

 
Buttons.png

style guide in action

Lots -Table View Row Moved New Position.png

prototyping

 

Generally, my workflow consisted of creating wireframes in Sketch and using Invision's Craft plugin to link artboards as a clickable prototype. Below are two examples of high-level flows; the first is a calendar for viewing scheduled auctions and their details by clicking on an event in the calendar; and the second is from creating and editing bid templates which are used as a guide in auctions for how much a bid can increase between a certain monetary level. 

 
 
 
 

At times I would need to just prototype an idea to demonstrate to the dev team how I thought a particular interaction should work, which is what makes using Principle so great! We could discuss an issue during stand-up in the morning and by lunch I could have a prototype ready to share. Below is an example of a quick prototype I made to demonstrate how a customizable dashboard could work when resizing cards or adding new ones to the dashboard.

 

user research

 

At times, I have conducted qualitative user research by interviewing key Sotheby's employees to better understand their current workflow, pain points and unmet needs. I created interview guides to make the interview structured to be respectful of my user's time. However, the guide was just a jumping off point, and I would often ask follow-up questions based on the answers given during the interview. Below is one of the guides I created to interview employees whose main function is to catalogue objects after they are consigned to Sotheby's. 

 
Internal UX Interview Guide.jpg

empathy mapping

 

After conducting interviews, I facilitated a workshop with the dev team on how and why we build empathy maps. We first reviewed the interviews together, and since they are in Iceland, it was really rewarding for them to actually see and hear from the users for who they are building software. We built the empathy map together as a team building exercise, but also as a single source of truth to go back to when a debate might arise about what a user actually wants or needs. 

 
Sotheby's Empathy Map.png

user story map

 

After creating our empathy map, we then used it as a guide to help us build this user story map for our different users at different parts of the process to bring an object from consignment to auction. Not only did it help to create a clear visual journey of our users but it also allowed our team to focus on building key features that might have gone unmet before creating this document. It also serves as a nice milestone checker that can be easily tracked as we continue to move toward our initial release for users. 

 
Viking User Story Map.png