Heraldeecreates
Purposeful Designs
BECU Business Banking App
Redesign Challenge
Role
UX/UI Designer
Timeline
Two Weeks
September 2022
Tools
Figma
Overview
BECU, or Boeing Employees Credit Union, is a not-for-profit financial institution that has served the Pacific Northwest communities for 75 years. This redesign challenge focuses on the Business Mobile Banking App for BECU. This project aims to update the app’s existing UX/UI design to provide solutions to common user pain points.
User Research
To better understand the needs and experiences of the users, I gathered and analyzed reviews from the app store. By identifying common themes and patterns in these reviews, I can gain valuable insights that will inform the redesign of the application. Using this process of empathizing and understanding user needs, I aim to create a more user-friendly product that better benefits the users.
Problem Areas
Based on the data gathered, I identified the app’s five most common problem areas.
Personas
After the user research process, I gained a deeper understanding of users’ goals and frustrations. I then created two personas that embody their characteristics and needs. These personas will serve as a reference as I design to improve the functionality and user experience of the app.
Updated Sitemap
To improve the organization and functionality of the app, I redesigned the sitemap. The new sitemap shows the relationships between different pages and features, making it easier for users to navigate and find what they need.
User Flow
I created a user flow to understand how each persona navigates the application to achieve their goals. This process helped me visualize the steps and pathways needed as each persona interacts with the app. This process also helps in identifying potential roadblocks and areas for improvement.
Paper Wireframes
I created paper wireframes and experimented with different layouts. Through this process, I identified the most efficient solutions for organizing information that will be the most user-friendly and improve the app’s usability.
Visual Design
I updated the visual design by combining the brand’s original colors with new lighter color schemes. The new colors were added to give a fresh look on the app’s interface.
Design Solution
Login Screen
I redesigned the login screen to improve its balance, proportion, and colors. I also simplified the layout and added a “Create an Account” option which was missing in the original design.
Home Page
In the original design, all accounts were displayed on a single page, which could be overwhelming and confusing. To improve the organization and usability of the application, I separated the accounts into different categories. This update allows users to easily find and manage their accounts, such as deposits and credit cards.
Also, since this is a business banking app, I added the business’ name as a home page greeting. This feature helps users identify which account they are in, especially since users can have multiple business accounts.
Account Page
Once the user selects an account, an account page opens. This page shows a snapshot of important account information and a preview of account activity. At the bottom of the page, I added the account maintenance section.
This section is a one-stop shop for account maintenance, such as adding or removing tags/categories, updating debit card status, downloading documents, and more.
Menu Bar
The menu was also updated. I changed the icons and opted for simpler designs. The captions were also condensed into one row for ease of reading.
The header was also redesigned to include profile and messaging sections.
Profile and Messaging
The profile icon directs users to their profile page. On this page, users can send secured messages, update personal information, account settings, and more.
The chat support was included so users can directly message the contact center, which reduces the frustration of getting Technical Support.
Transfer
The transfer page can be accessed using the transfer icon. This page consists of of standard transactions, including wire transfers and Zelle.
The transaction history and transfer settings can also be accessed in one location.
Deposit
The mobile deposit page can be accessed using the Deposit icon in the middle of the menu. In addition, this page was redesigned to include important user references such as deposit history and FAQs.
Bill Pay
This page contains essential information, including transaction history, recurring payments, and payee directory. Adding and editing payees are also easy to find since it is all in one page.
Additional Features
I designed the “more” icon on the menu to show additional products and services. These include a branch locator, online banking services, and a promotions section.
Hi-fi Prototype
Conclusion
Since this is my first redesign project, I learned a lot in the process. First, I learned how to tailor designs based on existing company branding. Second, having a user-centered approach enabled me to create additional features that were not catered on the original designs. For example, I added a section called “Business Services.” Adding this feature makes the design more purposefully tailored and thoughtfully created for the users.
Due to time constraints, I wasn’t able to test this project’s prototype. If given more time, I would love to get user feedback to understand further how to improve the application.
Overall, I am incredibly proud of the results. Creating designs for a financial institution was a fun and exciting UX/UI design challenge, and I am extremely pleased with how it turned out.
