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
What is annotation in FME Form.
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.
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
Context 1.1 - annotation overview
Problem space
Lack of customizability & details.
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
No visibility controls.
Annotations placed on the canvas remain visible permanently and can only be removed by deleting them.
Problem 1.2 - no visibility control for annotations
POTENTIAL SOLUTIONS
Creating a more comprehensive annotations.
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.
user study
What the FME Community told us.
To refine our hypothesis and potential solutions, we conducted in-depth research on user needs and pain points through feedback from the FME Community platform, where users expressed a strong desire for annotations to be collapsible and to also exist within the parameter dialog to keep important notes visible at the point of configuration.
User input 1.1 - inline annotation & visibility controls
Using bookmarks to tuck annotation 😭
We also interviewed some users that 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.
Users' workaround 1.1 - using bookmarks
proeject kickoff - Audit
Finding the right home for collapsed annotations indicator.
We audited the current canvas object layout to determine where a collapsed annotation could sit without interfering with other elements. We identified the right side of the object header as the only viable location, since the left side is already dedicated to alert and warning indicators.
Audit 1.1 - collapsed annotation icon location in canvas object
Intuitive placement within parameter workflows.
To ensure annotations in parameter dialogs felt natural and didn’t disrupt existing workflows, we placed the annotation option within the existing dropdown area, where users can define parameter logic and adjust parameter properties.
Audit 1.2 - dropdown in dialogs
Shaping annotation visibility controls
Icon 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.
Shaping 1.1 - icon indicator
Right click menu as access point.
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
Adding in-line 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 the 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 a 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
Getting buy-ins
Design evaluation & stakeholder feedback.
To evaluate our design and uncover potential pain points, we used storyboarding to walk PMs and engineers through the proposed flow and interactions, which helped us in gathering feedback& opportunities to improve the overall flow or design.
Getting buy-ins 1.1 - storyboarding & interactive prototypes
Iteration - aNNOTATION VISIBILITY CONTROLS
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.1 - visibility control in toolbar
Iteration - aNNOTATION IN PARAMETER DIALOG
Setting maximum width & text length.
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.
Iteration 1.2 - filled variants
USABILITY TESTING
Final leg!
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.
Usability testing 1.1 - internal test
Participants completed 96% of the required tasks and indicated that the feature would provide meaningful value by improving users’ workflow.
IMPLEMENTATION
What made It to release and what didn’t.
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
What I learned.
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.