UX Techniques & Methods

• Diagnostic usability testing for application redesign
• Workflow definition
• Rapid prototyping
• Information architecture design
• Application wireframing
• Responsive information and interaction design
• Visual design
• Lo-fidelity usability testing

Overview

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.

Problem

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:

• Test the current application with consumers who were actually shopping for mortgages.
• Establish what (if any) elements of the current design were working well, and what areas needed redesign.
• Rapidly design and develop a prototype that would work on both desktop and mobile web browsers, then usability test and iterate it.
• Develop a default visual design that would also allow for theming by the customer organizations.
• Provide visual and interaction design elements to developers.

Action – Usability Testing

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.

Results – Usability Testing

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.

Action – Rapid Prototyping; Visual Design and Theming

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:

• Support the new workflow.
• Promote applicants’ development of appropriate expectations and more accurate mental models.

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.

Results – Rapid Prototyping; Visual Design and Theming

After 3 weeks we provided the client with three key deliverables:

• A functional prototype of the consumer-facing mortgage applicant workflow.
• A separate prototype showing what areas of the application could be themed, and how the customer would control theming and customization.
• A “white box” visual design that was attractive yet minimalist, as well as several examples of how the UI could look when customized by the bank or lending organization.

White box visual design example.

Action – Testing and Iteration

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).

Results – Testing and Iteration

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.

Lessons Learned

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.