Custom Size – 2.png

Scotiabank mobile banking

Overhauling the mobile apps for one of North America’s biggest banks

Tl;dr

I was a senior contributor to the re-design effort on Scotiabank’s mobile banking properties, which included an iOS and Android app. As the bank went through a “digital transformation” my colleagues and I were able to turn fragmented, unusable, outdated apps into contemporary, best-in-class mobile experiences.

 

The Challenge

When I joined Scotiabank in 2014, the bank had millions of customers all over the Americas using a fragmented set of mobile apps with poor UX, no accessibility concerns, and years of built-up technical debt.

The cheque deposit page from the bad, old days

The cheque deposit page from the bad, old days

 

Approach

Digital transformation

I was hired at Scotia to "fix the apps". This was right about the time big financial institutions in Canada and the US started to take their consumer-facing digital properties seriously, and design thinking and UX were becoming more frequent topics of conversation at big institutions. Back then, a neobank could out compete a big bank on UX alone. We were falling behind and knew it. When I started, we had waterfall processes, long business requirements documents, a culture of opposition between developers and designers, paralyzing technical debt, and a team of a few scattered designers reporting in different departments, all of whom were competing for "real estate" in an outdated franken-code app. When I left the bank a few years later, I was a senior contributor on a design team of ~50, with full-time researchers, dedicated accessibility experts, and agilists. I got my Scrum Master certification along with the senior developers and product folks working in digital, and I moved into a cross functional team dedicated to rewriting the mobile apps with native iOS and Android frameworks from scratch.

Mandatory whiteboard shot

Mandatory whiteboard shot

 

Design Sprints

We decided that adopting the Design Sprint methodology from Jake Knapp and John Zeratsky’s Sprint book would give us a repeatable, collaborative, robust, and most importantly, rapid framework for iterating through some of the issues we'd been arguing about in meetings about meetings for years. We cordoned off a tiny conference room, and as a team of visual and UX designers, writers, and a revolving door of subject matter experts, we'd take a new feature and run it through the process from low fidelity prototyping to refinement and testing with users every week. We repeated the sprints for months, customized our process as we went, and did almost daily wall walks to show our work to VPs and stakeholders from other departments. We went in with relatively little and we came out with the beginnings of a new design approach to the bank's mobile applications.

 

Killer Basics

One of the things the sprints allowed us to do was pare back the mobile apps' bloated feature set. Over the years, the bank had polluted its core offering with dozens of ancillary features, one-off gimmicks, and obscure settings that were very important to executives within the bank but were poorly understood and mostly ignored by our users. We needed to do basic banking extremely well: balance checks, moving money, paying bills, this is where the vast majority of our usage was happening and those experiences needed deep rethinking and attention from design. "Killer basics" became our mantra, and we repeated it in meetings enough that months later executives we had never met began to repeat it back to us.

Silent voting on sketches

Silent voting on sketches

 

Results

The improvement in design quality in the end product was remarkable. Our redesign coincided with a brand refresh across the bank and serious work on the underlying technical debt in our backend systems. We finally had the alignment we needed to build an accessible, human-centred, contemporary digital product. Here are two examples of the design decisions that make the new app what it is today.

Before

Before

 
After

After

 

Re aligning the information hierarchy

One of the side-effects of executive jostling for "real estate" in the old apps was that the relative prominence of different features corresponded to the political capital of the executive who championed them when they were built, not the importance to our users. We corrected this in the new app by calling out essential data points like balances in the information hierarchy.

New and improved account details

New and improved account details

 

Animation and gesture

Using proper native frameworks from iOS and Android also let us leverage gesture and micro-animations for the first time. We designed transitions not as decorations, but rather to decrease the cognitive load required to complete simple tasks. We also added gestures like a "slide to confirm" on important transaction components so that users could hesitate and double check their transaction details before completing things like bill payments.