project overview.
Clover Trust presents a dynamic website and app meticulously fine-tuned to cater to the intricacies of online banking.
product
Elevating the existing landscape of online banking involves refining pivotal processes and furnishing users with valuable financial guidance to enhance their experience.
problem
The objective of this project is to create an adaptive website and app that not only simplifies the online shopping experience but also enlightens users about the array of banking services available to them.
goal
Title: UX Designer/Researcher
Responsibilities: User research, journey map, wireframing, high/low fidelity prototyping, and user testing.
role
User interviews were conducted to understand the target audience and their needs. The goal was to identify what issues or complaints users have with their online banking experience. A primary user group identified through research were users who have to input their card number every time they make an online purchase.
user interview
interview goals:
.png)
-
Which bank are you currently associated with? Have you had any issues while using their online banking platform?
-
How often do you login for online banking? If you do, what is your motivation for doing so?
-
What challenges do you face while conducting your business? How does this make you feel?
-
Is there any way in which you feel your challenges could be resolved?
-
Do you use online banking for any other uses? Is there a process or feature you would like added?
interview questions:
-
Age 13-62
-
People who use online banking frequently
-
Include participants of different genders
-
Include participants with different abilities
-
Include participants associated with different banks
target participant characteristics:
pain points.
Having to input my card numbers every time is annoying and some users have to go grab their card.
1. online shopping
Many banking platforms have a difficult workflow and users struggle to find what they are looking for.
2. process
Most platforms are not engaging and users find themselves not using most of the features available to them.
3. product
Some users are not financially aware and they wish banking platforms provided some advice on how to handle their funds.
4. financial aid
A competitive audit scouts the competitors to understand their approach and identify the strengths and weaknesses of their brand. The aim is to discover what works for other companies and incorporate those strategies into the design and gain a competitive edge. Two competitors are audited for this project: Scotiabank and TD Canada Trust. The audit includes my notes while interacting with their platform and a report.
competitive audit
personas.
problem statement:
Daniel is a 29-year-old engineer embarking on his professional journey. Eager to navigate his newfound financial landscape, he seeks an online banking platform that not only caters to his banking needs but also offers valuable financial insights and guidance.
user story:
As a freshly employed engineer, I'm keen on discovering optimal avenues to allocate my funds, aiming to cultivate passive income streams that will pave the way for an early and secure retirement.
problem statement:
Bertha is a resilient retiree with visual impairments, seeks a more accessible and simplified online purchasing process to enhance her shopping experience.
user story:
As a senior navigating online purchases amidst complexity, I aspire to find a platform that simplifies this process, reducing the burden of intricate security checks and ensuring a smoother experience.
user journey map.
site map.
The process began with crafting paper wireframes, where each interface and its components were swiftly sketched on paper. Notably, stars were strategically placed on these sketches to highlight the crucial elements earmarked for inclusion in the initial digital wireframes.
Transitioning to the digital realm, the wireframe carried over to Figma. While mirroring the paper wireframe's essence, the digital wireframe exhibited heightened detailing and proportional scaling. This comprehensive digital wireframe will serve as the foundation for generating a low-fidelity prototype, enabling efficient usability testing. For an in-depth exploration of each wireframe, refer to the accompanying PowerPoint resource.
To guarantee a seamless responsive design, both the paper and digital wireframes meticulously accounted for desktop and mobile versions, ensuring a consistent experience across various devices and platforms.
starting the design
paper | digital wireframe
mobile app version.
web version.
mobile web version.
usability studies.
-
Are users facing any difficulties reading their account information?
-
Are users able to successfully transfer their funds within the app?
-
How do users feel while browsing through the financial advice?
-
Are there any parts throughout the process where the user was stuck?
-
Is there any accessibility feature you would like added?
-
Are there any responsiveness issues while using the web version?
research questions:
-
Time on task: how much time users spend reading their account
-
User error rates: how often users click on elements with no connections
-
System Usability Scale: a questionnaire to evaluate user feedback
key performance indicators (KPIs):
-
Unmoderated usability study
-
Location: remote (participants will go through the usability study in their own homes)
-
Date: Sessions will take place between June 17-20.
-
5 participants will be given access to the prototypes to play around. Each participant will then complete a questionnaire on their experience.
-
Each session will last for 25-30 minutes
methodology:
-
Participants should be between 18 and 62.
-
Participants should include a fairly even distribution of genders across the spectrum and people with different abilities including:
-
1 user of assistive technologies
-
1 user with a visual impairment
-
1 user with an auditory impairment
-
1 user who isn’t fluent in English
-
-
Incentive: Participation in a raffle for a $20 amazon gift card
participants:
-
Prompt 1: Login and browse through the landing page
-
Prompt 1 Follow-Up: Is there anything you would change about the process?
-
-
Prompt 2: Click into each account and browse the detailed information
-
Prompt 2 Follow-Up: Are you struggling to view any information?
-
-
Prompt 3: Try to transfer money from one account to another
-
Prompt 3 Follow-Up: How easy or difficult was this task to complete? Is there anything you would change about the process?
-
-
Prompt 4: Try using the QR code feature on the app
-
Prompt 4 Follow-Up: How easy or difficult was it to make an online purchase? Is there anything you would change?
-
-
Prompt 5: Browse through the list of financial advice
-
Prompt 5 Follow-Up: Do you feel more inclined to learn more about what to do with your money?
-
-
Prompt 6: Look at the settings
-
Prompt 6 Follow-Up: Is there any accessibility needs that are not met?
-
-
Prompt 7: Repeat these steps for the other prototypes
-
Prompt 7 Follow-Up: Are there any issues with responsiveness when using the web version of the platform?
-
Have the participant complete the System Usability Scale. Participants are asked to score the following 10 items with one of five responses that range from Strongly Agree to Strongly disagree:
-
I think that I would use this platform frequently.
-
I found the platform unnecessarily complex.
-
I thought the platform was easy to use.
-
I think that I would need the support of a technical person to be able to use this platform.
-
I found the various functions in this platform were well integrated.
-
I thought there was too much inconsistency in this platform.
-
I would imagine that most people would learn to use this platform very quickly.
-
I felt very confident using the platform.
-
I needed to learn a lot of things before I could get going with this platform.
script:
Throughout the usability study, observations were documented using sticky notes, capturing participants' behaviors, expressions, and insightful quotes. The subsequent step involved employing an affinity diagram, a powerful technique that aggregates these diverse observations into cohesive themes and interconnected relationships.
affinity diagram
research insights.
Separate the elements into different pages and adjust the wording in the description.
difficult to browse through the financial advice
Simply remove the icons that are causing problems.
disruptive icons when browsing transactions
Add more features tailored for different types of users
lack of accessibility features
Add a search bar as well as message details
confused about the messages feature
refining the design.
Leveraging the wireframes and the invaluable insights garnered through usability studies, a series of compelling mockups was designed, incorporating branding elements and visually engaging images. This encompassed the development of three distinct versions: a mobile app, a web interface, and a mobile web iteration. The icons, adhered to a vibrant colour scheme of green and yellow, symbolizing financial prosperity.
Subsequently, this collection of mockups evolved into a high-fidelity prototype. By interlinking buttons and orchestrating interactive elements, this prototype mapped out the user journey. A paramount focus was placed on encompassing a comprehensive array of user flows, leaving no stone unturned in delivering an intuitive and immersive user experience.
mockups | high-fidelity prototype
mobile app version.
web version.
mobile web version.
moving forward.
-
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
-
Conduct more user research to determine any new areas of need.
-
Document the skills and knowledge gained from working on this project so that it can be utilized in future tasks.
next steps
impact: Clover Trust stands as a platform that not only prioritizes user needs but also guarantees a consistently positive and gratifying online banking experience.
what I learned:
-
Shortcuts and techniques while designing on Figma
-
To conduct more research on industry standards before making a decision as it will greatly improve efficiency