Logotype Portfolio Natalia Martin
Gor logo

Designing a modern, transparent and intuitive financial management experience.

My Role: UX/UI Designer
Timeline: 2023
Project Type: Mobile App Β· Digital Banking Β· UI System Β· Product Design
Team: Independent Project
Client: Concept Project / Personal Case Study
Laptop with a ashlar screenshot from the website
introduction
Goro Bank is a digital banking concept designed to offer a modern, transparent and intuitive financial experience. The original platform lacked clarity, hierarchy and emotional connection β€” critical elements for building trust in fintech.

My role was to redesign the core banking flows, interface components and visual identity to create a digital banking experience that feels modern, safe and effortless.

This case study includes UX analysis, flows, UI redesign, component system and visual direction.
Project objectives
‍‒ Improve clarity and readability of financial information.
‍‒ Build trust through a structured, consistent UI.
‍‒ Redesign essential flows (overview, transfers, card management).
‍‒ Simplify navigation and reduce friction.
‍‒ Establish a modern visual identity suitable for fintech.
‍‒ Build reusable, scalable UI components.
‍‒ Support confident decision-making with better hierarchy and structure
research & Design Process
color palette
Benchmarking
I analyzed leading digital banking apps β€” Revolut, N26, Monzo, Wise and Bunq β€” focusing on:
‍‒ visual hierarchy
‍‒ transaction structure
‍‒ card management patterns
‍‒ navigation depth
‍‒ readability
‍‒ component consistency.
‍
These benchmarks helped define quality standards for clarity and trustworthiness.
UX Audit of the Existing Design
I evaluated the current interface in terms of:
‍‒ insufficient spacing,
‍‒ inconsistent patterns,
‍‒ unclear hierarchy,
‍‒ poor task grouping,
‍‒ weak visual structure,
‍‒ limited scalability.
User Expectations (Conceptual Research)
Users of digital banks expect:
‍‒ instant financial clarity
‍‒ fast access to essential actions,
‍‒ predictable navigation,
‍‒ transparency in fees and transfers,
‍‒ easy-to-scan layouts.
Benchmarking
Web App Benchmarking β€” UX/UI Patterns
Problem Definition & Insights
Insight 1
Lack of Financial Clarity
Balances, card details and recent activity were visually mixed, making it hard to understand financial status at a glance.
Insight 2
Unpredictable Navigation
Important actions like transfers or card security required too many taps.
Insight 3
Weak Visual Hierarchy
Everything had similar weight, making scanning difficult.
Insight 4
No Trust-Building UI Language
The visual identity did not support the credibility expected from a financial product.
Insight 5
Inability to Scale
The layout and component choices would not support future growth such as analytics, savings goals or subscriptions.
Personas & Needs

Persona

A tech-aware, digital-first banking user who expects efficiency, effortless control and security.
Benchmarking
Persona: Alex Garcia
Age: 33
Occupation: Freelance Designer
Tech Level: High
Primary Device: Laptop
Financial Behavior: Uses web banking daily to manage personal and work-related finances.
Story
β€œAs a digital-first freelancer, I need a banking platform that allows me to quickly understand my financial status, manage multiple cards, and perform transfers with confidence. I rely on clear interfaces that reduce cognitive load and help me stay organized.”
Needs & Goals
‍‒ Immediate clarity on balance and spending.
‍‒ Fast and error-free transfers.
‍‒ Easy card controls (freeze, limits, security).
‍‒ Clean, modern and trustworthy interface.
‍‒ Financial insights that are easy to understand.
‍‒ Predictable navigation and simple flows.
Pain Points
‍‒ Overwhelming home dashboard.
‍‒ Transaction list lacks visual hierarchy.
‍‒ Card security actions are buried.
‍‒ Too many steps for basic tasks.
‍‒ Unclear terminology and labels.
‍‒ UI feels outdated and reduces trust.
Digital Behavior
‍‒ Prefers editing, banking and managing tasks on desktop.
‍‒ Checks balance frequently.
‍‒ Does most financial actions online.
‍‒ Expects high clarity and modern design.
Research Findings
Icon Financial clarity
Financial Clarity Issues
Users struggle to understand their financial status because the overview page mixes balance, cards and recent activity without clear hierarchy.
Icon Navigation issues
Navigation Requires Too Many Steps
Essential actions such as transfers or card security require several screens, increasing friction and slowing down task completion.
Icon Navigation issues
Card Controls Are Hard to Find
Freeze, limits or security options are buried deep in the UI, making quick card actions difficult at critical moments.
Icon Visual Inconsistency
Weak Visual Hierarchy & Inconsistent UI Patterns
Spacing, alignment, button styles and components vary across the experience, reducing scannability and making the interface feel unreliable.
Icon Navigation issues
Missing Spending Insights & Analytics
Users lack a clear breakdown of categories, trends or unusual activities, making it hard to understand where money goes.
Icon Navigation issues
Low Trust Due to Outdated Visual Style
The current visual language does not match user expectations for a modern fintech product, reducing perceived security and credibility.
Current Journey & Pain Points

Pain Points Identified

‍‒ Overwhelming and crowded home screen.
‍‒ Key actions hidden behind multiple steps.
‍‒ Transaction list lacked readable distinction between items.
‍‒ Card security actions were buried.
‍‒ Layout made it difficult to expand features.
‍‒ Lack of predictability across navigation.
‍
These pain points defined the roadmap for the redesign.
Customer journey map
Customer Journey map
Context & User Expectations
Context
‍‒ Desktop-first usage.
‍‒ Short, focused interactions.
‍‒ Needs clarity under pressure.
‍‒ Compares with modern fintech UI.
‍‒ Trust and transparency are essential.
User Expectations
‍‒ Instant overview.
‍‒ Clear hierarchy & scannability.
‍‒ Smooth navigation.
‍‒ Quick card controls.
‍‒ Strong visual trust.
‍‒ Consistency across screens.
‍‒ Clear confirmations.
‍‒ Accessible UI.
Wireframes & Interaction Structure
Before moving into visual design, I created wireframes to:
β€’ establish strong hierarchy
β€’ reduce cognitive loadvalidate the new navigation structure
β€’ define card interactions and transfer flows
β€’ structure transaction categories and insights
β€’ set spacing, content rhythm and alignment rules

These wireframes ensured clarity and consistency early in the process.
sketch of some screens
App map for the all screens
Before redesigning flows, I created an App Map to understand the overall structure, dependencies and navigation depth.
App map for the all screens
App Map / Information Architecture
Moodboard & Visual Direction
This moodboard explores visual references from modern fintech brands, clean editorial layouts and clarity-driven UI systems. These references guided the visual direction of Goro Bank before the color and typography system was defined
Reference for the wireframeReference for the wireframeReference for the wireframe
visual identity

Color System

‍The palette combines:
‍‒ deep blues to evoke trust and stability,
‍‒ bright accents to signal key actions and modernity,
‍‒ neutral greys to support readability and focus.

This creates a calm yet contemporary fintech identity.

Typography

A clean sans-serif typeface optimized for numerical data and financial summaries:
‍‒ strong hierarchy,
‍‒ excellent readability,
‍‒ flexible scale for different screen sizes.
Typography used on the logoColor palette for the Logotypefavicon and splash for mobile
visual design system
‍I developed a scalable component system that supports current and future product needs:
‍‒ button system (primary, secondary, utility),
‍‒ interactive card UI (freeze, limits, insights),
‍‒ transaction rows,
‍‒ filters, chips and category tags,
‍‒ graph components and data blocks,
‍‒ bottom navigation,
‍‒ form fields and validation states,
‍‒ alert, error and success messages,
‍‒ spacing, elevation and shadow tokens.

This ensures consistency across features and accelerates growth.
Components used to create all the UI and screens
Key Screens

Home / Overview

A clear snapshot of money at a glance β€” balance, insights, recent activity and quick actions.
balance

Cards Section

Interactive card stack with security actions, limits, spending breakdown and freeze/unfreeze.
color palette

Transactions

Readable, categorized and visually structured items that users can quickly scan.
color palette

Transfer Flow

Simplified design with:
- clearer amounts,
- intuitive steps,
- quick recipients,
- transparent fee information,
- error-proof validation.
color palette

Analytics

A visual overview of spending habits using simple and human-readable charts and blocks.
color palette
Final UI & Design System
The polished UI brings together all components and patterns into a coherent, modern and trustworthy visual experience.

The final design supports clarity, confidence and efficiency across the entire banking experience.
color palette
color palette
color palette
color palette
Results & Expected Impact
Expected improvements:
‍‒ Faster completion of banking tasks,
‍‒ Clearer understanding of financial health,
‍‒ Higher user trust,
‍‒ Increased discoverability of features,
‍‒ Reduced cognitive load,
‍‒ Stronger and more consistent brand identity,
‍‒ A scalable foundation for future features (analytics, savings, automation).

‍
Though this is a conceptual project, the improvements strongly align with industry standards.
Learnings & Reflection
This project strengthened my skills in:
β€’ designing complex financial workflows,
β€’ building component systems with scalability in mind,
β€’ simplifying high-risk actions such as transfers,
β€’ applying accessibility and readability to numerical data,
β€’ combining modern fintech aesthetics with clarity and trust

What I enjoyed most was turning a dense, unclear interface into a calm, structured and intuitive experience that supports users in feeling in control of their money.
Next case