Digital product design

Northwind

Northwind

Northwind

X 0.00

Y

06

northwind.case

Everyday banking, with the important things up front.

Everyday banking, with the important things up front.

ROLE

Digital product design

TYPE

Concept project

FOCUS

Hierarchy & everyday actions

DELIVERABLES

Mobile interface concept

DELIVERABLES

Mobile interface concept

northwind.case

northwind.case

var(--variable-X5X75_2Th)

Case notes

The story.

The story.

The story.

overview.txt

overview.txt

Northwind is a self-initiated mobile banking interface concept. The project explores how account information, everyday actions, and card controls can share a clear visual hierarchy across light and dark presentations.

challenge.txt

challenge.txt

Keep the account overview easy to scan while making common actions visible. A financial interface needs to distinguish information, action, and confirmation without relying on visual noise.

Case properties

Direction

Decisions

Scope

Warm ivory and deep navy provide two related interface surfaces. Cobalt card graphics create a recognizable focal point, while generous spacing and direct labels organize the account experience.

Interface system

Type & color.

Type & color.

Type & color.

Typography

Typography

Aa

Quiet interface type, clear numbers

A clean sans serif supports compact navigation and larger numeric information. Weight, spacing, and alignment establish hierarchy without introducing another decorative type style.

Colors

Colors

Navy

Ivory

Cobalt

Terracotta

Details

Up close.

Up close.

Up close.

account-overview.webp

account-overview.webp

var(--variable-nA2STo8rK)

The account overview

Balance, card, and everyday actions create a clear starting point.

transfer-review.webp

transfer-review.webp

var(--variable-FPmeISy9I)

Before you confirm

A focused review screen brings the recipient and amount together.

payment-card.webp

payment-card.webp

var(--variable-tvhg7nYAG)

A recognizable card

A cobalt gradient gives the card its own identity within the wider system.

card-management.webp

card-management.webp

var(--variable-fLWS0tdr0)

Two related modes

Light and dark presentations keep the same structure and priorities.

© 2026 Ava Marlow. Fictional designer. Self-initiated concepts.

Create a free website with Framer, the website builder loved by startups, designers and agencies.