Ocean Bank
RESPONSIVE DESIGN
Project Details
Ocean Bank is a web app that was designed to improve the experience of signing up for a bank checking account, which can be long and tedious. It makes the sign up process easy and seamless, using modern UX principles. This was completed as a design challenge during my certification courses.
Challenge
Users need to open a new personal checking account but find the existing process long and time consuming.
Target Users
Busy professionals and retirees who need to open a new checking account.
Goal
To make opening a checking account a quick, smooth, and seamless experience.
Project weeks
July - August 2021
My Role
Sole UX Designer: user research, wireframes, prototypes, usability studies
Tools
Figma, Adobe XD
Preliminary Research
The first step I took for Ocean Bank was user research. I needed to better understand the challenges and issues that users face when opening a checking account, before I started to design.
Research methods implemented:
1. User Interviews
I conducted interviews on 5 participants during an unmoderated usability study.
Interview questions:
- Have you ever opened an online checking account before at a bank? If so, tell me more about that experience.
- What kind of tasks do you complete in online banking?
- What kind of issues have you had in the past with online banking?
Aggregated Empathy Map
After the interviews, an empathy map was created to compile users’ feelings, thoughts, and actions when it comes to opening a bank checking account. I was able to summarize all the user data in an easy format.
2. Competitive Analysis
I completed an overview of the competition’s strengths and weakness, and investigated what they do well and what they could do better.
3. Information Architecture
To better understand how I would design the overall experience a user would have, I created these diagrams. They show how the content is organized to help users understand where they are in Ocean Bank and where the information is located.
Sitemap
User Flow
The path taken in Ocean Bank to open a checking account. I’m showing 2 versions of user flows that I made because there were changes that popped up during the design process, and the user flow needed to be adjusted.
Before iteration:
After iteration:
User Personas
After synthesizing the data and research findings, personas were created as aggregate representations of the people I interviewed for Ocean Bank. Now I had a good understanding of users’ pain points, frustrations, and goals.
Ryder
Ryder is 28 years old and lives in Seattle with his spouse and two dogs. After graduating college he became a lab technician. On a daily basis, Ryder uses his laptop and mobile phone to complete emails, texts, and calls. Ryder uses his laptop when working at home and uses the mobile device when he’s out. Ryder’s looking to open a new checking account to complete his banking needs.
Ryder’s Goals
Open a new checking account.
To complete mobile deposits with the app.
Ryder’s Frustrations
“The set-up process on the bank website is really annoying.”
“I hate having to provide account numbers and other tedious details.”
Ryder’s Journey Map
Pearl
Pearl is a 67 year old single, retired school bus driver. She resides in Boston and grew up without using computers in her daily life. It’s been an adjustment to learn how to navigate websites but has received help from the library and family. Now she is able to go online to purchase things and pay bills. It is important to her to be able to do these tasks online to simplify her life.
Pearl’s Goals
Pay bills online and make purchases.
Set up a new checking account.
Pearl’s Frustrations
“I’m uncomfortable giving out my private information to the bank website.”
“The set-up process seems confusing with so many steps.”
Pearl’s Journey Map
Ideas & Strategy
Once I better understood the users and their motivations, frustrations, and goals, the next step I took was brainstorming strategies, insights, challenges, and any other ideas that came up that could shape and affect Ocean Bank as a business.
Design strategies
Create better information architecture than the competitors.
Elevate the use of branding to stand out from the crowd.
Offer all the same services on the app and website — similar use cases.
Key challenges
Keeping up with trends
How to meet changing user needs over time with new technologies.
Quick and simple
Making the setup process of a new checking account easy to complete.
Key question
How can we keep our banking users coming back?
Reward Customers
Create rewards programs that users can quickly locate on the screen.
Make Access Easy
Streamlined access to all services across all devices.
Design Phase
Now that I had ideas and strategies for Ocean Bank, I began sketching and designing wireframes. There were pretty significant changes made during this part of the process that in hindsight made me think about paying more attention to the overall flow. (This is also my favorite part of the design process)
Paper wireframes
I began designing lo-fidelity wireframes with the intention of creating all of the other bank pages. This quickly proved to be the wrong approach because of 1) time limitations, and 2) the scope of the project was for a personal checking account only.
Lo-Fidelity Wireframes before Usability Test
I refocused all of my efforts on designing the personal checking account flow. I ended up with 4 preliminary pages + 4 sign-up pages. I thought this had a clear flow and would work with users trying to open a checking account.
Testing the Product
Once I completed the final lo-fidelity designs (shown above), I tested them on users and completed a research plan and usability study.
A usability study was conducted to:
Examine if the navigation and ability to open a new account was easy to complete.
The results will:
Affect the design by focusing on the number of steps involved in the checking account set-up.
Affinity mapping:
I used this approach to organize the data into groups with common themes. I love doing this in all my projects as it’s a really easy way to see patterns in the data.
Affinity Map
Research questions
Is the user able to find the checking account section on the website easily?
Can the user choose what type of checking account they need easily?
Is there anything the user finds challenging about the set-up process?
Can users easily navigate to different parts of the website from the homepage?
User Testing results
Visual design
The homepage layout needs to eliminate certain elements to decrease visual clutter.
Navigation
The checking account page needs to be more intuitive by increasing the font size of important links and condensing other pages.
Info Architecture
Some pages can be eliminated and information condensed to other areas to decrease the time it takes to begin the set-up process.
User flow
There were too many steps in the process which could contribute to user abandonment.
So, here’s what I did
It turned out that users thought there were too many pages to click through. (We definitely don’t want that). I cut down the number of screens by merging the pertinent information and value proposition to the first two pages (circled in blue, below). Now instead of 8 pages, users only had 6 pages to click through to open a checking account for a simpler and quicker experience.
Hi-Fidelity Design
Once I had all of the results of the user testings, which resulted in a decrease in the number of pages, I integrated that information and completed the hi-fidelity designs. Further down in this section there are interactive prototypes.
Mockups
The Solution
Users were now able to complete the checking account sign-up process quickly in a very simple user flow. The time spent completing the sign-up process took 50% less time for users.
Desktop Prototype
Mobile Prototype
Style Guide
Ocean Bank’s collection of visual styles and reusable components.
Conclusions
What I missed:
I didn’t ask if there was anything the users find challenging overall. I didn’t account for some confusion on the preliminary pages before the user gets to the set up process. I was too focused on the pages I thought were the most important, and didn’t take enough time to look at the bigger picture of how the pages flow together.
What I learned:
I learned how important it is to iterate based on the findings from usability studies. One can never assume what the user wants; testing and research must be conducted to achieve the best results for the project.
Next steps if I had more time:
- I would conduct another round of usability studies to determine how well the hi-fi product works with users.
- I would add more accessibility options to the web design and mobile app.
- Continue to develop the other pages of the website including savings, credit cards.
Other UX Case Studies
Safe & Sound
UX | Service Design
Bloom
UX | Native App Design
Sweet Tooth Bakery
UI | Personal Project