FormSwift 

This is an independent case study on how to improve the adoption rate for an existing product in the documentation builder space.

Building 2 Mockup Prototypes

Thought Process on Bill of Sale Preview/Builder

Originally, the high-priority item was going to be Idea #2 (hamburger menu). However, after further consideration, it was decided to be secondary to Idea #1 (validation & error handling). Validation and error handling are far more important to the users. No one wants to spend time filling out a document only to encounter errors, especially errors that do not specify to the users what exactly needs to be fixed. The frustration level is much higher for the user in this area, which is why it was chosen to be of higher priority.

Successful Idea #1: Validation

Validating field inputs and error handling allow users to eliminate unnecessary mistakes (e.g., for number fields, only numbers can be inputted; for price or monetary fields, validating monetary format would be applied), thus saving time. Additionally, if a user makes a mistake, error handling will show them which fields need fixing and how/why. Users are not allowed to move forward without correcting these mistakes. This improvement will make users confident in their progress and lessen frustration if any field is answered incorrectly.

• Pro: Reduces frustration, decreases dropouts, increases satisfaction, provides a quick and easy way to correct any errors.

• Con: May be a challenging and time-consuming feature due to the fact that many documents differ.

Instructions and Specs for Validation

User Story #1

As a user, when filling out fields in the form, I should be notified if a wrong input value has been entered in the field. A message in small red text should appear next to the field label indicating the error. The field types are as follows:

Acceptance Criteria:

• Phone: Validate that these are numbers and provide mask validation (XXX) XXX - XXXX.

• Currency: Validate that it is a number and this number is of positive value starting with $ symbol.

• Date: Validate that the date is of the right format for the locale (default to MM/dd/YYYY).

• Address:

  • Street: Validate that the street address exists within the suggested options in the dropdown.

  • City: Validate that the city exists within the suggested options in the dropdown.

  • State: Validate that a state has been selected.

  • Postal Code: Validate that the postal code is a number (if US address, change validation regex for other locales) and it matches the other Address fields.

Successful Idea #2: Error Handling

Taking into account the typical users (i.e., may not be tech-savvy), the hamburger menu does not let the users know it is the toggle for viewing all the sections; it is too small to notice, making users overlook it completely. I found this area to be of high priority because users like to know what they are doing; no one likes to walk into the dark. By adding “View All Sections” and sections out of, the user can easily find where they are and how much they have left in filling out their form.

• Pros: Gives users a clear view of where they are in their form and how much they have left to complete.

• Cons: Different people have different information; showing an error on something that may be correct might cause a problem. The error handling needs to allow for some areas to be error-free (e.g., name and last name).

Additional Small Improvements:

Idea #2.A: Have a “Clear Section” button for users to quickly start over, if need be, saving time.

Idea #2.B: For Section 1 address box, an added question icon helps indicate that the address is of the seller, not the property to be sold, reducing confusion and error. As an admin, the system needs to be able to add inline help next to a field providing help to the user as they fill out the form.

Idea #2.C: In the sidebar, adding a description under the name of the form being filled helps the user know which form they are on and what its intended use is. This prevents the user from wasting time on a form that might not be the right one and directs them to more forms that may be what they really need.

Idea #2.D: Adding a quick description under the section questions (e.g., Who is the Seller) helps the user further understand what that section is asking.

Instructions and Specs for Error Handling

User Story #2

As a user, when proceeding to another section by clicking “Save and Continue,” I should be notified that there are errors in the current section which I should address and cannot continue without doing so.

Acceptance Criteria:

• There will be a message in small red text underneath the “Save and Continue” button which will display “Correct errors before continuing.” Once all errors in the section are fixed, the “Save and Continue” button should appear in its default state and allow the user to proceed to the next section.

Quick Case Studies 

Landing Page

• The landing page should have a clean method for searching for a particular form. The search box should be positioned at the top and center.

• There should be an option to distinguish who is searching, whether it is the first or second party, as some documents vary depending on who is searching. This will reassure the user that they are on the right path.

Create a Document

• The documents should not be categorized under Personal/Business/Real Estate if the sections are not clearly defined; this could confuse users.

• The user shouldn’t have to scroll down to find the search bar; it should be visible right away for the user to search. Most screens are between 13” to 15”, which forces the user to scroll down to see the search.

W-2

• An option to integrate forms from other systems/documentation builders will help in filling out fields that appear multiple times in a form, potentially across forms, saving time for the user (e.g., Tax ID).

• The progress steps at the top do not indicate which section they relate to in the form. Perhaps if they were divided into sections (e.g., step one = section one), it would help the user understand how close they are to completion.

• The fields that the user needs to fill out blend with the background, making it hard to discern what needs to be filled out. Having highlighted fields will improve readability and help the user identify what they need to fill out.

• There is no validation or error handling in the field areas for the user to know if what they input is correct (e.g., under number inputs, the user can input letters). Adding error management will help the user fill out the form correctly and reduce frustration.

• Each input field should display information about it in the right-hand corner. This will allow the user to understand what that field is asking for, prompting them to fill it out correctly.

• Required fields should be marked with an asterisk or a differentiating symbol from optional fields and should not allow the user to move forward without filling out those required areas.

Upgrade

• The upgrades do not clearly communicate the benefits to the user. Users are not encouraged to select the “Just This Document” option as it doesn’t explain how it differs or its benefits. Plans need clearer descriptions of their differences and benefits.

• Features should be displayed alongside the plans. Currently, they are located far to the right in a carousel, which is confusing for users or may be overlooked entirely.

• Business packages should be available specifically for business owners, distinct from individual use options.

Unsuccessful Ideas

Idea #1: Initially, the plan was to create a “View All Sections” dropdown menu. However, this would have disrupted the design flow and, in turn, the user experience.

• Pro: Simple for anyone to understand

• Con: Disrupts design flow

Idea #2: To further enhance understanding of the hamburger menu and the sections, the idea was to add the name of the section to the “Save & Continue” button (e.g., “Save & Continue to Additional Seller”). The same idea was considered for the “Back” button (e.g., “Back to Seller”). However, this idea was rejected due to redundancy with Idea #2, which provides sufficient clarity for users regarding their current section and the next one.

• Pro: Effective for indicating the current and next sections

• Con: Redundant compared to Idea #2

Idea #3: An idea to distinguish between required and optional fields, preventing the user from continuing until all required fields are filled, was considered. However, it was rejected because users may not have all the necessary information or may not need to fill out all fields. Users should have the flexibility to fill out the form as needed, with the option to export and share the document for completion by others.

• Pro: Reduces errors and ensures important areas are not missed

• Con: Limits user flexibility in filling out the form

Idea #4: Considering adding the type of “Bill of Sale” to “Property or Item Bill of Sale” would have clarified that the document applies not only to property (e.g., home or land) but also to any item (e.g., computer or furniture), potentially reducing errors. However, this approach was deemed too specific without additional detail. Instead, the decision was made to add a description of the document in the sidebar (Idea #2.C.).

• Pro: Provides quick reassurance about the document's purpose

• Con: Lacks detail on the page, potentially leading to confusion