ALISON BUSKIRK

thumbnail of the SEE-Segment Figma project

Prototyping a user interface for a machine learning tool for image understanding


Role:
UX Designer   

Year: 2024




THE PROBLEM


The SEE-Insight tool is a machine learning–powered platform designed to support scientific image understanding by helping researchers extract insights from large sets of images. Traditionally, this process requires manually annotating hundreds of images, which is a slow and time-consuming task. SEE-Insight uses machine learning to identify algorithms that can speed up the workflow based on the researcher's initial annotations. However, the existing interface was outdated and not user-friendly, preventing the tool from reaching its full potential.

THE SOLUTION


My goal was to design a user interface inspired by existing image-segmentation tools where researchers can focus on their work, not on figuring out how to use the interface. I created a Figma prototype inspired by familiar tools such as Photoshop that enables users to flip through large image sets, quickly highlight or trace areas of interest, and view algorithm suggestions on the side of the screen. From there, researchers can select the best algorithm and apply it across similar images. If they are confident with the algorithm, they can even apply it to multiple images at once, significantly streamlining the workflow.





Gif of SEE-Insight prototype


Screenshot of import page on SEE-Insight prototype

STEP 1

Research

Secondary Research


I read many articles and resources up front to build foundational knowledge on what machine learning is and how it works, and I reviewed videos and presentations from the SEE-Insight research team to better understand image segmentation and the current workflow of the tool. I also explored existing annotation tools such as Supervisely, Encord, and Datature to identify patterns and interface standards that I could reference in the new design.



Follow-Up Questions


I asked a few follow up questions to clarify the client's priorities, such as:

The foundational knowledge and conversations with the client allowed me to create a design that aligns technical constraints with user needs.

Step 2

Design

Initial Sketches


I began with rough sketches and wireframes to explore ideas and potential features for the interface, then shared them with the client to gather feedback and confirm I was heading in the right direction.



Prototype


The interface was designed around two core workflows:

I focused on a minimal design with only the most necessary features for simplicity and efficiency, and I made sure to maximize space for the images themselves to help with precision. Algorithm suggestions were positioned to the side to be accessible without disrupting the workflow. To ensure familiarity and ease of use, I incorporated UI patterns from Photoshop and other image annotation tools into the toolbar and navigation.

Sketches for the SEE Insight interface

Sketches for the SEE Insight interface