JOOD BANK

JOOD BANK

JOOD BANK

Sole UX Designer
3 weeks
Responsive Web Design

Research

An online banking platform that enables users to easily open and manage their personal and business bank accounts

Problem

To streamline and simplify the process of opening a bank account for customers who prefer digital solutions and value convenience and efficiency.

Goal

The primary goal of this project is to develop a user-centric online banking platform that empowers customers to easily open accounts, manage their finances digitally, and access personalized banking services, all while enhancing their overall banking experience and fostering customer loyalty.

User Research

In order to better understand user frustration, needs, and requirements, I conducted user research through interviews and surveys for my project. My objective was to gain insights into the needs and preferences of users in order to improve the design of my responsive website.

I identified several key pain points and challenges:

  • Time-consuming processes.

  • Limited accessibility.

  • Lack of personalization.

  • High fees and hidden costs.

These insights will guide the development of my responsive website, ensuring it addresses the specific needs and concerns of my users.

Users

As the sole UX Designer on this project, I spearheaded all user research efforts. This included conducting 12 in-depth interviews with potential bank customers to understand their motivations, anxieties, and preferred methods for opening a bank account. I developed and refined the interview guide, ensuring it elicited insightful responses about their digital literacy, comfort levels with online transactions, and desired support mechanisms. By meticulously analyzing interview transcripts and identifying key themes, I was able to inform design decisions that prioritized user needs and created a seamless and accessible account opening experience.

Meet Christina who is a tech-savvy professional and needs to open a new bank account quickly and easily without visiting a branch because she is frustrated with the traditional banking process, which involves long lines, complex paperwork, and limited access to banking services outside of regular business hours.

User journey map

Mapping out the flow of Mike's user journey to illustrate how Christina behaves, feels, and what she thinks while accomplishing her goals in order to address pain points or provide moments of delight.


Design Wireframes

Begun with creating a user flow:

Paper Wireframes

After conducting user research and identifying the core features, I started sketching the first wireframes using pen and paper, I have sketched out different versions of each screen on paper. Additionally, I have begun creating designs for various screen sizes to ensure that the website is fully responsive..

Digital Wireframes

To make the digital wireframes, I started by putting my ideas on paper. Then I began to work on the high-fidelity wireframes in Figma. After several iterations, I came up with these wireframes. I have also begun working on digital wireframes for additional screen sizes to ensure that the site will be fully responsive.

You can view the Lo-fi Prototype - Desktop version here.

You can view the Lo-fi Prototype - Tablet version here.

You can view the Lo-fi Prototype - Mobile version here.


Design Mockups

Started by creating a "Sticker Sheet":

Usability study: findings

Now that I have received the key insights from the unmoderated usability study that I have conducted, let's review the findings and identify the specific problems that a designer can address.

Here are the findings from the usability study:

Iterating on Design

After reviewing insights from usability studies, I have made design changes such as (adjusting typography preferences to improve readability on tablet and mobile versions), (adding more detailed transfer’s confirmation page and ability to download as statement), and making text only partially displayed in the dashboard’s items menu, as this would suggest that there are additional items available for navigation.

Hi-Fi Prototype

After finalizing the low-fidelity wireframes, I worked on creating the final designs and High-Fidelity Prototype with the goal of making them simple and intuitive. The main color theme I used was purple to evoke a sense of luxury and sophistication in the users.

You can view the Hi-fi Prototype - Desktop version here.

You can view the Hi-fi Prototype - Tablet version here.

You can view the Hi-fi Prototype - Mobile version here.


Accessibility Considerations


Takeaways


UI Design

THANK YOU

Other Projects

Let's Connect!

Let's Connect!

Let's Connect!

© Copyright 2025. All rights Reserved.

© Copyright 2025. All rights Reserved.

Create a free website with Framer, the website builder loved by startups, designers and agencies.