Form experience
Users created new investigations using an inaccessible form. My role involved experience redesign of the specific form, focusing on usability and content improvements.
​
─────────⊳⋆⊲─────────
Context
Hubstream users often required setting up investigations. But many found the existing form difficult to navigate and visually overwhelming. This discomfort extended to new users, who perceived the form as not being user-friendly or accessible. As a result, they would close the form or delegate task to colleagues who were more familiar with the form.
My role was to do a comprehensive redesign of the form experience, focusing on improving both its usability and content. The goal was to improve user engagement, increase task completion rate, and reduce error rate.
Approach
I conducted a thorough content audit of the form to dig deeper into the reported issues.
The audit results confirmed that:
-
Accessibility wasn't the only reason users didn't respond well to the form.
-
This was a 3-layer problem. Readability and clarity were the main driving factors behind the disappointed users.
-
To fix the form, I needed to address all issues individually.
I did a thorough analysis of the old form content, information architecture, and content strategy. I documented my findings and collaborated with the product owners and designers to get their inputs and buy-in.
Major improvements
-
Readability
-
Reorganized the form's information architecture (IA) into intuitive sections for better user understanding.
-
Revised the labels to follow sentence case and plain English.
-
Utilized varied font sizes, weights, and colours to establish a clear visual hierarchy.
-
-
Clarity
-
Marked required fields with an asterisk for clear identification.
-
Included placeholders in all fields to guide users.
-
Provided help text for complex fields, keeping new users in mind.
-
Created clear microcopy for immediate feedback on inputs.
-
Developed clear and helpful error messages.
-
-
Accessibility
-
Added alt text to buttons.
-
Adjusted text colour to contrast well with the form's background, improving readability.
-
Added ARIA attributes to communicate the role, state and value of elements.
-
Other important updates
-
I introduced a validation carousel that displays errors along with count upon saving.
-
The purpose was helping users quickly and sequentially review and correct errors.
-
Enabled navigation through errors using left and right arrows, which also direct the user to the associated field.
-
Upon correction, a tick appears, and the error count decreases in the carousel.
-
-
I also added new fields to capture essential data and removed the irrelevant ones.
Impact
​Usability tests revealed the following:
-
Users found the new form user-friendly. They were able to successfully create investigations and correct errors, if any, using the immediate feedback.
-
User engagement with the form increased by 18%.​
-
Task completion rate improved for the specific form.