Safe Software Internship

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 six 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 data from a diverse range of formats and systems. FME is particularly well-regarded for its use in spatial data conversion and manipulation.

‍

During the first four months of my internship, I worked on various tasks, but this case study will primarily focus on the annotation improvement project, as it occupied the largest portion of my time.

Annotation Overview

Annotations in FME Form are designed to enhance the clarity and organization of workflows by allowing users to add comments or notes directly within the interface. These annotations help provide context, instructions, or explanations for specific parts of a workflow, making it easier to understand complex processes. Users can customize their appearance, such as adjusting colors and labels, to improve readability.

Current State

Annotations are the primary means by which users document their workspaces, and communicate their decisions to clients and co-workers. However, users currently face limitations in annotating specific elements and adjusting the visibility of annotation in canvas, which leads to potential misunderstandings in complex workflows. So the team arrived at a conclusion that there's a need for more comprehensive and targeted documentation capabilities within the workspace, but this must be done without compromising the existing user experience. 
‍

Why is this Important ?

Enhanced Clarity and Communication
Users will achieve enhanced clarity in workflow documentation. This is crucial for accurate communication of decisions to clients and co-workers.

Improved Collaboration and Error Reduction
The project aims to facilitate better collaboration among users, especially in environments requiring teamwork. It will also significantly reduce errors in workflow interpretation, which is vital for maintaining quality and efficiency.

Reducing Workspace Clutter
Improving annotations is essential to reduce the number of annotation on the canvas, preventing workspace clutter. This allow user to navigate their workspace efficiently and maintain a clear, organized view of their workflow.

Streamlining workflow documentation for accurate communication and efficient teamwork.

Hearing What the User Say about Annotation in Parameter Dialog

Users currently lack the ability to directly annotate parameter editor dialogs, limiting their capacity to include context-specific notes and explanations that are visible only when the dialog is accessed. This restriction hinders the seamless documentation and understanding of specific parameter configurations directly within the workflow, necessitating external documentation for detailed process explanations. 
‍

" It would be great if there was the ability to add annotations for each line in an AttributeCreator/AttributeManager. Either as an additional description column or within the Text/Arithmetic editor as commented out text.

" When you open a transformer parameters dialog you can right-click on it and choose Attach Annotation. Such annotation could work the same way as on the canvas, except that it only appears when the parameters dialog is open.

" In complex condition statements it is hard to annotate. The annotations outside the transformer get messy. Especially if you have an attributeManager with a lot of conditional values. Inline annotations would help so much, like a simple column (e.g. in testFilter the portnames) for some small comments. "

"I'd like to suggest the ability to add a note/annotation within the AttributeManager (or AttributeCreator) conditional definitions, by If-statement line. This could be super helpful when testing for multiple conditions. . sometimes I lose track of what I'm testing for if the condition is complex. "

Workarounds and Their Inadequacies

One interesting behaviour that the user typically do is placing annotations within a bookmark, which allow them to collapse the annotations for better organization and to avoid clutter in the workspace. Although this method helps manage the visibility of annotations and keeps the interface clean and navigable, it can be inefficient, visually cluttered, and not context specific.
‍

Breaking the Project into Different Phases

Following an analysis of user behavior and feedback on the current annotation experience, we identified three potential solutions. Each was broken down to address specific issues, ensuring they could independently resolve distinct pain points without negatively impacting user experience. All these potential solutions share the common goal of reducing the amount of annotations cluttering the canvas.

Given the team's timeframe and capacity, we prioritized implementing annotations in the parameter dialog and deferred the development of annotation visibility adjustments to a later release.
‍

Audit - Utilizing the Dropdowns

To ensure that the new functionality aligns with existing user workflows and enhances overall usability, the team decided to do an audit on the top 20 parameter dialogs. The goal was to identify a consistent UI pattern where the "annotation option" could be seamlessly integrated. This involved analyzing each dialog's layout, user interactions, and common design elements to find the most intuitive and efficient placement for the annotation feature.
‍

Shaping!

After discussing the audit results with the project manager and development team, the team began exploring the idea of adding the annotation option to the dropdown menu and methods for displaying, editing, and deleting annotations. With each iteration, I continuously sought feedback from team leads to ensure that the final result satisfied all parties and fit within the project timeline.
‍

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. A blue annotation icon will popped up beside the drop-down, informing a new annotation has been created.
‍

Viewing Annotation

A blue annotation icon will popped up beside the drop-down, informing a new annotation has been created.

‍

Editing Annotation

I proposed two methods for editing annotations. The first method is by clicking the same drop-down used to create annotation. The second method involves clicking on the annotation icon, which functions like a dropdown. After defining the pros and cons, the team decided to go with the first option.

‍

Pros

Annotation related actions (creation/edit) will be consistently shown in the same place.

Cons

The affordance to click on the annotation icon might not be clear for the first time user.

Pros

- The dropdown contains the annotation specific actions to a separate menu.
- The menu chevron makes it more clear that the annotation icon is interactive.

Cons

- Adds another step to open and delete annotation.
- The creation of annotation is accessed through a separate menu than the editing of annotation.

Removing Annotation

Removing an annotation can be done by selecting the "delete annotation" option from the dropdown menu or by clicking the delete option within the text editor window. When the delete option is clicked, a warning prompt will appear to confirm the action, as undoing the deletion with Ctrl + Z is not possible in the parameter dialog.
‍

Showing Annotation on Different Level

Annotations can be displayed at different levels, such as the group/section level and the canvas level. At the group level, an annotation icon with a red indicator signals that there are annotations within a collapsible group. Meanwhile, at the canvas level, annotations are presented with italicized text and indentation within a summary annotation.
‍

Annotation in Navigator

Annotations within the parameter dialog are displayed in the navigator to provide users with easy access. This allows users to access annotations directly from the navigation pane, enhancing overall usability and efficiency.

‍

Refining the Ideas

The team initiated an additional iteration phase to address potential accessibility issues before developers proceed with full implementation in the next version.
‍

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.

‍

Warning Message When Removing Annotation

After consulting with the developer, we discovered that using Ctrl + Z to undo annotation deletions is not feasible in the parameter dialog. To prevent accidental deletions, a confirmation prompt will now appear before completing the action.

‍

P4: Delivery & Phase A Kickoff

With the concept of annotations in the parameter dialog fully defined, we presented it to the product leads and the company's founder and received excellent feedback. This feature is now gradually being released into the beta version of the software and can be used by actual users!

While Phase B was under development, the design team began exploring ideas for the Phase A (Annotation Visibility). Although this phase won't be implemented into the software in the next couple of release due to the dev team's current workload, the team believes there is value to fully define these ideas now.
‍

Hearing What the User Say about Annotation Visibility

Persistent visibility of annotations, especially in detailed and complex workflows, results in workspace clutter. This can obscure important data and disrupt workflow efficiency. The issue is compounded in nested scenarios, where multiple annotations need to be managed without overcrowding the workspace.
‍

“ I would be keen for a "Annotation Default" in workbench options that would control whether annotation was on/off by default when opening a workbench (defaulted to on of course). I would just like to open workbenches and see a clean bookmarked interface, which I could quickly turn on annotation if I needed too. ”

“ From FME2018.0 it is possible to collapse bookmarks. Maybe it is an idea as well to collapse annotations into an icon. This would be extremely helpful! Especially when workspaces start to get large. Being able to click on a transformer and pop out an annotation.....yes please.... ”

“ Another option could be to make annotations collapsible. This would help clear up some of the messy mapping but you could still have a 'large' description handy without taking up real estate. - I saw this was another suggestion. ”

Defining the Scope for MVP

In FME Form, multiple annotation types are available. Although the long-term goal is to enable visibility controls for all annotation types, the team has chosen to prioritize attached annotations, as they are the most frequently used. The primary focus will be on implementing visual cues and standard interactions, such as toggling visibility, hover effects, and deletion options for annotations.
‍

Ideation

Before we began exploring different ideas, the project manager developed a set of questions to guide us through the ideation process. Here are the questions:
‍
1. Placement: Where should the visibility option be placed for optimal user accessibility?
2. Design Cues: What design cues can we use to ensure this new feature provides clear affordance to users?
3. Terminology: Which terminologies will be easily understood by our users?
‍
With a clear understanding of the context and these guiding questions, we decided to progressively explore various ideas.
‍

Right Click Menu

One of the ideas we explored was 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. Showing option is placed in the right-click menu as well.
‍

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.

‍

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. Users will have the option to expand or collapse these annotations as needed, ensuring a clean and manageable interface.
‍

Side Window as Annotations Container

We explored the idea of having a side window that functions as a container for all annotations. This 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.
‍

Presenting the Ideas

Once the ideas were fully defined, we decided to present them using a storyboard. This approach was unconventional for the dev team, as the design team typically only shows mockups for proposed ideas. The purpose of using a storyboard was to visualize how users would interact with the feature, providing a clearer and more comprehensive understanding of the user flow.
‍

Iteration

The feedback from the storyboard was very positive; however, the team decided to defer some ideas due to feasibility concerns, such as the side window. Given the nature of how FME is built, creating pixel-perfect designs that deviate from the typical Windows UI template can be challenging. Despite the potential value of these ideas, the team agreed to defer them for now unless user feedback indicates a strong need for implementation. Additionally, the team decided to revise the remaining ideas to ensure they are clearer for the developers to implement and provide better visual cues for the users.

Visual Cues & Revised Terminology

Initially, the visibility option was placed under the right-click menu. However, the team felt that this might not be directly identifiable by users. To address this, we decided to add an icon to the canvas toolbar representing the visibility option, which users can access when they select an annotation. Additionally, we changed the terminology to pin/unpin because the "eye icon" typically used for hide/show options is reserved for feature caching. This adjustment ensures that the visibility option is more intuitive and accessible for users.

‍

  • Pinned State: When the annotations persist in canvas
  • Unpinned State: When the annotations are collapsed to the annotation icon

Alternate Stacked Unpinned Annotations Color

One of the ideas we explored was 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.
‍

User Testing

To evaluate our design and identify any major pain points, we conducted qualitative usability testing with four internal users from the customer success team, all of whom have advanced knowledge of the FME Workbench. We developed a comprehensive set of test plans and created an interactive prototype that covered all possible interactions. This approach allowed us to gather detailed feedback on the usability and functionality of the new features, ensuring that we could address any issues before final implementation.
‍

Wrapping Up!

During user testing, there were no major issues. All participants successfully completed 95% of the tasks and recognized the value and benefits the new features could deliver to users. While the implementation won't happen immediately due to current capacity constraints, the team agreed to prioritize it when resources become available. For now, the idea happily resides in the Product Planning page, eagerly awaiting its turn to shine!
‍

Other Work

YU-Access

Product Design