Private Banking App

Client:
HSBC, Brunel University
Location:
Brunel University
Disciplines:
UI Design
Protype:
Click here!

About the Project

As part of our coursework assessment, we were briefed by HSBC to create a banking app for their Private Banking customers. I decided to redesign their existing Private Bank app by applying a modern design style and adding new features, as well as re-working the current ones.

Disclaimer: The HSBC work implemented here has not been accepted for commercial use by HSBC.

Challenge

Create an interactive app to help visualise a client’s investments in intuitive, informative and elegant ways.

Outcome

An efficient and visually appealing app concept that offers a wide range of functionalities, while maintaining a highly professional visual identity.


Planning & Research

As part of the planning for this project, I conducted research into banking apps and developed a mind-map that explored what the app needed, such as the private and general banking features, design style and general application features that would be incorporated into the design.

From the research I deducted that the most important sections were the overview, holdings, stocks, transactions and settings, and on top of that I would be implementing messages. I decided to merge the overview and transactions together as the home page and translated the hierarchy into an app flow.


Moodboard

Next, I went onto Dribble and gathered bank app UI design’s as visual style references for my mood board. I decided to explore a minimalistic style with the incorporation of some of their secondary colours, to create a professional yet visually interesting application.


Wireframes

Once the base style and features of the app were established, I sketched out a few concepts for each of the pages and tweaked them until I was happy with the result. Then, I moved onto Adobe Xd to create the wireframes for the screens.

I set a twelve columns grid that would allow the maximum amount of flexibility when creating UI elements, and grant responsiveness if the elements needed to be resized for different devices (i.e. tablets, notebooks, etc). Further, the main navigation bar was kept at the bottom of the screen and it featured the most prominent features (Overview, Investments, Stocks, Messages and More).


Finalised Product & Features

Parting from the wireframes, I translated the layouts in conjunction with the minimal style into high fidelity UI screens. My goal for this project was to create something distinct from what had been made before by HSBC and other private banking apps. They usually tend to be monotone and lacking of elements that grant visual interest. Therefore, with my app, I decided to “bend” some of the HSBC brand rules and get creative.

I incorporated some of the infographic palette colours into the app as accent colours, which made the application visually more appealing, but still keeping the minimal HSBC style. The app has a set of main features that makes it stand out compared to others:

To offer a real app experience, my next step was to prototype the UI screens and implement real app-like transitions and interactions.


Digital Promotional Assets

After finalising the app UI design, I created mockups to visualise how the app could be promoted on the HSBC website, aligning with the minimalistic and elegant application style. The following concepts follow the idea of a “Reimagined” and “Redefined” Private Banking app by HSBC, targeted to their premium customers.


Retrospective

Challenges

My biggest challenge for this project was learning Adobe Xd. Initially, I was going to produce the screens in Sketch, as I was very familiar with the software. However, after researching on the beneficial features on both software, I learnt that Adobe Xd’s prototyping functionalities were better. Therefore, I decided to step outside of my comfort zone and learn the new software for this assessment. Although my prototyping skills were at a beginner level, I believe I produced a good interactive experience.

What can be improved?

Due to the project time constraints and excessive workload, I didn’t have the time to create user personas/scenarios or user test the application. While I was able to produce an app that met the brief requirements, If I had been able to gain a better insight at the user needs and obtain real user feedback, I would’ve been able to better tailor the application and enhance the UX/UI design based on the evaluation. In the future, I will make sure to always incorporate these steps in my projects.