Creating Contextual Annotation
4 Team Members
April - September 2025
UX Design intern
Overview
In the winter of 2024, I joined Safe Software as a UX design intern for eight months. I was part of a team consisting of four designers, where I worked on one of their main products, the FME (Feature Manipulation Engine) Form, a data integration platform that allows its user to integrate and transform spatial data from a diverse range of formats and systems. users
During my time there, I led end-to-end design direction for the annotation improvement.
Context
Annotations in FME are designed to enhance the clarity and organization of workflows by allowing users to add comments or notes directly within the interface. They help provide context, instructions, or explanations for specific parts of a workflow, making it easier to understand complex processes.
Context 1.1 - annotation overview
Annotations can be classified into two types:
Custom Annotations
Created manually by users
Users have control over the contents
Summary Annotations
Generated by the software
Contents are predefined
Problem Space
Users Rely on Custom Annotations for Clarity
Summary annotations often lack sufficient detail to explain specific attributes or logic within the parameter dialog. Consequently, users must add custom annotations to provide more comprehensive explanations.
Problem 1.1 - users rely on custom annotations
Annotation Visibility
Annotations placed on the canvas remain visible permanently and can only be removed by deleting them.
Problem 1.2 - no visibility control for annotations
Reducing the Amount of Annotations Used in the Canvas
Following our hypothesis on the problem space, the team identified three potential solutions.
Dynamic Visibility
Allow users to toggle annotations between expanded and minimized states.
Annotation in Parameter Dialog
Allow users to embed notes within parameter editor dialogs, where they are defining logic, and making decisions that impact the outcomes.
New Functionality
Introduce advanced text editing capabilities, including image embedding, and customizable formatting options, to achieve a more versatile documentation tools.
Hearing What the Users Say
To the hypothesis and potential solutions, we conducted in-depth research on user needs and pain points by gathering feedback and comments from the FME community platform.
User input 1.1 - inline annotation & visbility controls.
Additionally, we noticed that users often tuck annotations into bookmarks so they can collapse them and keep the workspace neat. It’s a clever workaround to cut down on clutter, but it can still feel a bit clunky, visually cluttered and don't provide any context.
User input 1.2 - workarounds & their inadequacies.
Audit
First Step - Visibility Control Audit
I worked with the project manager to figure out where a 'collapsed' annotation could sit without getting in the way of other canvas elements. We found out, the right side of the object header was the only spot that made sense, since the left side is already reserved for alerts and warnings indicators.
Audit 1.1 - collapsed annotation icon location in canvas object
Finding the Perfect Fit
To make sure the new feature didn’t disrupt how people already worked, I reviewed the top 20 most-used parameter dialogs to spot a consistent UI pattern. Since every line and table row already had a dropdown, it felt natural to place the annotation option there.
Audit 1.2 - dropdown in dialogs
Shaping (Annotation Visibility)
Collapsed Annotation Indicator
We followed the same annotation icon used in the toolbar so users can easily recognize it and associate it with annotations, keeping the interface consistent and familiar
Right Click Menu
We explored the idea of utilizing a right-click menu to manage annotation visibility. This approach leverages a familiar interaction pattern, allowing users to quickly access additional options by right-clicking on the annotation icon or the annotated element itself.
Shaping 1.2 - right click menu
Hidden State
When annotations are hidden, they will reside under the annotation icon. This icon is interactive, allowing users to view all hidden annotations by clicking on it.
Shaping 1.3 - hidden state
Expand/Collapse Longer Annotation
Since summary annotations often get longer, especially when attached to a transformer with many parameters, we decided to implement a maximum size for summary annotations. When an annotation reaches this size, it will automatically collapse.
Shaping 1.4 - expand/collapse longer annotation
Side Window as Annotation Container
The side window would feature annotation boxes, each colored according to the object it is attached to, making it easier for users to visually associate annotations with their respective objects. This approach aims to enhance organization and accessibility, allowing users to manage and view all annotations in a centralized location.
Shaping 1.5 - annotation container
Shaping (Annotation in Parameter Dialog)
Creating Annotation
To create an annotation, the user can select the "add annotation" option from the dropdown menu. This action will open the annotation editor window, allowing the user to enter the contents of the annotation.
Shaping 2.1 - creating annotation
Viewing Annotation
A blue annotation icon will popped up beside the drop-down, informing a new annotation has been created. Hovering over the icon will display the contents of the annotation.
Shaping 2.2 - viewing annotation
Showing Annotation on Different Level
Annotations can appear at both group and canvas levels, with icons or formatted text indicating their presence, and are also shown in the navigator for quick access and improved usability.
Shaping 2.3 - annotation on group
Shaping 2.4 - annotation in canvas
Shaping 2.5 - annotation in navigator
Usability Testing
To evaluate our design and uncover pain points, we ran qualitative usability tests with four customer success team members experienced in FME Workbench. Using detailed test plans and an interactive prototype, we gathered feedback on usability and functionality. We also presented the user flow through storyboarding to ensure the whole team understood the experience. The response was positive, with no objections to the overall flow.
Usability testing 1.1 - internal test
Usability testing 1.2 - storyboarding
Iteration (Annotation Visibility)
Alternate Stacked Hidden Annotations Color
This design choice helps differentiate between multiple overlapping annotations while maintaining visual clarity. The alternating colors improve readability and organization, ensuring users can easily distinguish between different annotation entries.
Iteration 1.1 - alternate color
Toolbar as Right Click Menu Alternative
We added visibility controls to the toolbar as an alternative to the right-click menu, since it’s commonly used to modify canvas objects.
Iteration 1.2 - visibility control in toolbar
Iteration (Annotation in Parameter Dialog)
Truncate Tooltip
To ensure readability and prevent excessive size, the maximum tooltip width is set to 240px and the text length is limited to 100 words. This helps maintain a clean and manageable user interface.
Minor addition 1.1 - filled variants
A Happy Ending
The annotation in the parameter dialog has been released and is now available to users. However, the annotation visibility feature is on hold due to capacity constraints, though it has been prioritized for future development and remains on the Product Planning page.
Delivery 1.1 - happy ending
Retrospective
Collaboration and communication is key
Worked closely with project managers, developers, and designers from the start to keep the project aligned with its goals.
Always consider having backup ideas
Maintained a bank of ideas enabled the team to adapt efficiently to any changes in project direction and facilitated smoother negotiations with developers.