When a client challenged us to redesign their entire application quickly but with data to support design decision-making, my two partners and I (one interaction designer and one visual designer) responded with a tightly-scoped project that included diagnostic usability testing, rapid iterative prototyping, and a design handoff that provided developers with easily implemented visual elements and interaction design code.
This client came to us with an aging, consumer-unfriendly online mortgage application that their customers, banks and other lending institutions, would purchase and integrate into their sites. Their challenge to my design partners and I was:
First, we recruited 16 participants who indicated that they were intending to take out a new mortgage or refinance their home within the next 6 months. We wanted to know if there were any differences in the current application’s usability based on participants’ prior experience with mortgage borrowing. So we ensured that half of the 16 participants had never before taken out a mortgage or refinanced. The other half had taken out a mortgage or refinanced at least once within the past 7 years. We also balanced each group of 8 by gender, and tried to balance participants’ ages as much as was possible.
A screenshot from the usability test plan.
As expected, the current application posed significant – and sometimes critical – difficulties for participants. And for the most part, my and the primary stakeholder’s predications for where participants would experience issues proved correct. But we also identified several areas that gave the participants trouble – e.g., certain finance-related words and phrases were unclear to most participants. And most importantly, we discovered that participants’ expectations for what happened after they submitted their application did not match how the application process actually worked.
Armed with these results, we mapped out new workflow, created a new information architecture, and began designing wireframe screens and a navigation system. The main goals of the new screens and navigation system were:
Working remotely over the course of about 2 weeks, the interaction designer and I moved from workflow and screen sketches to an HTML/CSS/Javascript prototype. The prototype had no branding or visual treatment, other than a generic “business blue” palette.
In parallel, the interaction designer and visual designer identified the areas of the redesigned application to which theming capabilities would be applied. I created wireframes and workflows for an application administrator to configure the application’s theme, upload the company logos, as well as enter custom data such as the lending team’s names, contacts, and pictures.
A snippet of workflow.
A wireframe example at mobile resolution.
After 3 weeks we provided the client with three key deliverables:
White box visual design example.
After delivering these items we set about usability testing the new mortgage application design. We recruited 10 participants using the same criteria mentioned earlier, and assigned half the participants to the mobile view or and half to the desktop view.
Overall, participants on desktop and mobile were able to easily complete the mortgage application using the new design prototype. Importantly, we established that participants’ expectations and understanding of the loan application process were more accurate than those of participants from the first round of testing. We did identify several areas where we could improve the new design (e.g., terminology on several screens, and more efficient control and field selections in a number of input screens).
We iterated the design and delivered a revised consumer-facing prototype along with final versions of the administrative area, white box visual design. We also delivered a code-based design style guide and pattern library.
This was one of more challenging – and fun – projects I’ve worked on in a few years. The client had a big ask, and gave us an aggressive timeline. We met their needs by appropriately resourcing the project with 3 UX practitioners, which proved key. I was able to plan and carry out the usability tests while the interaction and visual designers worked ahead where they could. For example, the interaction designer knew that the prototype would need a certain level of pseudo-functional interactivity, so he worked in parallel during initial usability testing to create an easily changeable, flexible and responsive prototype framework. The visual designer also worked with the client and me to identify what application areas should be themable, and began working on a white box design during the workflow and wireframing phase.
April 29, 2019
Usability Testing, User Experience Strategy, User Research, UX/UI Design