Codex & Figma Exploration: Designing a Smarter Banking Experience

Codex & Figma Exploration: Designing a Smarter Banking Experience

A product design exploration investigating how AI can accelerate ideation and interface production while keeping strategic product decisions in the hands of the designer.

This was an AI-assisted product design exploration created with Codex.

I used Codex to explore interface directions, extend screens, test responsive layouts and generate component variations. But the project was not a clean, one-click AI workflow.

The process was messy. Codex helped with speed, but it also introduced inconsistencies, broke layouts and required constant design review. Because of that, I decided to frame this case study honestly: not as a perfect banking app, but as an exploration of a product idea developed through human decision-making and AI-assisted iteration.

A banking app should not only show what happened. It can also help users understand what is likely to happen next.

This project started with a very simple observation:

A bank balance does not tell the full story.

Seeing £2,400 in an account does not automatically mean that £2,400 is safe to spend. There may be upcoming bills, subscriptions, scheduled payments, rent, credit card repayments or personal saving goals waiting in the background.

I wanted to explore how a banking dashboard could move beyond showing static account data and instead help users understand their financial situation more clearly.

The core question became:

How much can I safely spend, and how much could I realistically save?

PROBLEM

Users can see their account balance, but they struggle to understand whether they are financially safe for the rest of the month.

The interface shows money, but it does not clearly explain what this money│means in context.

The experience was divided into two clear layers, This supports low-risk tasks while keeping the secure flow clearly separated:

  1. Pre-login lobby (public)

    A lightweight, non-sensitive space with limited quick actions (e.g. tickets, BLIK, ATM locator, card freeze) and a single Log in entry point.

A focused entry point into authentication:

• Primary action: Log in (biometrics)
• Secondary option: Use PIN instead

Clear security reassurance. This allows fast access for returning users while preserving compliance-required fallback.

UX & COMPLIANCE RATIONALE:

• PIN-first authentication ensures predictability, auditability, and universal access
• Biometrics act as an accelerator, not a replacement
• Clear zone separation reduces fraud risk and improves perceived security

ACCESSIBILITY

• Large touch targets (≥48px)
• High contrast and readable typography
• One-handed use
• Screen-reader friendly PIN input

OUTCOME

The final concept delivers a calm, predictable, and compliant login experience that reduces cognitive load and scales well across European markets.

Instead of visual novelty, the design prioritizes trust, clarity, and regulatory readiness key qualities for enterprise banking products.


USER GOALS

  • Help users feel more in control of their finances and avoid unpleasant surprises.

  • Help users understand their financial situation and make confident spending decisions.

The experience was divided into two clear layers, This supports low-risk tasks while keeping the secure flow clearly separated:

  1. Pre-login lobby (public)

    A lightweight, non-sensitive space with limited quick actions (e.g. tickets, BLIK, ATM locator, card freeze) and a single Log in entry point.

A focused entry point into authentication:

• Primary action: Log in (biometrics)
• Secondary option: Use PIN instead

Clear security reassurance. This allows fast access for returning users while preserving compliance-required fallback.

UX & COMPLIANCE RATIONALE:

• PIN-first authentication ensures predictability, auditability, and universal access
• Biometrics act as an accelerator, not a replacement
• Clear zone separation reduces fraud risk and improves perceived security

ACCESSIBILITY

• Large touch targets (≥48px)
• High contrast and readable typography
• One-handed use
• Screen-reader friendly PIN input

OUTCOME

The final concept delivers a calm, predictable, and compliant login experience that reduces cognitive load and scales well across European markets.

Instead of visual novelty, the design prioritizes trust, clarity, and regulatory readiness key qualities for enterprise banking products.


ASSUMPTIONS

  • Users prefer clarity over complex analytics.

  • Users want reassurance and predictability.

  • Users need quick access to upcoming obligations.

  • Users want guidance instead of raw numbers.

The experience was divided into two clear layers, This supports low-risk tasks while keeping the secure flow clearly separated:

  1. Pre-login lobby (public)

    A lightweight, non-sensitive space with limited quick actions (e.g. tickets, BLIK, ATM locator, card freeze) and a single Log in entry point.

A focused entry point into authentication:

• Primary action: Log in (biometrics)
• Secondary option: Use PIN instead

Clear security reassurance. This allows fast access for returning users while preserving compliance-required fallback.

UX & COMPLIANCE RATIONALE:

• PIN-first authentication ensures predictability, auditability, and universal access
• Biometrics act as an accelerator, not a replacement
• Clear zone separation reduces fraud risk and improves perceived security

ACCESSIBILITY

• Large touch targets (≥48px)
• High contrast and readable typography
• One-handed use
• Screen-reader friendly PIN input

OUTCOME

The final concept delivers a calm, predictable, and compliant login experience that reduces cognitive load and scales well across European markets.

Instead of visual novelty, the design prioritizes trust, clarity, and regulatory readiness key qualities for enterprise banking products.


PAIN POINTS

  • "I have money, but I don't know how much I can safely spend."

  • "I'm afraid I'll forget about an important payment."

  • "I don't have time to analyze charts and numbers.

  • "I just want to know if everything is under control."

The experience was divided into two clear layers, This supports low-risk tasks while keeping the secure flow clearly separated:

  1. Pre-login lobby (public)

    A lightweight, non-sensitive space with limited quick actions (e.g. tickets, BLIK, ATM locator, card freeze) and a single Log in entry point.

A focused entry point into authentication:

• Primary action: Log in (biometrics)
• Secondary option: Use PIN instead

Clear security reassurance. This allows fast access for returning users while preserving compliance-required fallback.

UX & COMPLIANCE RATIONALE:

• PIN-first authentication ensures predictability, auditability, and universal access
• Biometrics act as an accelerator, not a replacement
• Clear zone separation reduces fraud risk and improves perceived security

ACCESSIBILITY

• Large touch targets (≥48px)
• High contrast and readable typography
• One-handed use
• Screen-reader friendly PIN input

OUTCOME

The final concept delivers a calm, predictable, and compliant login experience that reduces cognitive load and scales well across European markets.

Instead of visual novelty, the design prioritizes trust, clarity, and regulatory readiness key qualities for enterprise banking products.


BUSINESS GOAL

Increase engagement and strengthen trust by helping
users better understand their financial situation.

The experience was divided into two clear layers, This supports low-risk tasks while keeping the secure flow clearly separated:

  1. Pre-login lobby (public)

    A lightweight, non-sensitive space with limited quick actions (e.g. tickets, BLIK, ATM locator, card freeze) and a single Log in entry point.

A focused entry point into authentication:

• Primary action: Log in (biometrics)
• Secondary option: Use PIN instead

Clear security reassurance. This allows fast access for returning users while preserving compliance-required fallback.

UX & COMPLIANCE RATIONALE:

• PIN-first authentication ensures predictability, auditability, and universal access
• Biometrics act as an accelerator, not a replacement
• Clear zone separation reduces fraud risk and improves perceived security

ACCESSIBILITY

• Large touch targets (≥48px)
• High contrast and readable typography
• One-handed use
• Screen-reader friendly PIN input

OUTCOME

The final concept delivers a calm, predictable, and compliant login experience that reduces cognitive load and scales well across European markets.

Instead of visual novelty, the design prioritizes trust, clarity, and regulatory readiness key qualities for enterprise banking products.


AI-assisted workflow

Codex was used to support the design process, especially during exploration.

It helped generate:

  • layout variations,

  • responsive versions,

  • component directions,

  • additional states,

  • early product flows.

However, AI was not able to own the design process.

It often needed strong constraints. When the scope was too broad, the output became inconsistent. It sometimes changed components outside the requested area, introduced layout issues or expanded the product in directions that were not central to the concept.

Because of that, my role was to constantly review, reduce and redirect the work.

The most important design decisions were not generated by AI. They came from evaluating what supported the Smart Savings concept and what distracted from it.

What I learned

This project taught me two things at the same time.

First, the product idea became clearer when I stopped trying to design a full banking app and focused on one valuable user problem.

Second, AI can support fast exploration, but it needs strong direction.

Codex was useful for generating options and speeding up production work, but it did not replace product thinking. It required review, constraints and sometimes a decision to stop expanding.

The biggest lesson was:

AI can help create possibilities, but the designer is still responsible for choosing the right direction.

Reflection

This project is not presented as a flawless banking product.

It is an exploration of a specific product idea: helping users understand what they can safely spend and realistically save.

The process was imperfect, especially when working with AI-generated layouts and components. But that imperfection became part of the learning.

The final value of the project is the Smart Savings concept and the design thinking behind it: moving from passive banking data toward proactive financial clarity.

Santander

Zen.com

BMW

Ferrero

Wedel

Sector 3.0

Samsung

WWF

The 3E System

Procter & Gamble

Credit Agricole

Santander

Zen.com

BMW

Ferrero

Wedel

Sector 3.0

Samsung

WWF

The 3E System

Procter & Gamble

Credit Agricole

Santander

Zen.com

BMW

Ferrero

Wedel

Sector 3.0

Samsung

WWF

The 3E System

Procter & Gamble

Credit Agricole

© 2025 Made with 🩶 by Katarzyna Bobrowska

© 2025 Made with 🩶 by Katarzyna Bobrowska

© 2025 Made with 🩶 by Katarzyna Bobrowska

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