top of page
AVA BANK Logo1.png
AVA illusstration.png

Case:

Role:

Year:

Tools:

Responsive banking application

UI Designer

2022

Figma

Illustration birds.png

GOAL

The client is a challenger brand looking to make waves in the financial world. They want an intuitive app that will help them stand out from the crowd. The goals is to create three responsive screens for tablet, mobile and desktop;

1. My accounts

2. Current Account

3. My Spending

BRAND TONE
Client had some established brand principles in place. Their tone and personality are as follows:


Playful: Using our product should be a joy for users. We’re not afraid to show some personality through color, animation and shape, but never at the cost of being intuitive.


Clear: We’re dealing with people’s money, so we need to present
information in a logical and uncluttered way.


Trustworthy: Users must feel they can trust our product.

1. MOOD BOARD & COMPETITIVE BENCHMARKING

Anker 1

A key consideration in any project is the tone, personality and values of the brand. As a mood board of design references is a valuable source of inspiration to these considerations, the first step were to create a mood board with the following objectives;

  • Research direct and indirect competitors and gather inspiration from the market

  • Create a mood board from the gathered references

  • Identify products that communicates the qualities: Playful, Clear & Trustworthy

  • Gather examples of UI elements with different interactive states and place them into your mood board

    • Look for form fields, buttons, tables, menus, and graphs – anything relevant to the design of a banking application

    • Consider the visual treatments to communicate different states for some of these elements

  • Research UI designs and fonts that match the brand values of Playful, Clear and Trustworthy

  • Gather references of color and shape used effectively by other brands and add them to your mood board

Direct and indirect competitiors

The first step in the process of creating AVA Bank was identify direct and indirect competitors, as well as gathering inspiration from the market.

The following direct and indirect competitors were identified: Monzo, Sparebank 1, Sparebank Møre, Vipps, Finn.no, N-go, Google Analytics, Snapchat, Nordnet, DNB, Acne Studios, Chanel, Coca-Cola, and Santander.

Other inspiration from the market was gathered from Dribble focusing on Flat Design illustrations.

Mood boards:

Typographic scale.png
Buttons & Interactive states.png
Anker 2
Colour palette.png
Anker 3

3. COLOR PALETTE

4. BUTTONS AND INTERACTIVE STATES

Anker 4

2. TYPOGRAPHY SCALE

5. ICONS & IMAGERY

Anker 5
Iconography.png

6. HEADERS, FOOTER, STATUS BAR

Anker 6
Anker 7

7. GRID SYSTEM

Grid for desktop, tablet and mobile screens:
•   8pt grid for each screen size
•   12 column grid for desktop
•   8 column grid for tablet
•   4 column grid for mobile

8. BRAND

AVA BANK Logo white.png

CREATION OF THE BRAND

After the process of gathering insights and inspiration from different sources; direct and indirect competitors, Dribble, and Pinterest, creating mood boards with the references, the next step were to create a brand which had the three values playful, clear and trustworthy.

 

COLOR

As all colors have different meanings behind them, I found myself selecting blue, as the color blue symbolizes trust, safety, loyalty and responsibility.

NAME

For the bank I desired a short name with meaning behind it. Just like many others, I do favor some names, amongst them are Ava. It's not a traditional name in Norway, but its short, snappy and it visually draws my attention. The name Ava is a girl's name and is known to mean 'birdlike', 'lively', 'life', 'water', island'. The meaning behind the name complimented the primary color of choice blue. As water is blue and the bird flies and lives his life in the blue sky, I assured that the name and the color complimented each other.

PERSONA

In order to let users relate to the bank on a more personal level than normal, I decided to put a face to the name. Ava is a young intelligent, browned hair girl who keeps track of her finances.

AVA illusstration.png
Illustration birds.png
AVA BANK Logo1.png
Anker 12

9. WIREFRAMES

Anker 8

Three responsive screens for tablet, mobile and desktop were designed for My accounts, Current account and My Spending.

Desktop

Tablet

Mobile

THANK YOU FOR VIEWING!

  • Email
  • Linkedin - Grå Circle
bottom of page