Workflows 2.0

01. Overview

What is Anvil?

Anvil’s mission is to accelerate existing business processes from paper-first to data-first. With a suite of APIs and no-code tools, engineering and business teams are able to automate their PDF processes across industries.

What is a Workflow?

Workflows turn PDFs into custom, logic-driven webforms via a no code builder. With Workflows, anyone can build custom software that works for their specific processes. enabling operations teams to scale with technology, not more people.

What are Workflows?

Workflows turn PDFs into custom, logic-driven webforms via a no code builder. With Workflows, anyone can build custom software that works for their specific processes. enabling operations teams to scale with technology, not more people.

Increase conversion of Workflow creation to publish

Before, Users have struggled to build Workflows for themselves. Instead, hours of professional services are necessary to set up Workflows for them. The goal of this project was twofold. One, to decrease the manual time required to onboard new users. And two, to increase the conversion from 'creation' to 'publish' for a more scalable business practice.

Increase Workflow creation to publish

Before, Users have struggled to build Workflows for themselves. Instead, hours of professional services are necessary to set up Workflows for them. The goal of this project was twofold. One, to decrease the manual time required to onboard new users. And two, to increase the conversion from 'creation' to 'publish' for a more scalable business practice.

Increase creation to publish

Before, Users have struggled to build Workflows for themselves. Instead, hours of professional services are necessary to set up Workflows for them. The goal of this project was twofold. One, to decrease the manual time required to onboard new users. And two, to increase the conversion from 'creation' to 'publish' for a more scalable business practice.

Increase onboarding

Before, Users have struggled to build Workflows for themselves. Instead, hours of professional services are necessary to set up Workflows for them. The goal of this project was twofold. One, to decrease the manual time required to onboard new users. And two, to increase the conversion from 'creation' to 'publish' for a more scalable business practice.

02. Research

Pinpointing the pain points

I lead recruiting, planning, facilitation, and synthesis of ten initial discovery inquiries. The interviewees were current users who could speak to their current frustrations.

In addition, several shadowing sessions of customer support calls highlighted user pain points.

Later usability tests were done with the initial group of Anvil users and additional non-users.

All interviews were synthesized to look for common patterns across the user journey.

"

The Remembering where to start is the biggest issue. It was a mess & I was very confused. It's tedious and took a ton of clicks to get anything done. Once it's set up, it works well, it just didn't match my mental model, so I had to relearn.

"

The Remembering where to start is the biggest issue. It was a mess & I was very confused. It's tedious and took a ton of clicks to get anything done. Once it's set up, it works well, it just didn't match my mental model, so I had to relearn.

" The Remembering where to start is the biggest issue. It was a mess & I was very confused. It's tedious and took a ton of clicks to get anything done. Once it's set up, it works well, it just didn't match my mental model, so I had to relearn.

"

I have to go to loads of places in order to figure out what to do. There is no repository for all this stuff.

03. Anna, the Operational Problem Solver

"

Not having to rely on engineering resources is huge. I know the business process better anyway, so I’m constantly looking to improve the process for myself.

"

What motivates me is what I can do with data to impact a population and make a change.

About

Anna is used to creating efficiencies without additional resources. She is “in the weeds” but strategic enough to know there is a business case to be made in automating that work. She has a good working relationship with the product team in order to advocate for her team and its needs.

Responsibilities

Design and manage the process and operational integrity of client services
Provide guidance on technical and managerial operations.
Sets objectives for technical operations and implements action plans.
Uses tools like: Zapier, Typeform, Google, Asana, project management and low code automation

Painpoints

Relying on engineering teams to build custom tools to help her team
Bootstrapping together multiple low-code solutions to get to a solution faster
Getting crushed with manual processes
Technology creating more complications, like overhead to maintain

Building a Workflow Today

Expectation

Assumption: Anna is thinking about her PDF first, since that is what she already has. She will move linearly through a stepped builder, never needing to go backward.

Reality

Validated: Anna is thinking first about what her user will input and her PDF is a secondary thought. But because the two are so deeply linked, she toggles back and forth between the steps of the builder to ensure that what she has set up reflects properly on both artifacts.

Pain Points

Linear UI for a cyclical process

“I've gotten stuck in that loop before like, why the EFF Can I add a signer right now it's like, Oh, I got to go back and add an email."

Input over output mindset

“I Absolutelyalways go to edit webform first. I don't think about the PDF at all."

Scattered, hidden everything

“I don't actually know how to access any of this stuff today. I think you like literally have to write JSON to do.

Lack of first time experience

“It was kind of a mess to start with. I was very confused. If I were asked to build a new workflow, I wouldn’t feel good about it."

Opportunities

How might we support an iterative, cyclical building process?

How might we support a webform first mental model?

How might we streamline tools for less clicks and more discoverability?

How might we better support users new to workflows?

Future Mental Model

Anna’s mental model is supported by a single editing state that allows for side-by-side referencing of both the webform and PDF. All features are discoverable and cater to her iterative process.

04. Design Process

Exploration

Based off of research insights It was clear that this redesign was not a matter of defining user tasks. It was a question of how fit the existing pieces of the Workflow editor together to better complete those tasks.

Concept

Very quickly the idea of a side-by-side webform and PDF view became a clear vehicle for communicating that the two artefacts are inextricably linked.   From there it was a matter of moving the rest of the pieces to fit into this new navigational structure.

"

It's helpful for understanding
that these two things are connected
and what their connection is.

" It's helpful for understanding
that these two things are connected
and what their connection is.

"

I have to go to loads of places in order to figure out what to do. There is no repository for all this stuff.

Iteration • Navigation

Because there are multiple layers of relationships and editing states to communicate, finding a navigation hierarchy that could turn this idea from concept to functional prototype took several stabs.

The guiding principle became reinforcing the ability to see both the webform and PDF together in one view. From there it was a matter of layering in the other navigational needs

The winner via user testing was to keep the focus on one side-by-side step, with a clear CTA. Futher iteraations would be made to add emphasis to the secondary pagination per user feedback.

Iteration • Interactions

The side-by-side concept relied heavily on interaction, movement, and progressive disclosure to reinforce the ideas that these two artifacts, each requiring editing, are different sides of the same coin. By exploring highlighting, transitions, and foreshadowing in prototypes, it be came possible to test with users and communicate with engineering what the vision for this new experience would be.

By exploring highlighting, transitions, and foreshadowing in prototypes, it be came possible to test with users and communicate with engineering what the vision for this new experience would be.

Use materiality to define editable areas

The most successful navigation interaction was a sliding tab to keep users oriented in the space as it moves

Highlighting the related selections from one half to the other is just one layer of interaction reinforcing their connection. Users wanted even more.

The ability to preview a build needed more differentiation from the rest of the editing capabilities to demonstrate that the user is in a new state in which they can see a real time preview

Iteration • Settings

The issue with Workflow settings in the past had been that they were scattered about the tool before, during, and after building the actual workflow.

Common cases of users needing professional services help were to locate and understand these settings options, which even internal users had a tough time keeping track of.

Simplifying and consolidating settings based off of current user behavior and bringing them all into a single step in workflow editing experience brings first and foremost discoverability to these powerful and useful tools.

Validate and Refine

A one week study with 5 participants of two iterations of prototypes helped finalize this initial concepts into viable, engineering ready design.

The primary takeaway from this round of testing was that the overall hierarchy and structure were good, but there were missing layers of additional information, communication, and streamlining that were needed to make this a stand alone productive use tool.

Visualize logic and connections

“Visualizing logic jumps. once you add logic you, it's it's hard to know what you have logic on and what you don't have logic on.“

Add additional layers of help

“If I'm new, I don't actually understand that my signer needs to have an email, even if my PDF doesn’t ask for it.”

Account for scalability

“There could be 30 pages - that’s a lot of scrolling when I really don't care about the document, I care about the fields.”

Overhaul selection states and warnings

“Sometimes things disconnect. Unless we are looking into each one of those manually, we can't really know in time. If something has been disconnected, we need to have some kind of alarm message or something.”

Prioritization

One of the most complicated pieces of this project was breaking it up into a roadmap.  As project that refactored dozens of already existing features, it took over 2,000 figma frames of specs to detail out all the changes it would take to fully address all the painpoints in current tool.  

That amount of work was never going to be done in one launch. It took a critical eye and engineering input formulate a plan that would bring a MVP to market in 5 months. The guiding light became keeping par with the current tool set and deprioritizing anything net new.

05. Outcome

Now Anna, the operational problem solver, can turn her complex PDF into a simple online Workflow without any hours of professional services.

Facilitate iteration

Webform first

Discoverability

Discover-ability

Onboaring help

Onboarig help

01.

Anna is guided through the Workflow builder

Anna is set up for success with a complete first time use experience, tutorials, and an entirely new help center to orient and guide her on her way.

02.

Anna can focus on her user's experience

When she uploads her complex PDF, she sees that a webform has already been generated based off of her document, which is her primary concern since this is what her clients will interact with.

03.

Anna understands the connection between the webform and PDF, instantly.

Anna toggles back and forth seamlessly between the Webform and PDF to edit both, understanding all the while how the two are connected.

04.

Anna understands what work she has already done, and what needs her attention

She can tell, at a glance, what pieces are missing or unconnected, helping her problem solve and complete her Workflow in one go.

05.

Anna has full control over her Workflow's settings before publishing it

Once she is confident with her workflow, she continues to settings to see all of the possibilities available to her in one place.

In a fraction of the time and clicks, Anna is able to build a Workflow from scratch and begin collecting information from her clients with the confidence that their experience will be up to her standard and that the data they provide will properly populate her original PDF.

06. Results

↑ User satisfaction
↓ Hours to onboard

Most importantly, the new Workflow builder achieved its goal of increasing user satisfaction with the product while driving down the number or hours (including professional services time) to onboard, as indicated by an increased conversion of workflow creation to workflow publish. Though the exact metric impact is fuzzy due to no baseline measurement by which to compare, the trend continues in a positive direction.

06. Results

↑ User satisfaction
 ↓ Hours to onboard

Most importantly, the new Workflow builder achieved its goal of increasing user satisfaction with the product while driving down the number or hours (including professional services time) to onboard, as indicated by an increased conversion of workflow creation to workflow publish. Though the exact metric impact is fuzzy due to no baseline measurement by which to compare, the trend continues in a positive diretion.

Product of the day on Product Hunt

The new Workflow builder launched on September 24, 2021 in time for the Saastr 2021 conference. It premiered as the #1 product on Product Hunt that day with a performance strong enough to qualify it for their annual Golden Kitty Awards ballot in the saas category.

New components to grow Anvil's design system

A new set of components and refinements to make the design system more flexible and extensible. One example of this being the pagination pill - the pill treatment differentiates it from other action type buttons to help communicate that this is a middle layer navigation element.

Home