Therapy­Notes® Signup

Solution

The resulting signup process is richly accessible with limited distractions from the user's flow. Helpful context is shown dynamically inline when fields receive focus and hidden from sight when the user moves on. Validation errors are shown in close proximity to the fields they describe. There's little, if anything, to get in the way of a user digging in to their brand-new TherapyNotes account.

Visit TherapyNotes to experience it for yourself.

Discovery

To identify the most critical gaps, I evaluated the usability of our existing signup process against best practices in a variety of contexts—testing with mouse controls, with keyboard controls, with screen readers, on different devices, and at a range of screen widths. We had numerous defects that made the process disorienting and, at times, nearly unusable, such as:

• Extraneous navigation items
• Improper tab order
• Fields without programmatically associated labels
• Instructional text hidden within inaccessible tooltips
• Validation errors grouped at the top of the form, distanced from the fields they describe
• Incomplete validation requirements, resulting in incomplete data for our sales team

The signup process impacts both the user who is signing up and our internal sales team who uses the submitted data to improve conversions. Their needs were the driving forces behind our efforts:

Design

We prioritized removing extraneous website navigation from the signup process in order to limit superfluous opportunities to bounce from the page. The redesigned process features a single link back to the website home page through the TherapyNotes logo at the top and a simplified footer for legal resources. The rest of the page is directly relevant to the user's choices to create their account.

To combat the density of the previous signup pages, we focused on communicating key information more efficiently through placement and brevity. We distilled the previous "Subscription Benefits" list to a two-sentence description above the form, accentuated by a partial blue background designed to anchor the user's focus as soon as they arrive. The explanation for each step was similarly compressed to one or two sentences so as not to inundate the user with information that has no impact on their current flow.

To eliminate the inaccessible tooltips used for help content, we established a pattern where a helpful message is shown directly adjacent to the corresponding field when the field has focus and disappears when the user moves on. This keeps the form tidy and ensures that the user has the information they need exactly when they need it and not a moment longer.

Similarly, we moved any error messages from the top of the form to the fields they describe. (What a relief!) And, much to the delight of our sales team, we improved validation for the Phone Number field to ensure that the team always has a complete contact number to reach out to.

Our biggest victory was how all of our improvements contributed to better accessibility. Now:

• The tab order exactly matches the order of elements on the page
• Every field has a proper label
• Each help and error message is programmatically associated with the field it describes
• Nothing that a user can see is hidden from anyone who can't perceive by sight, including the password strength meter

We designed, developed, and tested with accessibility as a first-order concern. We still have accessibility gaps to fill with some global controls and patterns used on the form, which we're eager to tackle with our design system Psyche in 2023.

Now, we're working on applying the same visual design and accessibility principles to the TherapyNotes login experience.