
Workflows
Improving the usability of an automation tool
Overview
Workflows is an automation tool, that allows users to build flows that generate tasks and
complete processes automatically without user intervention. It was designed to integrate
with Forms, Code Engine, and Task Center.
Unlike the projects mentioned above, this product already existed when I joined the team. My
role was to pick up where my predecessor had left off, and provide ongoing support for
further product development.
Year:
2023
My Role
Throughout the project, I suggested design changes to improve the usability and presentation
of Workflows. I also worked to re-align Workflows with design patterns and established UI
styles. Starting off, I worked closely with dev leads and design team members to
learn more about the history of the product and how to use it. From there, I suggested
design revision for over 8 task detail panels including user task, email task, timer events,
conditional logic steps, and start and end steps. I also designed and prototyped new
navigation, and for features including connecting orphaned shapes, and adding new shapes to
the canvas.
Throughout my time on this product I’ve also designed and prototyped for validation, and
test run processes. I also designed improvements for the template library, workflow
triggers, and workflow versioning.
The following documentation focuses on the re-design of the detail panel, improvements to the navigation, and creation of in-product help content.
Becoming familiar with the product
Designing a validation process was the first thing I worked on. This allowed me to start
becoming familiar with the product and the technicalities required for successful
validation. It required that I begin to understand input and output parameters, variables,
mapping and concepts like code packages and functions.
Designing a validation mode for workflows also made me aware of the many bandaid solutions
that had been applieed to the product. There had been so much functionality added over time,
there was a very high learning curve required for beginner users.

Finding room for improvement
As I continued working to improve the product, I began recognizing design pattern
inconsistencies. The organization and presentation of information was also often confusing
and certain functionality that you’d expect to behave similarly, actually behaved very
differently. It was also full of advanced features and technical language that was
intimidating for users trying to put together simple flows.
In my spare time, I began compiling mocks for improvements that I felt would better the user
experience. I reviewed these plans with my manager and other designers, who were also aware
of the need for improvements. Once development time freed up, I presented the concepts to my
dev team. They also reconginzed the need for better usability and were ready to implement
some of the proposed changed. From there, I began designing my mocks in more detail to
prepare for development.


The Detail Panel
Working with the dev lead, we decided to split the changes into three sections that would be
accomplished over the space of several months.
The first of these section was improving the product visually. This included
re-designing how the steps were shown on the canvas, new detail panels for each shape, and
updating the interface to use the most current UX design system. For the detail panel this
meant new collapsable sections, indicating what features of each shape were advanced and
which were required, and establishing a better hierarchy. This also included converting the
interface to a full screen experience, introducing prompt text in the canvas, and minimizing
overly technical language.
Configuring general action



Configuring a task for Task Center


Configuring conditional logic


The Action Menu
The second section was designing a new way to pull shapes onto the canvas. Previously, users
had to go to different areas of the product to access different options. My designs proposed
what we called an ‘action menu’, which provided an easy way for users to see what features
Workflows had, all in one place.
This re-design required re-organization of Workflow steps into 5 main categories: basic
actions, user tasks, custom automations, Domo automations, and external automations. I would
later suggest a further simplification once AI tools and Agents were added to the list.
Some of these changes also affected existing functionality in unexpected ways.
Features affected included connecting orphaned steps, conditional branch logic, and timer
events.





Help content
The third and final section of the re-design project was to develop help content. We had existing documentation, but it required users to leave the product entirely. I wanted to provide short, summaries of this information within the context of the Workflow builder to make it more approachable for beginner users. After spending so much time speaking to the developers and learning about the product, I felt comfortable drafting and suggesting some of this help content. Working with the developers for clarity and technical correctness, I drafted help content for each basic workflow shapes, as well as help information on what parameters and variables are and how to use them.


Conclusion
Having completed this initial re-design of Workflows, I’m keenly aware of how far there is still to go. Pushing for this re-design, however, helped a little used product gain popularity internally as well as externally. The improvements made not only improved Workflow's visual presentation, but it also enhanced it’s usability through improved navigation, consistent design patterns, and contextual help content. Workflows now has increased product support, and we are that much closer to making an intuitive, competitive product. I’m glad I took the initiative, and the opportunity, to dig in and make some real improvements.