WHEDA Email Subscription Service Sign-up

Original version of the WHEDA Email Subscription Service Sign-up
The Problem

WHEDA maintains lists of email contacts in order to distribute WHEDA product updates and/or other information to customers. Signing up for one or more of the subscription lists is done through an in-house developed web app.

The app was built 15+ years ago, and continued to function, but had poor usability and accessibility. Additionally, the app “lived” on a separate page from any other WHEDA content, and had little to no consistent branding and experience, leading users to a feeling of “internet whiplash” when they first visited the page, to quote one usability test participant.

Finally, there was no real ownership of the app, any of the processes within the business logic layer of the app, or even the subscription lists.


Collaboration

This project involved input and signoff from almost every single team at WHEDA, because the subscription lists cover a wide range of uses. Commercial Lending, Single Family, Business & Community Engagement, Risk & Compliance, and IT all contributed. The first task with each team was to discover current list usage, measure literacy around the signup process, and ascertain if using the list was or would become a part of the team’s strategy going forward. Many teams had little to no knowledge of how to use the list, resulting in it not being used, or all knowledge and responsibility for the list falling on one person. Another hurdle that was uncovered involved Marketing, who had long term plans to phase out an in-house built email subscription solution in favor of a third party SaaS.

After a great deal of back and forth, it was decided to move forward with refreshing the UI for the subscription service app without updating the business logic layer of the app. This would be a medium term solution, as long term, the plan was still to migrate off of an in-house solution.

Initial sketch and notes for the WHEDA Email Subscription Service Sign-up

Card sort of signup form fields
Methodology & Process

Once the scope of the project had been defined in collaboration with all the stakeholders, I conducted user interviews about the subscription service sign-up app. Many users did not even know the service existed, revealing a marketing and communication problem. Those that did know the application existed found the entire signup process frustrating. The app was contained on a separate page, which was styled drastically different than WHEDA.com (the source of most traffic to the app). Additionally, the sign-up process was seen as “messy” and “complicated,” with form fields not showing any consistent layout, error messages displaying at the top of the page, viewing mailing lists jumping you up and down the page repeatedly, and the county selection box only displaying two counties at a time, forcing a user to scroll needlessly.

After collecting and analyzing responses from users, I sketched some rough concepts in collaboration with stakeholders from IT. Even at this early stage potential affordances and interactions were discussed, including changing the list descriptions from anchor links at the bottom of a page into hoverable tooltips. Because other business units were only involved in the project from the perspective of using contact information generated by the subscription service, they were not required to give signoff on design and interaction decisions.

Progressing to low fidelity mockups, I turned to user testing as soon as possible. Users were divided on whether they preferred county selection using a map or using checkboxes after A/B testing, so the decision was made to include both. Improving the app branding and styling to be more consistent with WHEDA.com established a greater sense of trust for users navigating between the two.

High fidelity, interactive prototypes showed uniform improvement in engagement (measured via page bounce rate), completion (measured via total number of sign-ups), and overall trustworthiness on page (from user testing responses). Based on these sterling results, the design files and specs were handed over to our developers for implementation, which was completed in a short sprint.


Solving the Problem

In this project, time was spent tackling each of the prongs identified: updating the app, conducting training, and preparing for an awareness/advertising campaign surrounding the subscription service. I coordinated testing for trainers throughout the process of updating the app, so that they could build training materials to educate users and power users. I also provided high fidelity mockups and later screen shots to Marketing to help them in their preparation of the advertising campaign.

The actual updating of the app began with conducting user testing, to identify areas of frustration in the signup process. Multiple users found the layout/configuration of the registration form fields confusing, the county selection box was a universal frustration, and the list definitions on the list selection screen were time consuming and annoying.

A card sort helped confirm what fields should be grouped together on the form. Clearly defining sections and using consistent labelling/spacing helped improve comprehension and completion rates in early testing. Initially, discussion led to sketches incorporating a map for county selection, but testing showed that a subset of users could not reliably find the county they wanted on the map.

Next, displaying all the counties in alphabetical order, as checkboxes, was tested. This was more successful in the subset of users that had struggled with the map, but overall was only slightly better than the current system, where users had to scroll within a tiny display box to find the counties they were looking for.

Finally, we tested a compromise. Displaying both a map of counties and the list of checkboxes, where selecting a county would check the corresponding box, and vice versa, tested better than either solution on its own. This was the plan we utilized going forward.

List selection was a painful process in the current version of the app, because users had to click a checkbox next to a list title, without any definition of what the list entailed. The title itself was an anchor link to the bottom of the page, where all the lists were defined. There were links after each definition to return to the top of the page, but this just resulted in “yo-yoing” up and down the page multiple times for each user.

The first idea was to have each definition pop up as a modal, requiring a user to opt in to viewing more information, similar to the interaction in the current app. In testing, users found this to be jarring, being interrupted each time they needed to view a definition. The only benefit over the current method was that the list titles remained on screen the entire time.

After some ideation, I decided to test pop up tooltips for the definitions. The drawback of interrupting the user’s flow with a possibly unwanted definition seemed to be outweighed by the need for quick information that could be easily dismissed. In testing, users quickly adjusted to definitions displaying when they hovered over the titles. This was assisted by a new affordance, a dashed underline. Users easily understood that there was an interaction available, and that it was not a traditional link. This signifier and interaction were so successful in testing that we adopted the same system for displaying more information about subscriber types.

Sketch Mockup of the WHEDA Email Subscription Service Sign-up app

Live version of the WHEDA Email Subscription Service Sign-up app (sign-up page)
Outcome

Moving the app within a page on WHEDA.com helped prevent “internet whiplash,” by assuring users that they had not been directed to a strange, external site. Improving the scanability of the form by grouping related fields and using borders, labels, and spacing resulted in improved comprehension and higher form completion rates. Making the county selection always fully visible on screen, as well as allowing users to select either from an alphabetical list or using a map let the app be more useful to a wider range of users. Finally, providing users with a quick and easy way to view definitions for list types and subscriber types, while also being able to ignore or dismiss the information resulted in fewer inaccurate list selections.

Within a month of rolling out the updated app, list registration was up 30%. This was astounding for an app that had already been in place for many years. The training and advertising campaigns helped boost awareness, but the usability drove people to complete the signup. Anecdotes from both customers and sales teams praise the new interface, saying, “It is so much easier to sign up to receive crucial information about WHEDA!”


View the App