E-Wallet – know where your money stands, before it moves

In brief

The brief was a new look for an established wallet. The product led with accounts and products, so a balance showed what people had, but not where they would stand after the next payment.

1. Changed what the product leads with: the user’s financial position, not the list of accounts.
2. Built one way of reading money over time, NOW → NEXT → LATER, shown as the Financial Horizon.
3. Delivered it as a system: 24 screens, 4 edge states, 5 component sets and a prototype.

Under NDA Release details and results are covered by a non-disclosure agreement.

What I would measure is set out in the reflection.

01 · Overview

I first worked on E-Wallet at Intek in 2019 and came back in 2024 on a short contract to rebrand it. I used the rebrand to change what the product leads with: not accounts and products, but the user’s financial position and what is about to happen to it.

Context

Existing financial product

Earlier Intek product knowledge

2024 return engagement

Scope

Product rebrand

Financial UX

Information architecture

Interaction design

Design system

Prototype

Narrated demo

Core question

Where do I stand now?

What happens next?

What does that leave me with later?

Signature idea

NOW → NEXT → LATER

Financial Horizon

Position before products

02 · Product history

I was returning to a product I already knew: its workflows, its patterns and the visual language it had collected over several generations. The archive shows that honestly. The earlier screens and the first sketches are shown as they were, not restyled. The 2024 work was a return engagement with an existing product, not a portfolio redesign.

A rebrand was the brief. A coherent financial system was the opportunity.

03 · Problem + principles

Accounts, transactions, payments, spending, cards and scheduled money were each correct. The picture was still left to the user. The product had the information. The person did the maths.

The product didn’t need another skin. It needed one language.

Position before products

Start with what the user’s money means, not the bank’s internal product structure.

Future before surprise

Surface important commitments before they happen, while there is still time to act.

Recognition before metadata

Lead with merchant and human context. Technical banking language is secondary.

Confidence before confirmation

Build certainty through progressive disclosure rather than warning overload.

04 · Users + journey

I framed the work around four behaviours and not invented personas: checking, planning, acting and investigating. The main journey runs from “What do I have?” through “What changes before month end?” to “What changed?” after an action.

05 · Information architecture

Five destinations follow intent: Home for position, Activity for what happened, Plan for what comes next, Cards for controls, Profile for settings. Transfer is a task that cuts across them, not a sixth section.

06 · NOW → NEXT → LATER

One position at three moments. Now: 18,420 DKK available. Next: 8,660 DKK left after 9,760 DKK of commitments. Later: 41,060 DKK by 3 November, after salary. The rebrand became easier to reason about once every screen answered one of these three questions.

07 · Financial Horizon

The Horizon is the signature feature. It plots the same position across dated events: rent on Friday takes it to 9,561, the low point is 8,886 on 28 October, and salary on the 30th lifts it to 41,286. The line is drawn from those values. Every bend is an event the user can open.

The line is not decoration. It is the model.

08 · The product journey

The same logic carries into action. A transfer is one decision at a time, and recipient and amount stay on screen through review, Face ID and confirmation. Afterwards a payment reads as a merchant, “Joe & The Juice”, before the bank code. Spending leads with what changed.

09 · Selected UI

Eight of the twenty-four screens. Each one leads with a single number or a single sentence, and each one answers one of the three questions: now, next or later.

10 · Edge states

Four edge states are designed, not assumed: loading, offline with a timestamp, a transfer over the limit, and an empty search. Each one says plainly what the product knows and what the user can do next.

11 · Design system

Carbon, warm paper and one mint signal. Instrument Sans for hierarchy, IBM Plex Mono for time and state. The 24 screens are built from the same components and colour tokens, with 16 text styles, so the prototype, the case study and the film all draw from one source.

12 · Reflection

Rebranding an established product is not a blank canvas. The decision that mattered was what to lead with. Moving from products to position made the visual change mean something. What I would measure next: how often people open the Horizon before a transfer, how many transfers are abandoned at review, and how many support contacts start with “where did my money go”. These are proposed measures, not results. Release details and results are covered by a non-disclosure agreement, so none are shown here.

A rebrand was the brief. A clearer way to see money over time is what came out of it.