Designing a web app to fill PDF contracts & forms

Working as a freelance designer for Fill.io, this project was all about PDF forms. Originating as Bull Forms, I was contacted to pivot the the design of the product based on the user research that was gathered, it also turned into a re-branding opportunity as well.

Visit Website
Company

Fill.io

Role

Freelance UI/UX Designer & Brand Designer

Team

CEO, Head of Growth, Developers

Devilerables

Brand & Product Strategy, Wireframing, Low Fidelity Prototypes, UI Design, Web Design

Part of the project was to create a complete brand ecosystem, so if users were to land on a form from a search engine it would be immediately apparent how to use the product.
Users have access to a large number of pre-made forms that users can choose to use themselves, send to someone else to fill in and also create a PDF form themselves.
The form interface itself needed to be easy to use. Using a familiar UI and indicating the fields with a label that is similar to ones used on contract hard copies.

Understanding user entry points formed the design

The goal for this project was to understand the user research from the original product, Bull Forms, and pivot the design to aide adoption and growth. The data obtained from the research was that most new customers were coming from search engines to a specific form. Unfortunately once they landed on a form there was an incredibly high bounce rate.

Users were confused as they were expecting to see a PDF form that they could download. Instead they were offered an experience that was confusing, became overwhelmed and left the site. It was clear that if users were to adopt the platform, the focus had to be to make the experience as easy and familiar as possible, whilst also subtly onboarding the user. Part of this was a complete rebrand including name change from Bull Forms to Fill.io.

To capitalise on users starting their experience from search engines an onboarding modal takes you through the process as well as helping SEO with a meta description.

An individual filling in a form or contract

Understanding the data meant that the main entry points were, search engines (being the main point for adoption), the PDF database and uploading their own PDF (the path for regular members). Next was to plot out the complete journey for an individual user. After this the focus can be on making the process easier and more familiar.

User Story

As a user I need to fill and sign a form that is only available as a PDF

Understanding each entry point and then plotting the process all the way to the users goal allowed for a high level view, to see where onboarding could be added.

Building, filling and signing a PDF

First of all an onboarding point is the onboarding modal previously shown, then there are the input fields which essentially the first step to completing a form. Taking inspiration from hard copies of contracts that use labels, I used these as a UI element to help the user understand what to do.

Signing needed to be made as intuitive as possible. Giving users the option to enter into full screen mode, allowed users to get the signature right first time either on desktop or mobile. As well as that a self explanatory product name (Fill) and a document processing UI gave the user a better experience and helped with adoption.

Incorporating a label similar to what is found on a hard copy of a contract increases onboarding and adoption by introducing a start point with an instruction.
Users have the option of entering into full screen mode when signing allowing for a greater level of precision especially when using a mouse or finger to sign.

Business sending a PDF for someone else to fill & sign

After understanding the points of entry it is then apparent place to aide customers is the handover process when sending a form for someone else to fill and sign. It’s a lengthy and fiddly process of assigning input fields to users. Again by understanding the process a solution can be found and trialed.

User Story

As a HR manager I want to send a contract for a new employee to sign

This process is a bit more lengthy. Understanding all the user goals will give insight into which steps can be combined and refined.

Building, assigning inputs for others

Users can upload their own PDF and drag input fields where required to build a form or contract for others to fill and sign. Users define who is going to fill or sign the input and then when sent to the recipient, that user will only see the field they need to fill.

However there are several outcomes, and users are given the option to finish where they will see all the outcomes they can take. This includes download, print or email the completed PDF if the user is a individual, or send for signing and this is where assigning fields comes into play.

Giving each input a contextual popup form to assign users to makes it easy to build on the go. The form is conditional only showing what’s needed.
Once the user has completed their form they can finish and download, print or email the completed PDF. Or in this instance send for signing.

Conclusion & learnings

The result is a product that capitalises on a niche adding an entry point to the platform and increases adoption for new customers. The product has a freemium model so the first few pdfs are free after that they can sign up.

Something I would change if I had the chance is the initial onboarding modal. It reduced the amount of drop offs but could be less intrusive. By making it a sidebar that onboards the user they can interact with the pdf without having to close the modal, and in some cases refer back to it.