Lumen – Financial Clarity

Product Design · FinTech · Prototyping

Making personal finances understandable at a glance.

Role
Visual, UI & Interaction Designer
Context
Concept Project
Focus
UI Design, Interaction Design, Information Architecture, Visual Design, Data UX
Hero visual — screenshot, video or prototype capture
Overview

Lumen is a digital product concept focused on financial clarity.

The project explores how complex financial information can be translated into an interface that feels understandable, structured and approachable — helping users see what matters without overwhelming them with data.

For me, the project was an opportunity to move beyond visualising information and think more deeply about how users interpret it, navigate it and make decisions based on it.

If someone opens Lumen for five seconds in the morning, what should they understand?

The Problem

Financial interfaces often contain large amounts of information competing for attention. Numbers, categories, transactions and recommendations can quickly create cognitive overload.

The problem was therefore not simply to display financial data, but to establish a clear hierarchy: what does the user need to understand first, what requires attention, and what can remain secondary?

This became the guiding question throughout the design process.

Information Hierarchy

Rather than deciding screen by screen what to show, I used a three-level priority framework to sort every piece of information before any layout work began:

Primary

What the user needs to understand within the first few seconds — the current state, at a glance.

Secondary

What supports that understanding once it's needed — context, comparisons, recent activity.

Detail

What matters only when actively sought — full transaction history, granular breakdowns, settings.

Exploration: Three Ways In

Before settling on a layout, I considered three different entry points a dashboard could prioritise, using the hierarchy above as the test in each case:

  • A — Balance-first: lead with the number itself — simplest, but tells the user nothing about direction or trend.
  • B — Cashflow-first: lead with money moving in vs. out — more actionable, but requires more visual complexity to read at a glance.
  • C — Insight-first: lead with a single generated observation ("You're on track this month") — fastest to parse, but hides the underlying numbers the user might actually want first.

Decision: B (cashflow-first) fit the five-second test better than A, without requiring the added complexity C would need to stay trustworthy — direction of money matters more at a glance than the balance alone, and doesn't require interpreting a generated statement.

This was a reasoning exercise to choose a direction, not a set of designed and tested screens — the visual comparison below is still pending.

Three dashboard directions (A/B/C) — comparison sketches, not yet designed.

Approach

I started by breaking the experience down into its main information needs and user actions.

Instead of designing individual screens in isolation, I considered how information should progressively appear throughout the experience and how users could move from understanding their current situation to taking an action.

I explored different structures, flows and interface patterns before translating the strongest direction into a more detailed prototype.

Throughout the process, I used visual hierarchy as a UX tool: typography, spacing, colour and grouping were not only aesthetic decisions, but helped communicate relationships and priorities within the information.

Design

The resulting interface is intentionally calm and structured.

Important financial information is surfaced first, while secondary details remain accessible without dominating the experience. Clear grouping and consistent interaction patterns help users build an understanding of where they are and what they can do next.

The visual language supports the idea of financial clarity through reduced complexity, deliberate use of colour and a strong typographic hierarchy.

Rather than presenting every available piece of information equally, the interface prioritises what is relevant in context.

Desktop and mobile dashboard screens — not yet designed.

My Role

My contribution combined visual design, UI design and interaction design.

My background in graphic design helped me create a strong information hierarchy and coherent visual system. At the same time, I applied Interaction Design principles to think about user flows, navigation, information architecture and the relationship between individual interface states.

This combination became an important part of the project: using visual design not as decoration, but as a way to support understanding and interaction.

What I Learned

Lumen strengthened my understanding of the difference between making information look clear and making it feel clear to use.

A visually organised interface does not automatically create a good user experience. The underlying structure, prioritisation and interaction flow need to support the user's mental model as well.

The project helped me become more intentional about the reasoning behind design decisions and marked another step in my transition from primarily visual design towards UX and Interaction Design.

Skills

UI DesignInteraction DesignInformation ArchitectureVisual DesignData UX