The WHEDA Lender List was designed to help consumers view which mortgage lenders offer WHEDA mortgage products, and ultimately, select a WHEDA approved lender. Product experts in WHEDA’s Single Family team conveyed to me that users found the list overwhelming and confusing, which made it less likely for consumers to use the list. I also heard from IT that the underlying application powering the list was outdated, but that IT did not know what could be done to refresh it.
Conducting user studies out in the field confirmed that while the app was functioning, users had a hard time navigating, which led to frustration. This was borne out by analytics, which showed an unusually high page bounce rate, indicating that users saw the app, and decided it wasn’t worth their time.
Working with stakeholders from Single Family and developers from IT, I conducted our preliminary research. Getting signoff from Single Family, IT, and Marketing at each step of the process, I quickly moved from research to rough sketches, and on to mocking up a new app design.
After gathering preliminary research, I met with stakeholders from Single Family to determine their priorities. One of their main focuses was to list a financial entity (bank, credit union, etc.) once, so that there wouldn’t be 100+ entries for some banks like Wells Fargo or US Bank across the state. While this would definitely reduce visual and cognitive load, I voiced concerns that a user would not know if/where a branch close to them might be. The other focus that Single Family emphasized was a different call to action. Rather than having our users end goal be to walk into a bank cold, we wanted them to reach out to the bank first. The new call to action would be sending the user to the bank’s website, with information about how to contact the bank.
I also met with IT, to discuss the technical backbone of the app. IT was unable to commit significant time and resources to rebuilding the application from the ground up, so the core business logic layer of the app would remain unchanged. However, completely overhauling the UI and interaction within the app were both well within the scope. Additional technical challenges presented themselves, including the original app using HTML tables for design/spacing, and incorporating the app into a page within WHEDA’s existing CMS.
With the scope fully defined and rough sketches approved, I moved on to wireframe mockups. With greater fidelity, the stakeholders began to see possibilities within the new design, and requested two significant feature changes. First, showing all approved contacts for a specific product, if the bank offered that product, and second, adding the ability to have the list automatically split into alphabetical order by first letter categories.
I got permission to test how users responded to displaying the contact list automatically, as I knew it would increase extraneous information for most users. In testing, we found that users only cared about a contact near them, if they cared about them at all. As a compromise, I proposed a system where a user could click and enable the contact list if they wanted, via an “accordion”. Splitting the list up alphabetically was more easily accomplished, and I designed a results page using styles borrowed from WHEDA’s existing website for alphabetical results.
Updating the Find a WHEDA Lender app (formerly known internally as the Lender List) presented problems on two fronts. From a usability standpoint, the app was severely outdated, and WHEDA’s engagement with customers was suffering, while WHEDA’s users were growing frustrated. Technical issues were also present, stemming from a lack of maintenance over time and incorporating older technology into modern systems.
To resolve usability issues, WHEDA engaged with its users early and often throughout the process. Getting real world feedback on the current app, the new app while still in the prototype stage, and on the final product helped to direct what changes were beneficial, and illuminate what process our users expected to follow. For example, users often didn’t care about a certified contact for the Tax Advantage product (and responded that they weren’t even sure what the Tax Advantage product was). In the few cases where they did care, they only wanted to see the contact closest to them. The rest of the contacts were annoying information they had to mentally filter out.
That discovery led to a compromise between business stakeholder desires and user desires, without placing more of a burden on WHEDA’s developers. By making the entire list of contacts hidden by default, and having users opt in to view a specific bank’s contacts, visual and cognitive load were reduced, and the Single Family team still had their certified contacts listed without IT having to spend precious time and budget altering the business logic layer of the app.
Once we agreed on the final specs for the app, I moved from a high fidelity mockup to interactive prototypes, and tested with yet another set of users to see if they were more engaged with the app. Across the board, users were more easily able to find a bank (almost always the bank they already did business with) close to them.
I handed the specs and the prototype files over to our developers for a short sprint of development to modify the app. After coding and testing the app, it was updated, and went out live to the world. In the period that followed, Marketing ran an advertising campaign directing users to the new and improved app, leading to much higher traffic. The bounce rate was lower, and engagement was higher, ultimately leading to one of the most successful lending seasons in WHEDA’s history.