Banking App | Mysite

UI Certificate Design Project

Overview

As part of the Professional Certificate in UI Design from the UX Design Institute, the following design brief was issued for the project:

"Create three screens for a new banking app that is soon to be launched. The bank would like the brand's designs to communicate the following qualities: playful, clear, trustworthy. The screens for My Accounts, Current Account and My Spending should be responsive and designed across desktop, tablet and mobile."

Received grade in project: 85%

Competitive
Benchmark

Analysis of 10 other companies' designs including leading direct competitors in the industry, along with a few other non-direct, non-banking designs.

Designs are noted by how competitors succeeded and failed in relation to UI/UX best practices and by how they communicate the qualities (playful, clear and trustworthy) desired in the brief.

Competitive benchmark

Design decisions

Typography

Open Sans embodies simplicity and clarity.

The icons used are rounded and soft which suggest a softness and friendliness for the brand.

Typography breakdown by device

Colour scheme

The blue represents trust, honesty and reliability. While the splashes of teal and orange add a playful and modern twist.

The background colour is an off-white which is less harsh on the eye compared to pure white.

Colour scheme

Accessibility

Minimum font size used on all screen types is 14px (16px on mobile).

A contrast of at least 4.5:1 was used for all informational and functional elements, with problematic colour combinations avoided.

WebAIM contrast checker

Information Architecture

Following the conventions of peers gathered in the competitive benchmark, the screens were ordered, structured and elements sized according to the main user goals.

Lo-fi prototype with screen hierarchy

Lo-fi prototype

Lo-fi

Screens were designed first in black and white to allow for speedier idea generation and to ensure elements and components are properly spaced and functional without colour.

Lo-fi prototyping

Final prototype

Intuitive left navigation with hierarchy defined, top to bottom, by the most used page
User profile and user preferences available through the user icon
Primary information for the user displayed most prominently in the screen's hierarchy
Primary actions displayed in a colour that strongly contrasts with the screen
Logout button, consistently placed across all screens away from other UI elements
Third column allows for tertiary information to be displayed
Secondary shortcuts allow users quick access to popular screens/actions