Figure 1 — Web Uploads

One of the very first UI/UX projects I was assigned to at Figure 1 was the redesign of the case upload flow on Web. The previous upload flow had an outdated design and was a clunky experience for our web users.

Goals

• Give the upload flow a visual refresh
• Streamline the flow to make the process more seamless and easy to use

At the time we didn’t have a proper user research position at the company but there were some usability interviews done for the old web upload flow. I started by going through those interview videos and compiling notes on what the biggest pain points were. After getting a better understanding of the pain points, I talked to different company stakeholders; (Legal, Community, Communications, etc.) to get an idea of requirements such as the community guidelines that needed to be displayed during upload.

Redesigned Web Upload Flow

Tapping on the upload button would prompt the mandatory Community Guidelines. Users must tap “I Agree” to proceed.

After agreeing to the guidelines, users are taken to a fullscreen page where they are able to Drag & drop/upload their image. Users are also able to download Patient Consent forms on this page.

After the users upload their image, they’re taken to the main case editing screen. Here they can add their caption, edit/rearrange their images and Connect their case to a previous one they’ve uploaded.

Caption tips and rules are provided for users to construct a suitable caption for the Figure 1 community.

The main image editing screen includes the option to block faces, draw, and crop the image.

Users can use the Draw tool to block patient identifiers if they are undetected by our face-blocker.

After the user is satisfied with the image and caption, a preview of their case is shown and the final step is to tag the case with the relevant Specialty or Anatomy tag.

When the users post their case, they are taken to a “Thank you” screen where they can either share another case or close the flow to go back to the main Feed.