A Responsive website for customers to find ideal Open Account solution in 3 minutes
Timeline
3 weeks
Role
Product Designer (UX/UI)
Responsibilities
Prototyping
UX research
Visual design
Usability testing
Project Type
Commercial case study,
A Responsive Website
This project is a fictitious scenario.
Tool
Figma, Adobe Suite
Challenge
Although the bank's website is comprehensive, users often struggle to find the specific information they need. This case study focuses on the account opening process, aiming to reduce user search time and bounce rates, ultimately increasing the number of account openings.
Solution
01.
Incorporate a question-based approach into the bank website to guide users in finding the most suitable account opening solution.
02.
Prioritize the most commonly used and essential information for users on the personal banking interface to prevent them from being overwhelmed by the information.
I have an idea
Many banks offer various application methods for opening a bank account, depending on users' identity qualifications (such as for locals, foreigners, etc.). Instead of presenting all the content directly on the webpage, why not assist users in categorizing and making decisions from the outset? For instance, by initially inquiring about their identity conditions and then directing them to the suitable method for account opening. Wouldn't this approach save users more time?
To make this idea more comprehensive and effectively assist the business, I've also set up the business goal.
Heading
Business Goals
01.
Create a user journey that prevents users from easily abandoning the application for a bank account, thereby increasing the bank's user base.
02.
Reduce the bank's manpower consumption.
Design process
To verify if my idea is correct, ensure no details of the service are overlooked, and align with business goals, I conducted the following design process for validation:
1. Conduct User Interview
- I interviewed 5 participants.
2. Summarize Personas and Craft The User Journey
- Summarize 3 personas.
- Identify pain points and opportunities.
3. Information Architecture and Wireframing
- Setting up information architecture.
- Create user flow and wireframes to make sure the interaction flow is smooth.
4. Prototyping
- Create a responsive website for the web, tablet, and phone.
5. Validate
- 5 people participated in the usability test and satisfaction survey.
Research and insight
Opening a bank account involves a careful procedure. Therefore, I consulted the different application methods provided by Singaporean banks for various types of applicants as a reference for web content. This ensures that the results obtained are practical and applicable. Below are the results and insights gathered from the research.
User Interview
Organizing and summarizing information for user is
important.
One of the interviewees said
"I hope the bank makes it clear upfront about the eligibility criteria and documents needed for the application. Once, I was halfway through applying and realized I didn't have all the required documents with me, so I had to give up."
Users also care a lot about benefits.
One of the interviewees said
"I often visit the bank website mainly to check the fixed deposit rates."
One of the interviewees said
"I prefer going to the bank in person because hearing directly from a bank representative gives me more confidence than searching on the bank's website myself. I just love to have double confirmation when handling banking issues."
Some users lack confidence in their judgments and may require additional assistance and guidance.
Offering both online and in-person consultation services can make users feel they have choices and increase their willingness to choose our bank.
Personas help me understand the project stakeholders better.
Persona
I defined 3 user archetypes and mapped them to their needs for opening a bank account. I hope to create unique user journeys through diverse personas, as each archetype has different needs when it comes to account opening. By doing so, I aim to discover more opportunities to assist a wider range of people.
Queueing at the bank can be a major hassle for users.
User Journey
I crafted 3 scenarios based on persona analysis, summarizing their pain points and opportunities. I will focus on the pain points that occur during the exploring application phase.
The pain points at this stage are:
1. Users can't find the information they’re looking for easily.
2. Fear of uncertainty when applying application online.
3. If unable to apply online, is there a solution to the problem of queuing at the bank?
The user flow allows me to ensure that users with different identity qualifications are all suitable for using this design solution.
User Flow and Wireframing
I'll start by analyzing the criteria for different application qualifications (identity, possession of Singapore documentation, age, etc.), and then consolidate them into a questionnaire that everyone can use.
Branding Choices And Design
I chose orange as the brand color for the bank because I wanted the overall look to be vibrant and youthful. Additionally, I created some icons and illustrations. Besides conveying their intended meanings, they also provide users with a visual anchor, drawing their attention.
Component
I use an atomic design approach for building components, which allows me to create web pages more quickly, reduce error rates, and increase overall consistency.
After obtaining the data and conducting research, I designed the landing page and account opening page for Unity Bank
Animated Prototypes
To demonstrate the process of users finding the most suitable way to open an account, I created animated prototypes. These prototypes cover four account opening methods, providing services for users with different identities and conditions.
In addition, I have also incorporated a process for schedule bank services appointment. Recognizing that some potential users are unable to apply for a bank account online, this service enables them to make appointments, avoid waiting in queues, and helps the bank retain customers.
Clickable Prototypes
I've created prototypes for 3 different sizes of websites. Here are the prototypes：
Here are my thoughts and references for the webpage layout:
Landing Page
Account Opening page
Figma Files
If you'd like to view high-resolution images and prototypes, feel free to visit my Figma file. Any questions or suggestions are welcome, please feel free to contact me.
Validation
The main goal is to assess whether the solution meets both user and business need:
Can users easily find the account opening method that suits them?
Does it help the company retain more users and increase the bank's user base, while also reducing manpower consumption?
After three weeks of user research, analysis, and design, I validated the assumptions and changes I had made. I did this by testing my clickable prototype with 5 new users. The results are:
1. Can you find the location to open an account through the landing page?
2. If you are under 16 years old, do you know how to apply for a bank account?
3. If you are a foreigner but have Singpass, do you know how to apply for a bank account?
4. If you are a foreigner without a work permit, do you know how to apply for a bank account?
5. If you are a foreigner but only have a Fin Number, do you know how to apply for a bank account?
6. Can you determine which account opening method suits you within 3 minutes through this webpage?
7. Were you able to successfully book an appointment for on-site account application services?
Next, I asked them if they would choose this bank based on convenience：
1. If the bank's offerings meet your needs, would you consider opening an account?
2. Would you consider the ability to schedule appointments to avoid queues important to you?
One of the interviewees said
"Although convenience is important, I also consider the bank's reputation. My card was once used for unauthorized transactions, but my bank eventually refunded the money. I'm grateful for their assistance, so I'll continue using this bank."
One of the interviewees said
"I would appreciate having a service to lock my account. With so many scams happening lately, security is my primary concern."
Therefore, a bank's reputation, willingness to take responsibility, and emphasis on security would be considerations for users. Meanwhile, convenient application services prevent users from giving up too easily. Both aspects complement each other to increase the bank's performance.
Key Learnings
The main goal is to assess whether the solution meets both user and business need:
· Time management is crucial
Although we're creating a responsive website, the interfaces for mobile devices and computer screens differ, and we can't directly apply the same design. Therefore, we need to allocate more time for development.
· Flexibility is key
The design process is not a linear journey. It's essential to revisit research at different stages to understand users' needs.
· Design System is important
Having a design system and component system is essential to ensure smooth production without repetitive revisions. Starting from small interfaces and gradually expanding to larger ones helps prevent design errors.
· Strive to benefit as many people as possible.
Human nature is complex, and considering many possibilities benefits the masses.
Next Project
Redesign AllTrails' paywall to increase conversion rates
Next Project
A Parking App Seamlessly Integrates With In-Vehicle Infotainment For Quick Payments By Drivers
