.png){kind=small}
Context
CBC Bank's forms lacked functionality. This image is of the original design. As users interacted with this form they received no feedback as they were completing each field. The placeholder text is identical to the floating label which caused redundancy. Also the placeholder text does not help the user in any way.
This project will detail all the ways that this form needed to be updated. The research, the phases, the field statuses, and most importantly the functionality will be explained and shown here.
My Role
UX Researcher
Designer
Objective
Design a smoother user experience for forms fields with more functionality.
Original Design:
User Stories
-
As a constantly busy person, I want my bank’s online forms to be quick and painless, so that I can get back to my day.
-
As new customer to the bank, I want to enter my information without a hassle or being overwhelmed, so that I can open a new account.
-
As a person with a visual impairment, I need clearly defined forms so that I don’t make mistakes.
-
As a multi-tasking person, I would like to be able to save my work so I can come back to complete it.
-
As a detailed oriented person, I would like to see my input have been placed in the correct field, so that I can be certain that I’ve entered the correct information.
-
As a person who appreciates privacy, I would like my information kept secret, so I don’t have to worry about identity theft.
-
As a person who plans, I would like to know how this form will affect me in the future, so that can plan for it.
-
As a person with no knowledge of the home buying process, I need ways to learn the info, so that I don’t rush into something and make a mistake.
Research
As I researched this topic, I realized that there are several ways to improperly design a form. The typical title and open text field is not good enough. It does not share enough information to a user. There is no instant feedback when they click into the field, when they type, and as they move to the next field. I learned about "validation statuses". Simply adding a red or green hue to a field can tell the user they have correctly or incorrectly completed that field.
This above image, from an article in my research, shows the status of each phase of entering info into a field. This image inspired my final design.
New Design
My design displays the status of each phase upon entering text. On hover the box darkens and on click the border darkens even further. I decided to add symbols as well as the border changing color with this design.
Flowchart
Another point of my research involves when and how to use radio buttons, toggle switches, or something else. When creating a series of questions, there are several ways that are best, or easiest, for users to tell you their answer. Sometimes clicking several items from a list will suffice. Other times that list is too long and therefore require a different design. I had to ask myself several questions throughout my design process on which would be best in each situation.
How to determine the right selector
I snagged this image from a presentation about input forms from SmashingMagazine.com by Vitaly Friedman. This flowchart can determine which selector to use.
Checkboxes:
My design displays the status of each phase upon entering text. On hover the box darkens and on click the border darkens even further. I decided to add symbols as well as the border changing color with this design. As I designed these radio buttons, I determined that the original design had buttons that were too small therefore I increased the size. The enlarged size will is easier to view and use. Lastly, this final selector needed for my form is segmented control. A simple selector including tabs to switch to the preferred method of contact.
Check Boxes:
Radio Button:
Segmented Control:
Project Needs
There are three main functions for forms for the bank.
-
Personal Contact Form
-
Business Contact Form
-
Multistep Application Form
Each of these serve different purposes but the general design of all three are similar in nature. A few differences in the available fields are obvious, but the most different is the multistep application form.
This newly designed form features:
-
Progress bar
-
In-Line Validation
-
Larger clickable radio buttons
-
Placeholder text as a hint
-
Quick and easy Tooltip viewer
-
Localized navigation
-
Hover effects on items
-
Floating labels
I learned through this project that designers make things as easy as possible in order to completely and correctly fill out a form. It should seem second nature to put in information. When a mistake is made the user needs to be told instantly. Many times internet forms will allow users to complete the entire form and even hit submit before they are told the have made a mistake. In my design, I'm not having that. Tell them right away!
New Design:
Functional Input Form
This fully functional form shows the usability of each field. The colors to validate success and failure is the most eye-catching piece. Also the icons draw attention as well. When errors are made, additional red text is added to assist and even placeholder text has been added to further inform the user how that particular field needs to be filled.
This project was tons of research, a few mistakes, lots of mockups, and at last, a final product. This design was sent to production and will be live on the my company's site soon.
Explore some other new projects!
New Design:
