Q2 does white label digital banking applications for community banks and credit unions. My current role is running the UX Research and the consumer, commercial and mobile UX Design team. One of the key projects I worked as Commercial Design Lead was an effort to redesign the Commercial Payments workflow.

Methods: Planning, Contextual Inquiry, Design Workshops, Wireframing, Prototypes, Design Systems, Cognitive Walkthrough, Heuristic Evaluation, Design Critique, Ideation, Experience Mapping, Usability Testing.

Commercial Payment Redesign

Challenge: Win back commercial customers frustrated by a retail focused, tablet-first workflow.

In 2013 Q2 undertook a significant effort to modernize the code base and UI, combining the desktop and mobile experiences into a single unified application. This was a few years after release of the iPad, and pundits everywhere were proclaiming desktop dead–even Windows 8 defaulted to tablet view. Businesses were going to switch to tablet and launch a transformation in work efficiency…

But nobody told the touch typists who refused to give up Windows 7 and their ingrained Office workflows. So when the tablet-first 4.0 version of our online banking product was released, our corporate heavy customers screamed. We were forced to ‘downgrade’ customers to the old version because their customers complained.

Before redesign
If you don’t understand the problem, you will end up solving the wrong one, like a tablet design for touch typists.

The research process to understand why customers were complaining kicked off months before I joined Q2. At that point nothing was being done, as we had other features to add to the product. But upgrading customers complained, and sales prospects weren’t impressed.

My role in the project was the UX Design Lead for Commercial. I was transferred from another project to give support for two designers, taking on the new feature design and scrum ceremonies, general team overhead, to give them headroom to solve the problem. Eventually I was promoted to manager of Commercial, and later took on responsibility for managing the entire online banking design team.

We knew the problem was the tablet-first design. I reviewed past research from contextual inquiries (mainly title company wire payment specialists who did wires all day long). But we didn’t jump into solutioning. We took care to run through the complete design process.

First step was site audits, heuristic analysis of the complete Commercial application, not just the payment pages. Affinity mapping helped us to distill down the findings into general redesign principles to guide our design concepts.

war room for UI audit
We took over a corner to layout everything that was wrong with the workflow.

After understanding the general problem layout, we dug into detailed research:

  • Customer and internal Stakeholder Interviews
  • Persona building
  • Competitive Analysis
  • Ideas Portal Review — over 102 complaints/suggestions
  • Jira ticket review — to highlight design debt and tech debt. e.g. roughly 50% of ~240 backlog issues were maintenance and sustainability, e.g. 11 different pages had to be touched to add a single element to a wire form
    • I have found that making the lives of Engineers and Testers easier through elegant design equates closely with simplifying the end user workflow. We workshop and review closely with the scrum team
  • Customer Visits — watching end-users using the system; with in-person contextual inquiry and remote walkthroughs
  • Collaborative Sketching Workshops — with the larger design team and engineers
  • Task Flow Diagramming
  • Wireframe Iterations, pixel-perfect mockups – defining the design system and UI components
  • 5 rounds of Prototypes & Usability Testing
SUS score
After 3 rounds of testing got the System Usability Scale to 84. Interpretation here from Jeff Sauro’s site.

So at this point we identified the problem, defined and tested the solution, presented the research, and documented the UI design specs. Pop the champagne, right?!

Not so fast… there was a lot of pushback on having to do all the work. As they started estimating the work it would be several manyears of effort (didn’t turn out to be so, but those are the estimates you get when people want you to change your design).

So we did a significant promotion effort, presenting the problems and solution, business case (loss of sales, canceled contracts, etc.) if we did nothing. Video highlights from walkthroughs with users cursing our application helped.

Ultimately the pushback from engineering was summed up that “man, you aren’t doing agile, you’re doing waterfall!” — the equivalent of comparing someone to Hitler in engineering mindset. Now at this point we had not done any user story mapping, assuming that was the next step with engineering. But they hadn’t read that book yet, so being branded with the scarlet W, we had to work through the process with management and leadership. The end result is a re-focus on Agile (though we were already doing it) and scrum master and product owner training and certification through the whole organization.

after design
The redesigned payment workflow – one page instead of four.

Having satisfied the agile-ists, we got down to work and built the thing, and released it to rave reviews (typically: “Finally…”). I think we got a standing ovation at the sales kickoff. And this review from industry analysts was welcome:

Report from banking industry analysts The Aite Group