At Kastelo, a fintech focused on delivering accessible and intuitive digital financial solutions, my role was to lead the end-to-end UX and UI design of the core app experience. The app lets you manage and grow your money in one secure wallet.
As Lead UX/UI Designer, I was responsible for shaping the product vision, defining the experience strategy, and driving execution from discovery through to design of new design system for their mobile app.
Approach
When I joined the Kastelo project, there was no structured design system in place, only a style guide, and the mobile app lacked clear architecture. As we worked on key epics such as Rewards, Onboarding, and Wallet flows, we began structuring a more scalable design system and improved Information Architecture. Given limited resources to implement changes across the entire app, we focused on embedding consistent patterns and a unified design language within new work. Navigation was simplified, the rewards proposition was naturally integrated into the wallet experience, and the homepage was redesigned to support both financial tools and integrated services.
Key contributions
Leading product discovery, user research synthesis, and experience strategy to define a clear, user-centred direction.
Designed the core app architecture, dashboard, and key financial workflows to improve clarity, usability, and trust.
Established and scaled a structured design system, creating reusable components with clear layout, spacing, and interaction principles.
Partnered closely with product, engineering, and leadership to align business goals with user needs.
Drove iterative improvements through testing, feedback loops, and agile collaboration.
Design system
To support the evolving product ecosystem, a more structured and scalable design system was introduced. Moving beyond a basic style guide, foundational components, patterns, and interaction principles were defined to drive consistency across the app. Design variables were implemented to standardise colour, spacing, and typography, enabling greater flexibility and alignment across features.
Establishing a structured component framework
A modular card system was introduced as the core UI building block of the app. Cards were designed using Auto Layout with clearly defined:
Spacing and padding rules
Responsive behaviour
Content hierarchy standards
This created predictable structure across screens while allowing flexibility for different financial use cases.
Defining usage patterns & behaviour
Beyond components, we defined clear rules for when and how patterns should be used across flows:
Identified repeated UI behaviours across the ecosystem
Defined when cards should be used (and when not to) to reduce clutter
Reduced unnecessary repetition by consolidating similar patterns
This ensured the system supported the experience, and overall interface setup.
Standardising visual Language
To strengthen consistency and scalability:
Style variables were implemented to standardise colour usage
Typography and spacing tokens were aligned across components
A subtle 50 slate background was introduced to create visual separation, improve hierarchy, and allow cards to stand out without adding visual noise
This reduced inconsistencies and improved overall visual clarity.
Mobile-first interaction standards
On mobile, usability improvements were prioritised:
Standardised fixed bottom action buttons across flows
Addressed responsive constraints and thumb-reach ergonomics
Improved completion rates by keeping primary actions consistently accessible
