BEACH HOUSE BANKING
BEACH HOUSE BANKING
Embedded Files
Tool: Adobe XD
Tool: Adobe XD
YEAR: 2021-2022
YEAR: 2021-2022
Beach House is an online banking platform designed with an emphasis on savings and ease of use. Beach House uses minimalism to avoid being overwhelming.
Beach House is an online banking platform designed with an emphasis on savings and ease of use. Beach House uses minimalism to avoid being overwhelming.
Responsibilities
Responsibilities
UX research, responsive UX/UI design, wireframing, and prototyping
THe Problem
THe Problem
On most banking websites, when users attempt to open or access a savings account, they are bombarded with dozens of additional things that they may or may not be looking for. A simple process somehow becomes an overwhelming process.
On most banking websites, when users attempt to open or access a savings account, they are bombarded with dozens of additional things that they may or may not be looking for. A simple process somehow becomes an overwhelming process.
The SOLUTION
The SOLUTION
An efficient and simplistic "less is more" UX flow to help users open and consistently engage with their savings account.
An efficient and simplistic "less is more" UX flow to help users open and consistently engage with their savings account.
Understanding the user
Understanding the user
During the UX research process, I wanted to focus less on what I could give users and more on what I could take away from them.
During the UX research process, I wanted to focus less on what I could give users and more on what I could take away from them.
During primary user interviews, all participants reported that they don't ever use and oftentimes don't ever consider using the options they're shown when checking their savings account via app or website.
During primary user interviews, all participants reported that they don't ever use and oftentimes don't ever consider using the options they're shown when checking their savings account via app or website.
User Pain Points
User Pain Points
Navigation
Most banking websites offer such a wide range of services, it can be difficult to locate the one you’re actually there for.
Simplicity
Oftentimes when users are looking to open one type of account, they are immediately offered tons of other esoteric services/accounts.
Accessibility
Users want their data delivered to them in the simplest manner possible. Sometimes complex charts, graphs, and data can be difficult for the average user to interpret.
User Journey
User Journey
the design
the design
Sitemap
Sitemap
I decided to offer only what's absolutely necessary and nothing more.
Wireframes
Wireframes
Because users often like to access their accounts from multiple platforms, I worked on designs for additional screen sizes to make sure the site would be fully responsive.
I prioritized straightforward button locations and the use of negative space so as not to overwhelm users.
Low Fidelity prototype
Low Fidelity prototype
I connected all of the screens involved in the primary user flow of creating a new account, transferring money, and setting a savings goal for both mobile and desktop wireframes
I connected all of the screens involved in the primary user flow of creating a new account, transferring money, and setting a savings goal for both mobile and desktop wireframes
desktop low fidelity prototype
desktop low fidelity prototype
mobile Low Fidelity Prototype
mobile Low Fidelity Prototype
Usability study parameters
Usability study parameters
Study Type: Unmoderated Usability Study
Location: United States, remote
Participants: 5 participants
Length: 15 Minutes
Usability Study Findings
Usability Study Findings
Navigation
Navigation
All users really liked that there were barely any options. This left little to no room for confusion and helped users to focus on completing their task as quickly as possible.
Simplicity
Simplicity
Even though it was just a wireframe, all users remarked that the amount of empty space was refreshing for both desktop and mobile.
Back Button
Back Button
During the study, one user noted that there was no way to return to the previous screen.
DESKTOP DESIGN SYSTEM
DESKTOP DESIGN SYSTEM
A clean and relaxing color palette for a clean and relaxing app. An exciting pop of green is included to keep things interesting.
Desktop Mockups
Desktop Mockups
Instead of a home page with a ton of options all at once, I chose to provide a sign in flow that presents your account options later.
To make the savings account flow easier, I chose to provide a main “savings dashboard” for users to view their account info and view the two choices of “transfer money” and “set new goal”
MOBILE DESIGN SYSTEM
MOBILE DESIGN SYSTEM
The mobile design palette differs from the desktop version just to break up the monotony for users who opt to save on both mobile and desktop.
Mobile Mockups
Mobile Mockups
High Fidelity Prototypes
High Fidelity Prototypes
Desktop High Fidelity Prototype
Desktop High Fidelity Prototype
Mobile High Fidelity Prototype
Mobile High Fidelity Prototype
Accessibility Considerations
Accessibility Considerations
1.
1.
One element per page establishes a clear visual hierarchy. All colors used were accessibility tested for contrast and found to be compliant with WCAG guidelines.
2.
2.
I used landmarks to help users navigate the site, including users who rely on assistive technology. I also included clear labels so that interactive elements can be read by screen readers.
3.
3.
I made the side menu permanent so that a clear navigation route is visible at all times.
THE OUTCOME
THE OUTCOME
After a second usability test of the hi-fi prototype, target users shared that the simplistic design was intuitive to navigate and that goals were quick to accomplish. All participants concluded that they would prefer the Beach House experience over their current banking app.
This design was concepted and completed for the Google UX Design Specialization
Let's Connect!
Let's Connect!
Page updated
Google Sites
Report abuse