A case study

GoFormz

The story

GoFormz equals Digital Transformation. Yes, it's a buzzword, but in this case it’s one that enterprise companies are using to save thousands of labor hours and millions in administrative costs.

At GoFormz, that means we aim to rip and replace any paper process with a digital solution available anywhere, coupled with automatic workflows, alerts and real-time reporting.

The first of three dominos

In the first phase I was charged with increasing the rate our new signups made it to “Stage 1”. This is when new users upload a form to use on our mobile forms apps. Once this got rolling, it expanded across our entire platform and into two more large-scale design phases laid out below.

Timeline: Early 2016 to 2017

My Contribution

I redesigned our web platform used by thousands of businesses in over 170 countries. The new experience boosted our onboarding metrics, first impressions and brand perception. The design language and patterns implemented here are being used to design several new critical features that are actively in development.

Over the past 18 months, I've helped strategize, document, QA, prototype and design a ton of new features for:

  • Enterprise web application
  • Marketing site redesign & development
  • iOS
  • Android
  • Windows 10

Creating consistency across a platform of this scale has been a difficult, yet rewarding challenge.

Research

Starting a User dialogue: The missing ingredient

One thing we’ve been light on at GoFormz is user development. We have a handful of massive clients that garner the majority of attention. I consulted with our engineering and support teams to address the multitude of dead-ends one by one.

Our account managers put me in touch with a variety of accounts at varying sizes who completed surveys about topics like:

  • Usability
  • Pain points
  • Wishlists for improvement

Real constraints

This was one of the most constrained projects I’ve been involved with from many angles. We had timeline limits, dev team availability to negotiate and technical hurdles replacing archaic web frameworks.

Tidying up a bit

I spent time truly understanding what was off limits, so we could leverage our bits of freedom as much as possible. I consolidated much of our primary and secondary navigation to provide more focus and eliminate redundancies.

Ideas & Concepts

Our app was very sterile and dated. It hadn’t seen much usability updates since it was launched a few years prior. We knew we wanted to weave in some personality and modernize our interfaces beyond the typical table-based enterprise software tools. Due to our constraints, we had to stick with most of our app organization and data structure.

I discovered that we were collecting several data points that had business value that we were never surfaced to our users. After negotiating all the known limitations, I began working through content and initial onboarding flows and finding ways to increase value, as well as usability.

Design Implementation

Phase one: Increasing new user form upload

We’ll keep the “before images” small, because - well – they’re not great.

The before images of our web application

Sketching out concepts

Early concept with video for welcome page Simple instructions and clear next steps for welcome page

It wasn't realistic for us to use video at this stage, especially since the UI was mid-redesign. So the second version was our clear path forward.

The new welcome mat

GoFormz new Welcome page inside the web app

Our primary goal here was to make it clear what a new user on the web should do. Secondary to this, if they didn’t have a form to upload handy, we gave them options to still demo our product and discover valuable features. Our final focus here was to make it clear that help was at the ready, and to insure that they had our mobile apps installed.

Forms Activity & Form Builder

New Forms and Form Builder interfaces

Forms Activity View (left)

The Forms page is where you interacted with forms you had access to as they were in-progress or completed. Think of this like an activity log. So a form status, tags and other meta information is critical, and now much more visible in our new layout. We also removed several redundant UI elements to reduce cognitive load.

Form or "Template" Editor (right)

Our Template Editor is where you create master versions of your forms that will be filled out on devices. Our hands were tied here in many ways, but with some basic layout principles, hierarchical adjustments and contrast updates, we were able to really lighten up the complexities of this interface. We were also able to reorder and regroup many of the tool groups for increased efficiencies as well.

Upgrading your plan

We have a plan for every sized business, so we needed to work on making it more clear which plan was right for your team. Our previous versions of this page were a standard features table, with dozens of redundant feature names that were very overwhelming to many users.

Plan options by feature

My proposal for this new subscriptions page focused on what you gain by increasing your plan tier, and removed the need to sift through tons of little checkmarks in a table

Phase 2: User Management

While our engineering team was waging war against old web frameworks, I turned my attention to a few new major features like User & Group management, SSO and a no-code workflow builder.

These were entirely new properties that had contractually bound timelines, so it was a hustle to say the least. Myself and our product team gathered as much input and documentation as possible to help our larger customers who needed these features to succeed. Our chosen RBAC user management model was well documented, so I focused on clarity and implementing a design language that could accommodate any org chart and any combinations of user or team level permissions.

Quick sketches to account for everything

Accounting for all the controls and info via sketching

Visual polish

New user and group RBAC management interface

Phase 3: Workflow Creation & Management

This project was nothing short of a beast! Being a totally new and custom built feature, we had little bandwidth for the user feedback iterative loop. Our product team had a challenging time wrapping their hands around this project and its documentation. I got my hands as dirty as possible understanding the end goals of users and the wide array of information a given integration may require. We had to have a bulletproof design framework to handle these varying scenarios.

Workflow IA diagram

Connecting and managing app integrations

Connecting a new integration Managing connected apps

Workflow Management

Workflows available Workflow job log Worflow error handling

Building workflows without code

We had to chunk this portion into bite-sized morsels. We’ve started by launching this next interface internally for our Pro Services team to create integrations rapidly for our customers. Our next version will be totally codeless with a clean UI for workflow creation and BPMN style logical flows.

Workflows available Workflow job log

Building BPMN-style nodes

Being able to create flows with logic and loops requires a fully flexible system of objects that can be placed at any point along a workflow. These are just a few of the documented states that are forthcoming workflow editor will offer.

Workflows get long and complicated

Stubbing out real-life longer use-cases

Worflow Task elements & states

Worflow error handling

Lessons Learned

There is no substitute for measurable data. This project was pressed for time from the outset and constraints were the most restrictive I’ve experienced in my career. In light of this, I feel we pushed forward tremendously valuable new features, but the absence of data to compare it to and iterate from is something I will avoid at any reasonable cost in the future.