THE PROBLEM

Recurring internal workflows are often complex, involving dozens of individual tasks, spread across various teams, with subtasks dependent on upstream tasks to be completed first.

Workflow Dashboard was developed to create instances of recurring workflows, and track their live progress by showing which tasks were complete, in flight, or ready to be picked up.

A new instance of a recurring workflow, however, could not be generated for tracking without first building the workflow template that defined each of its recurring tasks.

To build a viable workflow template, template builders needed to collaborate closely with subject matter experts from the teams involved in the workflow to ensure that tasks were sequenced correctly and all dependencies were clearly defined.

Without an efficient method of building new workflow templates, the number of new workflows waiting to be added into the system would continue to outpace the ones being built.

My role

As UX architect and designer, I was tasked with improving the experience of template builders, from discovery research through final designs.

By working closely with the product owner, product manager, and tech leads, we were to collaborate on a solution that would meet user needs while staying within the development team’s bandwidth limits.

User RESEARCH

After speaking with a short list of template builders to better understand their needs and pain points, I observed several working sessions in which the builder would moderate subject matter experts on a workflow to finalize its template. In each session, the template builder used a spreadsheet as the main reference, along with a static visual flowchart of the current workflow, for annotation of change requests made by the group.

Those sessions revealed a common problem: although participants could easily follow the static visual workflows at first, they would get lost in the complexity of the annotations that would cover it up in a flurry.

It became clear that template builders needed a way to make change requests quickly, and to then show participants the updates in the same visual format, in real time, so that the groups could confidently assess the validity of the changes.

Design exploration

For representing workflow templates visually, the existing framework of boxes representing tasks, with contained blocks of tasks representing related task groups, was logical and could be leveraged. What needed a new design was a quick and intuitive way to edit the flow of those task boxes.

Through competitive analysis, I identified commonly used interaction patterns for building flows visually, and incorporated them into early design explorations.

Pivoting

A fully visual approach to editing a workflow template was presented to stakeholders for feedback and, although it was agreed that the approach checked the right boxes for usability, the engineering effort couldn’t be justified for a feature with a limited user base.

My next set of iterations would need to leverage existing patterns and components for easier development, without compromising the goal of enabling quick changes directly onto the visual workflow for real-time previewing.

After conducting some hallway testing of the latest iteration to uncover any glaring issues, I then presented it to stakeholders for review.

Design validation & handoff

With the new design direction approved by stakeholders and engineering, I created a prototype for usability testing, and received overwhelmingly positive feedback from the small group of template builders who would be utilizing the feature.

Finally, high fidelity screens were then mocked up and handed off to development, with annotations for implementation.

UX outcomes

We saw significant productivity and efficiency improvements for users:

• Increased number of templates built per week

  • Old UX: 1 template built every two weeks

  • New UX: 2-3 templates built per week 

• Better clarity for session participants

  • Participants could understand updates better visually, versus having to imagine the various ramifications of the updates as annotations on a static image

• Reduced number of template building sessions

  • Participants could confidently confirm that their requested changes worked, in real time, versus waiting to see updates to the visual format in a followup meeting

project takeaway

A key takeaway from the project was a reminder that while “blue sky” solutions for optimizing a user’s experience are valuable, they must sometimes be balanced with more practical, lower-effort solutions that fit a project’s scope.