About this project
SENB Bank, who's majority of the customer base is aged 45+, desires to drive down its demographics to prioritize individuals falling in the 25-45 age bracket — which entails a fresh, modern overhaul of its entire website — making it more intuitive, resourceful, and easy to use.
The bank also aims to grow its customer base in two new areas, namely, Business Customers and Small Investment Customers.
The 6D Design Process
The Agile UX design process consists of 6 building blocks (or stages), namely: Discover, Define, Design, Develop, Deploy, and Drive.
We employ these in our design cycle to ensure intuitive and pleasurable experience for users — this helps us right from understanding the context to conducting accessibility and usability tests.
Heuristic Analysis
The purpose of doing this exercise was to look for usability issues with the existing UI of SENB. We carried out a thorough usability evaluation of the existing SENB site. This primary usability inspection helped us find the grey areas and think for resolutions, and consequently, improve the user’s satisfaction and experience for the product.
Summary
The header isn't fixed throughout the website – no indication of where we’re within the site
No visual indication of the selected tab – confusion as to which tab’s info is displayed
A plethora of technical jargons and terminology are used, thereby causing ambiguity for users
No option for users to go back “home” once landed on the ‘search results’ page
The cognitive load for the users is very high across all pages of the website – content restructuring is needed
Lack of consistency in visual elements over the site, links somewhere underlined, etc.
Error prevention mechanism is flawed. Users apprised of errors only after they’ve committed them.
Confirmation of critical actions on the site isn’t there. This needs improvement.
The colour palette used is not suitable. Aesthetic appeal eludes site due to improper colour balance.tured
Competitor Analysis
We scrutinised the banking websites of SENB, Wells Fargo, Ally, and Chase in terms of general usability, information structure, content grouping, etc. It helped us evaluate the strengths and weaknesses, and build a strategy for the way ahead. Here’s the gist of what needs to improve in the current site deduced from the detailed analysis conducted.
Summary
SENB lacks consistency in content organization and grouping, resulting in an unintuitive experience for users
Search section needs improvement; it needs to suggest relevant keywords
Font size needs to be consistent for better text legibility and scannability
Page load speeds must be improved to avoid high bounce rates
UI lacks the aesthetic appeal desired, and alignment issues at some places
Deep Analysis of Full Website
Primary User Research - Survey
We wanted to understand user behaviors, opinions, needs, their attitude in general towards banking through banking websites. We sent out a survey across different communities and summarised the takeaways.
Summary
68% of people use their mobile phone to access banking websites as it's convenient
Google Chrome dominates the browsers’ pack with 80% user votes
44% of users visit their banking site weekly and 24% do it monthly
91.7% of users find the official banking website trustworthy and feel secure using it
Nearly 42% of users rely on the bank's support team to resolve issues faced online
48% of users are 'satisfied' & 20% are 'very satisfied' with the online banking experience
8% of users rate the customer support services poorly and are very dissatisfied Sites need to improve sign in process, fix slow page loads, and declutter UI
Users visit banking sites to check account balance, transaction history, credit card info, etc.
Behaviour Analysis - Usage and Demography
It’s important to measure how users are interacting with the website, what keywords do they look for on the site, and how they perform and the time taken to perform the task. We analysed multiple Google Analytics reports, which were showcasing the overall website data for SENB and provided holistic insights about the bank's prevailing audience.
Summary
Most users use a desktop or mobile to access bank’s site as per usage data
Google Chrome’s the most popular browser and Apple Safari’s the runner-up
Majority of the online users for SENB are between 25 to 34 years of age
Most users use an iPhone to access & browse through the bank’s website
Most users are either looking for ‘rates’ or ‘routing information’ on the website
Browser X is the fastest in terms of site load speed taking just 2s, while Samsung Internet is the slowest with 6s.
Requirements Analysis and Consolidation
User Stories
Lo-Fi Wireframes
Sketching low-fidelity wireframes helped us focus on pages' key purpose and functionality as we refrained from fine-tuning any minute details like colours, fonts, logos, and exact sizing – all of which can be added later!
User Testing
We prepared two versions of the wireframes for the banking website of SENB. Then, we created projects on Loop11 (user testing platform) and laid down 9 tasks for the users to perform on both the versions. The tasks ranged from finding the routing number on the website to finding the financial calculator on the site.
At the end of the test, we presented the users with a different version of the design (the other version on which they didn’t perform the tasks on).
First, we asked our people to take test runs on the online Loop11 test. This helped us rectify the mistakes and get a feel of how online unmoderated user testings work.
Afterwards, we sent out the tests to 4 people (2 people on each version). Once the videos were out, we carefully analysed where our design lacked and we’ve summarized the inputs below.
Here's the link to the user testing videos: - https://tinyurl.com/yyxt6rzn
Takeaways From User Testings
For Bank Design A
Users are jumping to “consult an expert” page on the task which asks them to seek personal financial consultation. Differentiator for this generic contact us page is required.
Users are going to the “online banking” tab that’s there at the middle and not using the sign in at the top, so it’s better to have that sign in option on the page of online banking too.
For Bank Design B
Routing number can efficiently be placed - i) In each of the tab menus in the header ii) on pages where it can be utilized (e.g., money transfer pages).
Personal financial consulting can be improved on the site by:
Adding a link to consult a financial advisor on the ‘contact’ page
Removing the generic contact us section from the ‘personal financial consulting’ page Coming up with a more appropriate headline for the personal financial consulting Possibly changing the CTA text
Adding a link to personal financial consulting in the relevant tab menus in the header Changing the name of the ‘wealth’ tab
“Open an account” can be placed more prominently on the page - at all tab menu headers, online services page, under “personal” and “business” tab, footer, next to “sign in”
Atomic Pattern Library Creation
We utilised atomic design principles and built an atomic pattern library - a tool or set of standards that is compiled through a design process , wherein each component is tested piece by piece, and every item's checked against its context in larger templates. This helped us construct pages and content with greater visual consistency later on.
Invision Based Prototype
Complete Desktop Prototype: https://invis.io/Y5ZAG8VR9JD
Complete Mobile Prototype: https://invis.io/MNZAG8EJ7TV
User Testing Phase 2 - High fidelity designs for web & mobile
We set up two tests on usertesting.com for the hi-fi design mockups - one each for the mobile and web banking website. The tasks were similar to what we had on our phase 1 of user testing. We strictly confined the test audience to the people of Iowa and Illinois and the age of the people were between 25 to 65 years.
NO. OF PARTICIPANTS: 10 (5 Web & 5 Mobile)
AGE GROUP: 25-65+
STATES: Iowa (5) Illinois (5)
GENDER: Male (4) Female (6)
HOUSEHOLD INCOME: $20,000-$175,000
Key takeaways (Web and Mobile)
You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.
User testimonials are good when it comes to increasing the overall trustworthiness of the site - at least 5 users suggested this
Users would like to have interest rates shown on the website - users answered this when being inquired about the “deal-breaker” on a banking site
On the support page, contact info (email, fax, etc.) should be above the contact form and not the other way around
On mobile, “Contact Us” at bottom was not visible to users. So, we expanded the links at the bottom rather than hiding them.
On mobile, users weren’t using the menu option quite often - quite possibly because it was placed on the top-right. We moved the burger menu to the top-left.
Summary
We set up two tests on usertesting.com for the hi-fi design mockups - one each for the mobile and web banking website. The tasks were similar to what we had on our phase 1 of user testing. The important tweak in the designs was to include different types of account openings & loan applications from the “Open an account” button.
Afterwards, we sent out the tests to 10 people (5 users each on web & mobile). Once the videos were out, we started analysing as to what can be improved with the designs. We made the updates as per the user feedback. The design was generally well received by the users and they’ve eulogised the effort we’ve put in to ease the navigation via a minimalistic approach.
Front End Native Prototype
Next up, we build a front-end native prototype for the website and test it on the target users. Having an HTML based prototype allows us to show end users the basic flow and functioning of the proposed software solution in a way that they're more familiar engaging with. Users can easily interact with the website or web application and get a gist of how the finished software would feel like, with none of the downsides of implementing the actual functionality, only to change or throw it away if it’s not fit for purpose.
Testing the HTML prototypes in this way helps us expedite the software development process.
Accessibility Compliance - Automated
Data suggests that at least one in five people have some type of impairment, so it's very important to develop software that's accessible for everyone. Furthermore, more governments are requiring sites to be accessibility compliant. To ensure accessibility, we prepare checkpoints for accessibility testing as mentioned WCAG guidelines and conduct automated testing using popular tools such as Web Accessibility Checker, UI Automation, Automated Accessibility Testing Tools (AATT), etc.
Accessibility Compliance - Manual
Once we have removed the errors discovered by the automated tests, we opt for professional testers with disability to test our designs. This is because not all the issues can be discovered by performing automated tests of accessibilty using tools. This manual testing helps the testers focus their efforts on the complicated interactions and helps us with insights on how to make the website more accessible overall.
UX - QA
UXQA or quality assurance testing is a vital part of the product development process. Having UXQA as an integral part of our workflow helps us massively in bridging the gap between intended design and its coded version before the product is released. Additionally, we take care of the UX part too i.e., performing UX Audits, Usability Testing, etc.
Design System
A Design System acts a single source of truth, which helps teams to design, realize and develop a product. It is a set of reusable deliverables and elements such as tools for designers & developers, patterns, components, guidelines, etc. We help our clients with laying down a foundation for a basic design system which can be scaled as the organisation does.