Nationwide
Online
Banking -
Unsolicited
Redesign
UX & UI Case Study
Responsibilities
UX Research
UX Design
UI Design
Research Methods
1 On 1 Interviews
Competitor Analysis
Heuristic Evaluation
User Testing
Preference Testing
UX Deliverables
Task flows
Sitemap
Wireframes
Prototypes
Solution
Responsive web app
MVP
Conceptual Project
Unsolicited redesign of Nationwide’s online banking authenticated website. Created as part of a bootcamp curriculum.
Duration
2 months part-time
Context
Currently Nationwide offers good native apps to deliver online banking to its customers, however the authenticated area of the browser platform is non-responsive, visually out-dated and not the easiest to use website. For some customers, this will be the only way they access online banking and improvements are necessary in order to raise the experience level to align with the marketing website and the native apps. For Nationwide a redesign would create a stronger brand identity.
Problem Statement
Nationwide customers who want to access their online banking via the authenticated website need an intuitive, accessible and modern website so that they can easily complete tasks and happily continue banking with Nationwide.
Hypothesis
We will know we have addressed the challenge successfully when we see users completing online banking tasks quickly and easily.
2011
Online banking through desktop browser
10 Years Later
2021
Online banking through desktop browser
2021
Online banking through mobile browser
2021
Online banking through iOS Native app
Overview
-
Business goal: keep existing customers confidently banking with Nationwide and gain new customers through positive reviews made by existing customers.
-
Hypothesis: improvements to the authenticated area of the Nationwide website would help users complete tasks quicker and more easily and decrease the likelihood of customers switching to competitor banks.
-
Solution: responsive authenticated web app to deliver online banking
-
Result: usability testing showed positive feedback of the mid-fidelity prototype with good task completion rates.
Project Approach
Rapid prototyping with a mobile first approach to avoid adding too much content to screens, following the double diamond design methodology.
Customer Comments Found Online
‘...mediocre online banking.’
JB, Trustpilot, Oct. 2020
‘It’s always been pretty damn ugly, but I’ve never had any trouble with its functionality.’
Allstarfar, Reddit, 2018
‘Online banking experience is horrendous and looks like it was designed and built in the 80s...mobile banking is better.’
Stuart Kerr, Trustpilot, 2021
‘After over 30 years as a customer...it was time to move to a more modern company. Their online banking and mobile apps are so outdated and haven’t been invested in for years. Their products are no more competitive than a regular bank and are often worse, so there’s no benefit to being a member of a building society.’
DBUK, Trustpilot, Feb. 2021
‘Again, trying to use internet banking, absolutely pants. This time, transfer of money using IBAN, once you’ve managed to find out how, it then says tech error try later. Had enough, going to transfer all accounts elsewhere.’
Steve, Trustpilot, Oct. 2020
‘A financial provider which has been running for 20+ years and was one of the first to open an online banking website has the most visually outdated website I’ve ever had the displeasure of seeing. It looks like it's still stuck in the 90s.
How can a society which boasts 15 million members be ok with having such a crappy looking website.’
u/[deleted], Reddit, 2018
RESEARCH
Existing User Interviews
4 existing Nationwide customers, 18 years+.
Affinity Mapping
Key Points from the Interviews
-
Unclear and unhelpful messages.
-
Out-dated UI.
-
Difficulty navigating the site.
-
Viewing old transactions difficult.
'I find it [the interface] very very messy and confusing.'
Market Research
SWOT Analysis Overview
Strengths
-
Telephone banking
-
In-branch banking
-
Easy to use, carefully thought-out marketing website
-
Multiple views of transactions in the account statement
Opportunities
-
Modernise visual aesthetics
-
Simplify navigation
-
More accessible design
-
Reduce task flow steps for common tasks
Weaknesses
-
Online banking mismatched with native app
-
Marketing side of website not aligned with authenticated area
-
Non-responsive authenticated area of website
-
Information architecture issues
Threats
-
Stiff competition from competitors
-
Existing customers writing negative reviews on public forums thus potentially deterring new customers from joining
Solutions Based on User Research & Market Research
-
Apply modern web design principles with appropriate white space and CTAs.
-
Rearrange Information architecture into different categories.
-
Improve accessibility such as text size, colour, easier to understand language, icons for quick scanning.
-
Include more options on screens to reduce number of screens in task flows.
SYNTHESIS
Information Architecture
The competitor research and heuristic evaluation compiled together with existing customer comments were used to create task flows and user flows, then a sitemap.
User Flows
Navigation Menu Redesign
IDEATION
Wireframing
Low-fidelty wireframing focused on idea generation of the designed user flows.
Mid-fidelity Wireframing
High-fidelty wireframing improved the overall UI.
Statement of Transactions Screen
Past month, past 3 months, past 6 months filter was changed to individual monthly increments to separate them into smaller divisions thus making finding transactions quicker and is a common, familiar way to categorise time.
Evolution of UI Design of Key Screens
Preference Testing Your Accounts Page
A
B
31 participants
Most participants preferred having quick action buttons which apply to any account, instead of drop-down hidden options which only apply to each individual account.
IMPLEMENTATION
Prototyping
A prototype was created in Figma to allow participants to test the newly designed user flows and to highlight areas to iterate on.
Usability Testing
A test plan and test script were created to run the tests consistently across all participants.
Participants
3 Existing Nationwide customers
2 Non-Nationwide customers
Methodology
Remote & in-person moderated 1-on-1 tests
Versions Tested
Mobile
Scope
Discover ease of task completion
Test Goals
-
Assess raw functionality, errors and satisfaction of existing customers as well as new users interacting with the mobile website.
-
Discover if users understood how to complete common activities and if the UI was effective.
Hypotheses
We believed that by redesigning Nationwide online banking existing customers would feel they can use the product more easily and happily than they previously had been able to, to complete common banking activities. Perhaps non-Nationwide customers would find the prototype worth switching to from their current online banking provider.
Overview of Test Tasks
Direct tasks and scenario tasks were used.
1
Add a new payee and pay them
2
Pay off your credit card balance
3
Find past transaction details
Test Results
Affinity mapping from the test tasks led to synthesising the data using a Rainbow Spreadsheet.
SEQ answers were numerised into percentages and a usability test report compiled all the data.
The top areas of priority to iterate on became clear.
Some Improved Designs Based on Testing Results
Before User Testing
Issue
-
Hard to read important scam information.
-
CTA 'Make payment' too early in user flow.
After User Testing
Solution
-
Re-wrote text to be easier to scan.
-
Re-worded text to be more helpful and clear.
-
CTAs re-worded to be more relevant.
Before User Testing
Issue
-
Buttons defaulted to both being active. Users confused at de-selecting what they didn't want to see.
After User Testing
Solution
-
Changed buttons to tick boxes for familiarity.
-
Added supplementary text: 'showing'.
Further Iteration
Solution
-
Re-designed card to match 'Your Accounts' page.
-
'More' icon made to be more distinguishable.
Further UI Design Development
UI Design
Outcomes
During the pandemic visiting physical bank branches was not possible, as they were closed or severely reduced their opening times and customers would have turned to online banking. From market research of customer comments, this redesign of the current Nationwide online banking site to make tasks easier to achieve and to modernise and simplify the UI, would have been helpful to many at a time when they could not get help from Nationwide staff in branch.
This redesign put together with native apps and the marketing website offer a more cohesive cross-platform experience than the current online banking site.
Problem Statement
Nationwide customers who want to access their online banking via the authenticated website need an intuitive, accessible and modern website so that they can easily complete tasks and happily continue banking with Nationwide.
The Designed Solution
There is a lot of potential for the solution to address the initial problem and to find this out more task flows would need to be designed and more rounds of usability tests would need to be run to find any weaknesses in the product and to potentially see if users would likely take up the product.
Challenges Faced
-
Remote ethnographic research studies on existing Nationwide customers’ using their online banking to keep their finances private.
-
Clear articulation of test task instructions.
-
Designing the information architecture.
What's Next?
-
Running another round of usability testing.
-
Possibly introducing a chatbot into the website as ‘according to a recent consumer banking trends study, the deployment of chatbots will save the banking industry $7.3 billion in annual customer service costs by 2023.’
