Formstack Workflows
Workflows is an advanced add-on to the Formstack platform that allows users to combine an intuitive Form Builder with advanced Workflow automation tools.
The problem we aimed to solve
Since the company’s founding, Formstack has been a data capture tool where a single form was filled out by a single person, thus creating a single submission record. We recognized, however, that most business processes happen with multiple people, many touchpoints, and not always through a linear and clean path to completion. Because of this, we aimed to reimagine how people fill out forms to allow for much more complex Workflow management to take place within the Formstack product.
Contribution
My role on this project was as Lead Designer of the cross functional engineering team tackling Workflows. We took this initiative all the way from concept and early customer discovery to a fully realized production-worthy solution. I oversaw all design and creative leadership for the team and much of the planning and organization to bring the product to market. During the past 3 years we have continued to improve and iterate upon the included functionality, regularly learning from our customers and creating improvements and additions that make their lives (and usage of the product) easier. Since it’s initial release, Workflows is Formstack’s highest revenue generated platform add-on.
| Methods Used | Project Resources |
|---|---|
| Survey Competitive analysis Usability testing Low to high fidelity design work Interactive prototyping Usability testing Iconography and spot graphic asset creation |
V1 Prototype V2 Prototype |
Phoenix Design System
Phoenix is Formstack’s product design system. It includes all UI components, UX patterns, and visual styles that are used throughout the Formstack platform of products including Forms, Documents, Sign, and Sync. It was designed and built using Sketch libraries with particular attention given to change management and increased alignment with engineering for a growing team of Product and UX Designers.
The Problem we aimed to solve:
Handoff of designs to engineering always presents some surprises. We wanted to create a system that could streamline that process and eliminate some of the questions and subtle differences we would see when new features shipped to production. We designed a standard set of reusable components and UI patterns that could be created using Sketch libraries and also built by the front-end engineers to ensure consistent and cohesive improvements were making their way into the product.
Contribution
For this project, I lead a team of product designers to reimagine Formstack’s user interface components and visual styles, creating them as symbols within the Sketch library framework, and putting into place a series of process checks and balances to ensure the design system is always kept up to date. We are currently working on standardizing usage guidelines and documentation for the growing team of designers at Formstack.
Rebranding Bedrock Data, Insuresign, and Webmerge
During 2019, Formstack acquired three companies and over the span of 4 months, I was responsible for rebranding each of them to match the Formstack product design system, Phoenix. As part of the rebrand, we also implemented a number of improvements that aligned with what Formstack customers have come to expect when it comes to usability and functionality.
The Problem we aimed to solve:
Ensure each acquired product matches Formstack’s look and feel, pulling in a shared service header to create consistent navigation from product to product. Perform an heuristic evaluation to identify opportunities to improve the usability of each acquired product to match customer expectations around usability and functionality.
Contribution
For each rebranded product, I was responsible for all product design work including taking an inventory, performing an heuristic evaluation , using devtools to adjust and document all color, typography, margin/padding, and stylistic changes necessary through CSS/HTML, and overseeing the development from a product management perspective.
Before
After
Before
After
Before
After
