top of page

ui design case study

UX Design Institute Student Project | 2022 | UI Design

design brief summary

A fictitious challenger bank is entering the market and needs a design for their website and mobile app. Simple wireframes have been provided for three screens (Account Overview, Account Detail, and Spending Summary) and need to be transformed by applying a comprehensive design to the set of screens for a mobile app, tablet, and desktop (9 screens in total).

The bank would like the design to reflect three key words:

  • Clear

  • Trustworthy

  • Playful

approach

In order to come up with a design theme, first I needed to define what the design is about. The client shared three keywords she wanted the site to reflect.

Create an uplifting and energetic experience that grabs the attention of the user, and encourages them to explore the site

EXCITING

Ensure content is clear, easily understood and readily accessible to the user

INSIGHTFUL

Create a sense of direct connection to the user and enable them to leave the experience with specific action they can take

EMPOWERING

research

As a first step, I looked at competitor bank apps and websites, and created moodboards to gather inspiration on the:

  • Design keywords (clear, trustworthy, playful)

  • UI elements and screen states

  • Typography

  • Color palettes

Clear moodboard.png

Image of  mood boards for UI design case study project

design concept

I was inspired by the ideas of bees for this project, in what they represent, the color palette and using them as a way to bring a bit of playfulness.

3
1
2

Image of the logo designed for the project, highlighting the key elements of the design concept

1

Honey has a golden color, which pairs perfectly with a bank which protects and helps to grow money.

2

The bee and honeycomb iconography brought in an element of playfulness, and limited usage kept the overall feel of the bank to remain professional, while still standing out.

3

Bees are known as hard workers, which subtly translates to give users the idea that the Better Banking Bank would work hard for them. 

Color Palette.png
Typography.png

color palette & typography

The primary yellow-gold color was chosen to reinforce the concept of the bee motif and gold; the purple shading is used as an accent color to illustrate charts for improved visual accessibility. As for the font, it’s functional with a hint of playful, which is exactly what is needed for a site like this.

design concept evolution

FROM WIREFRAMES...
wireframe
wireframe
wireframe
wireframe
wireframe
Screens iteration.png
...THROUGH DESIGN ITERATIONS...
...TO FINAL DESIGN

Clear

Plenty of padding and white space, crisp and uncluttered visual design

tablet screenshot
computer screenshot
smartphone screenshot

Trustworthy

Professional design, UI elements such as lock symbol, visa card

Playful

I developed a honeycomb and bee motif to invoke ideas of honey as liquid gold; also, the ideas of as hard workers translates to a bank that will hard for the client

prototype

I added some simple prototyping to the wireframes to give a realistic feel of how the user would navigate through the site / application

Prototype Recording: iPhone, Desktop, iPad

bottom of page