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:

  1. Have you ever opened an online checking account before at a bank? If so, tell me more about that experience.
  2. What kind of tasks do you complete in online banking?
  3. 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.

Stickersheet

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.

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