Banking App

With WyePay, users can effortlessly transfer money, check their account balance, view transaction history, and manage their finances—all from the convenience of their smartphone.

Project Overview

This case study showcases a banking app designed as part of the Google UX Design Certificate program, where I applied user-centered design principles to create an intuitive and accessible app.

Role

UX Designer (Responsible for user research, wireframing, prototyping, visual design, and usability testing)

Problem Statement

Managing daily finances, such as transferring money, checking account balances, and tracking recent payments, can be frustrating with outdated banking systems. Many users also dislike the inconvenience of visiting a bank in person and waiting in long lines for simple tasks. There is a need for a digital solution that provides quick, reliable, and hassle-free access to essential banking features.

Target Audience

Adults aged 18-45 who are tech-savvy and prefer managing their finances digitally. This includes professionals, students, and young families. These users value speed, transparency, and the ability to track their financial activity on the go.

Design Thinking Process

The design process followed key UX principles, starting with user research to identify pain points and needs. Insights guided the creation of personas and user flows, ensuring a user-centered approach. Wireframes and prototypes were developed and refined through iterative feedback. Finally, usability testing validated the design, ensuring it met user expectations for a seamless mobile banking experience.

Empathize

Define

Ideate

Prototype

Test

Empathize

Research Conducted

Competitive Audit:

Affinity Diagram:

User Persona:

Empathy Map:

User Journey:

Surveys:

Define

Key Challenges

User Trust:

Accessibility:

Complexity:

Information Architecture (IA) Sitemap

The Information Architecture (IA) sitemap was developed to define the structure and flow of the app’s core features, ensuring a logical and intuitive user experience. It outlines the main sections, including Home, Balance, Transfer, Payments, Cards, Help, and Account, as well as the nested options within each, such as Pay Bills, Favorites, and Statements. The sitemap provides a clear visual representation of how users will navigate through the app, from the bottom navigation bar to the deeper pages within each section. This structure was designed to support ease of access to key functions like money transfer, account management, and support, while keeping the app clean and organized. By creating a simple, hierarchical structure, I aimed to ensure users could easily locate features without feeling overwhelmed or lost.

Ideate

Initial Design Strategy

Based on research, my design strategy focused on the following principles:

Simplicity:

Accessibility:

Personalization:

Sketches & Wireframes

User Flow:

The user flow illustrates the steps a user takes to complete a money transfer within the app. Starting from opening the app, the user navigates through the homepage, selects the money transfer button, and is prompted to choose a beneficiary. They can select an existing beneficiary or return to the transfer prompt. Once the beneficiary is chosen, the user proceeds to the money transfer screen and confirms the transaction, ensuring a smooth and efficient process.

Wireframes:

The wireframes showcase the progression from initial paper sketches to low-fidelity designs created in Figma. These layouts focus on structuring the key screens, such as the homepage, money transfer, and confirmation screens, ensuring the design aligns with the user flow and provides a clear and intuitive interface.

Unmoderated Usability Study

Purpose:

To evaluate the usability and functionality of WyePay, an unmoderated usability study was conducted with 5 participants. The goal was to identify pain points in key user tasks and gather feedback to refine the app.

Tasks:

Key Findings:

Participants found the navigation from the homepage to the money transfer screen intuitive, describing it as « easy to follow. »

Challenges:

Actionable Insights:

Prototype

Hi-Fi Prototype

I created an interactive high-fidelity prototype using Figma that included the primary features such as checking account balance, transferring money.

  • Core Features in the Prototype:

Test

Moderated Usability Study

To evaluate the effectiveness of the high-fidelity prototype and ensure the design addressed user needs, I conducted usability testing with a focus on key user tasks. The goal was to validate design improvements, uncover any remaining usability issues, and identify opportunities for further refinement.

Participants interacted with the high-fidelity prototype in a simulated environment and were asked to complete core tasks, such as:

Key Findings:

Conclusion

The development of WyePay has been a comprehensive journey through research, ideation, prototyping, and testing, with user needs at the core of every decision. By addressing key challenges such as simplifying the money transfer process, improving profile management, and refining navigation, the final design ensures a seamless and intuitive experience for users.

Through the unmoderated usability study, valuable insights were gathered during the low-fidelity prototyping phase, which informed early design revisions. Further testing with the high-fidelity prototype validated these changes and highlighted minor areas for improvement, ensuring the app meets user expectations.

Get in touch

Reach out and let's make things happen.