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 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 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.

‍

Role

UX Design Intern

Team Size

4 members

Timeline

March - May 2024

‍

Context

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.

Types of Annotation

Annotations attached to canvas objects can be classified into two types:
‍
1. Custom Annotations: Created manually by users to explain or highlight specific event or role that the canvas object is doing.
2. Summary Annotations: Generated by the system or software to convey predefined attributes.

Problem Space

Limitations of Summary Annotation

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.
‍

Limitation in Adjusting Annotation Visibility

Users currently face limitation in adjusting the visibility of annotation in canvas, which leads to clutter and disorganization, particularly in complex workflows. Annotations placed on the canvas remain visible permanently and can only be removed by deleting them.
‍

Different Stages of Development

Breaking the Project into Different Phases

Following our hypothesis on the problem space, we identified three potential solutions. Each was broken down to address specific issues, ensuring they could reduce 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.
‍

Phase B Kickoff (User Research)

Hearing What the Users Say

To validate our hypothesis and solutions, we conducted in-depth research on user needs and pain points by gathering feedback and comments from the FME community.
‍

" 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. "

Provide a solution that allows users to add in-line annotations directly within the parameter dialog.

Phase B Audit

Audit - Utilizing the Dropdowns

To ensure that the new functionality doesn't disrupt existing user workflows, the team decided to do an audit on the top 20 most-used 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, common user interactions, and common design elements.
‍

Phase B Ideation

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.
‍

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.

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.

‍

Phase B Iteration

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.

‍

Phase B Retrospective

Phase B Delivery

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!
‍

Phase A Kick Off

Phase A!

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.
‍

Phase A User Research

Hearing What the User Say about Annotation Visibility

Having annotations constantly visible, especially in detailed and complex workflows, can lead to a cluttered workspace. This not only makes it harder to focus on important things in the workflow but also disrupts the overall efficiency.
‍
‍

“ 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. ”

Phase A Discovery

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.
‍

Phase A Project Scope

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.

As annotations attached to bookmarks were not frequently used by users, the team decided to defer their implementation to a later development phase.
‍

Phase A Audit

Audit - Collapsed Annotation Location

Before brainstorming ideas, we collaborated with the project manager to audit attached annotations. The goal was to identify potential positions for the "collapsed" annotation that would work with all canvas objects. We concluded that the only viable position is on the right side of the canvas object header, as the left side is reserved for higher-priority alerts and warning signs.
‍

Phase A Ideation

Ideation

With the position finalized, we began gathering ideas and defining the interactions we wanted users to be able to perform.

The Icon

For the icons of the collapsed annotation, we decided to follow the same annotation icon used in the parameter dialog. This way, the user would recognize the icon and associate it with annotations, ensuring consistency and familiarity across the interface.
‍

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.
‍

Phase A Storyboarding

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.
‍

Phase A Iteration

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.

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

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.
‍

Phase A User Testing

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.
‍

Phase A User Testing Result

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!
‍

Project Retrospective

A Happy Ending

The annotation in dialog feature eventually got released and received positive feedback from users. Although my internship ended shortly after its release, I’m quite satisfied and happy with the impact it made and the role I played in its development.
‍

Project Retrospective

What I Learned

1

Collaboration and communication is key

Collaborated closely with project managers, developers, and designers to ensure alignment with the project goals from the early stage of development.

2

Always value and consider more ideas

Maintained a bank of ideas enabled the team to adapt efficiently to any changes in project direction and facilitated smoother negotiations with developers.

3

Sense of accomplishment

Developed pride and satisfaction in being actively involved in a project through from ideation to release, and gained positive feedback from the users.

Other Work

YU-Access

Product Design