BNC UX Lead

As the lead in UX designer (2014-2015) my role was to create a simple & consistent user experience for the bank across our multiple platforms.

Context

The bank needed to create a long-term design vision. Unify an experience for their users. Provide and document a design system that could be handoff to third-party agencies to create new digital products. And keep a close eye on them to make sure the consistency and cohesiveness were there.

At the beginning, the design, the brand and the user experience was according to the interpretation of different agencies and different VPs. From user journeys, tone and voice, colour palettes, font-sizes, to call-to-actions, to name a few.

Without a lead the bank was under different confronting opinions on how to make the experience breathe along the different devices.

First steps

On the web the National Bank of Canada had several sections on several sites, built almost handcraft with a unique CSS per section, sometimes even the styles were inside the html. The bank needed to develop a vision.

The holistic navigation concept was created in order to unify several sites (domains) under one single navigation bar. This would help users to grasp a holistic view of the bank’s services.

We needed to develop the first components and styles for the new Content Management System (CQ5, now AEM). With my internal design team we quickly researched, analyzed, designed the different components to be built on for AEM. That took us several months to reinterpret the old content and adapted it to the new components and styles.

In the example: we designed a user experience to allow them navigate throw the offer of all the bank accounts and compare them against each other. At the same time this was translated in to UI documents for the components, when developers were coding in parallel.

In parallel we started the design of tablet app (iOS and Android) with the UX team from Havas (TO). Together we created the building blocks of what will be our evolving mobile design patterns.

Design decisions

As a big corporation with several “legacy” design decisions, we started to question everything.

• Why do we use a print font-type? We chose font-types conceived to be read on small screen devices.
• What do we need to place the same legal terms everywhere for? Is there a way to have them in a non-intrusive manner? We consistently organized legal content (but important) inside drawers, and light boxes. So users could easily find them when needed.
• Let’s use consistently the same teminology, formats across the bank platforms.
• Let’s simplify every transaction to 3 to 4 maximum steps. Example: Step 1: from, to, date; Step 2: extra info plus validate; Step 3: a solid (ensuring) success confirmation (or fail).
• We avoid unnecessary politeness (Please, Could you, Could you please) where direct sentences where easy to follow.

Cohesive journeys: we did extensive research to understand our technology, user needs, bank services and products to simplify and bring a unified view of the different user journeys.

Another to do of the role was to coach the different VPs and decision makers at the bank, on the process of design, the importance of test-and-validation, the value of good experience, and how to be the guardians of the experience we delivered for the users.

The design as a process

We adopted process like Design Thinking and Design Sprint (not at the same time) for several reasons:

At BNC we led constantly different workshops to align and gather the best of our team.

• Get the best ideas from our teams

• Truely understand and shape our user needs
• Create empathy on everyone including developer and decision makers on the impact the team effort can make on the user’s life.
• User test, fail/validate fast.

User test

Across the several projects using different sectors representing our users (age, income, gender, education, etc). We tested tablet apps, mobile apps, the ATM, and many online site more.
We tried the information architecture and learn the most natural and simple way to organize the several functions of the apps.
We had all kind of learnings: some call to action, copy or UI was not clear enough we got to listen and redesign our UI.

User testing was key to quickly fail or validate our designs. Users were constantly teaching us where we were wrong and pointing at us the main pain points.

The ATM

In collaboration of NCR we had the change to improve our design system. We choose a cleaner font and we clean up our palette. More accessible UI with more contrast colours.

With quick turn-arounds we found the right fontsizes and contrast for the different use-cases and questions:

• Too much light / sun competing with the ATM-screen.
• Confidential information was too easy to read from the next person behind.
• Users needed to understand the hierarchy of the information.
• What’s the perfect size to have bold but clean texts, icons, messages and buttons?
• How information inside the screen linked to the information on the machine (around the screen)?

We preferred Quick turn-arounds with the hardware (the ATM) to fine-tune our UI. Considering accessibility, ergonomy and ambience

The ATM offer a new hardware, with demanded building new habits on our users: where the envelopes to deposit where no longer needed. Not to deposit cheques, nor to deposit cash.
We tried and failed : onboarding process, videos, etc. At the end what worked was consistent patterns of messages and clear short messages.

At the bank we discover we basically had 2 personas, indiferent of gender, income, age. One with technology literate (a “heavy” user), and one with less habit of using web or mobiles (a “non-digital” user). Our designs had to cover those 2 personas.

Reflection

I never had such a complexe ‘project’ to have an impact. It took me monts to started having a. In brief I enjoyed a lot.

What worked was:

• Having access to the decision makers.
• Understanding a high level the design-problem, constraints like knowledge, budget, dev skills, time.
• Understanding a close level : how to document best our designs, the technology of the moment, and user needs.
• A great manager that created and opened the time and space to voice design.

The teams I led in-house and out-sourced were in charge of :

• Develop and evolve a design language that breathed the brand & its values.
• Concept the Information hierarchy from the highest level to the detailed level.
• Plan a cohesive multi-platform navigation.

Friendly and logical ‘flow’ from the user point of view.
For quick tests & prototyping of the main functions.
We deliver documented-wireframes for optimal communication with the IT partners.

Brand application to interfaces.
Multiplatform style guides. Flexible and scalable.
Tablets and smartphones. iOS & Android.

Touchscreen ATMs with minimum amount of steps.
We designed self touch-interfaces that take the user by the hand and reassures him on every steps.
UI-animations accents the logic experience of the flows.
Responsive newsletters.
Advisors’ tablet tools for the branches.