Find a WHEDA Lender App

Original version of the Find a WHEDA Lender "List"
The Problem

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.


Collaboration

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.

Initial sketch and notes for the Find a WHEDA Lender redesign (Search page)

Initial sketch and notes for the Find a WHEDA Lender redesign (Results page)
Methodology & Process

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.


Solving the Problem

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.

Because the app had originally been created by a developer, with no input from a designer and no modern framework or best practices, the entire web application was laid out using HTML tables to control spacing. Stripping the app down and re-creating it using proper semantic HTML and CSS took time, but was the least of the technical issues. In the past, the app had been displayed on its own webpage, lacking consistent branding, look, and feel to any other WHEDA site/page. After the UI refresh, the intent was to have the app live within a page created in WHEDA’s existing CMS, to provide continuity in experience. Without completely re-writing the app from the ground up, the only way to accomplish this was to embed the app in a iframe on page. Iframes are not normally dynamic, sticking to a pre-defined size. That was problematic, because a search box page would take far less room than a search results page, with the potential for hundreds of results. Ultimately, some clever JavaScript helped solve the problem, so that the iframe dynamically resized based on the contents of the app.

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.

Sketch Mockup of the Find a WHEDA Lender app

Live version of the Find a WHEDA Lender app
Outcome

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.


View the App