Case Study: Workflows
Improving the usability of an automation tool
Overview
Workflows is an automation tool, that allows users to create flows that can generate tasks, and complete process without the user having to manage it every step of the way. It was designed to work along side Forms, Code Engine, and Task Center. (These are projects that I worked on separate from workflows and you can see elsewhere in my portfolio.)
Unlike the projects mentioned above, I inherited the initial designs from another designer. My job was to pick up where he left off and support additional fictionality that was being added in.
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 piled onto the product. There had been so much functionality added over time, there was an extremely high barrier of entry for beginner users.
Parameters and Variables
Finding room for improvement
As I continued working to improve the product, I began recognizing design element 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 them to my dev team. They too saw the need for better usability and were supportive of the changes. Excited, I moved forward and began developing my design mocks in more detail.
Old design vs new design
Design changes: the detail panel (1/3)
Working with one lead developer, we decided to split the changes into three epics that would be accomplished over the space of several developer sprints.
The first of these epics was a face lift. This included re-designing how the steps were shown on the canvas, new detail panels for each shape, and updating the interface to the current UX design system. For the detail panel this meant new titled, collapsable sections, assessing what functions where advanced and which were required, and establishing a better hierarchy so the user’s tasks was easier to interpret. This also bleed into smaller changes such as changing the layout to a full screen experience, intruding prompt text onto the canvas, and minimizing overly technical language.
Configuring an email
Configuring a task for Task Center
Configuring conditional logic
Design changes: the Action Menu (2/3)
The second epic was a new 'action menu'. This was a new design to show all of the available Workflow steps in one place rather than different areas of the product. This provided an easy way for users to see what Workflows could do for them. This required re-organization and categorization of Workflow steps, but was also able to accommodate a new feature of 'external automations'. Some of these changes effected existing functionality in unexpected ways. I tried my best to recognize effected features and keep re-design to a minimum. Some of the feature effected included how users connect orphaned steps or move connecting lines. Diving into such detail also made me aware of certain limitations some of the steps had, and I was able to enhance functionality on steps such as conditional branches and timer events.
Action Menu
Design changes: Help content (3/3)
The final, third epic was for developing help content. We had existing documentation, but it required users to leave the product. We wanted to provide easy overview and set up information in context of the Workflow builder, in order to make it easier and less intimidating for users. After spending so much time in the product I felt comfortable leading this effort even though it was outside of my regular responsibilities. With some revisions from the product developers, I helped write the content for basic workflow shapes, as well as an introduction to workflows, and help content on parameters, variables, and more.
Help content mocks
Closing Summary
Throughout this process, I grew quite attached to Workflows. The improvements we made not only improved workflows presentability, but it also enhanced it’s usability for advanced and beginner users alike. I enjoyed being able to get to know such a powerful tool, and loved being a part of the amazing team that developed it.
Connecting shapes and validation
