Banking Responsive Mobile App

Mobile banking is the act of making financial transactions on a mobile device (cell phone, tablet, etc.). This activity can be as simple as a bank sending fraud or usage activity to a client’s cell phone or as complex as a client paying bills or sending money abroad. Advantages to mobile banking include the ability to bank anywhere and at any time. Disadvantages include security concerns and a limited range of capabilities when compared to banking in person or on a computer.

My role
UX/UI designer

Tools used
Figma, Adobe Illustrator, Adobe Photoshop

Scope
Apr. 2022 – Sep. 2022

What I did
Information Architecture, Mobile design, Sitemap, Usability Study, Product Design

The problem: How can we help people take care of their finances, have security and save time?

The challenge
I set out to develop a mobile application to help people take better care of their finances, have more security and save time on payments.

The Industry
According to a survey of 2,000 US adults by NerdWallet, the personal finance company, 33% of respondents said they used their mobile banking apps now more than before the pandemic, highlighting the effect of lockdowns on our shifting consumer behaviours.
A majority of 73% of mobile banking app users said their bank’s app was user-friendly and around 62% conduct their regular banking activities via a mobile app. Almost half of users (41%) don’t even feel the need to seek out their physical bank branches. In the long run, mobile app banking apps could render physical bank branches obsolete.
The shift toward mobile banking is being driven by several advantages such s 24/7 access to their accounts, no wait times, and easy movement of money between accounts. Other advantages include mobile banking apps offering higher interest rates due to their significantly lower overheads.

The Iterative Process of Designing Banking app

When working on Banking app, I have adopted the Double Diamond Strategy which breaks the design process into four stages: Define, Deliver & Develop. I found this process particularly powerful in validating design decisions, allowing enough space for creative exploration while giving a focus point to come back to.

DEFINE

Sitemap after Open Card Sort.

Before starting to work on initial sketches of each feature, I visualized the Information Architecture of the app into a sitemap, based on the user flows. The first version of the sitemap was tested through an Open Card Sort.

DEVELOP

Wireframing: From sketches to first clickable prototype.

Ones the Sitemap information architecture was decided, I began sketching paper wireframes progressing them.

Mobile Low-Fidelity Wireframes

Mobile High-Fidelity Wireframes

Usability Study:

Focusing on navigation and main features, I designed clickable prototypes for Mobile versions of the responsive web app. It was tested in a usability study, conducted remotely with 4 users. The issues, discovered in the usability test were addressed and fixed.

Problem

“You know that sometimes payment needs to be made quickly. I need to do it often so it’s good to have an option for that.” – Milen

Solution

Problem

“I think it is not appropriate for the menu bar to be on top. It makes more sense to put it below.” – Christina

Solution

Designing the Look & Feel of your Banking app: Style Guide

Banking app has a stylish and practical design that aims to help people use it easily and affordably.

I used the Style Guide as a starting point and developed a more detailed Design Language document. It’s purpose is to ensure consistency and communicate the language of Banking app app to designers and developers.

DELIVER

Final Showcase.

When I started working on this project, my goal was to create an application that would help people take better care of their finances, have security, save time on payments and keep up with the modern age of technology. The main goal was good menu navigation, clean look, easy access and modern design. I believe the Banking app has achieved the goals as it has its own distinctive style and branding but also offers an easy user journey.

Mobile Prototype