AI interaction components
A modular component set supports voice, text, status, clarification, reporting, and decision making flows.
01 / Financial Assistant NewConversational AI
A conversational financial assistant for a Mexican banking institution.
A new banking capability supported by an AI interaction layer that extends the institution's existing Design System.
Overview
From a financial question to a clear next step.
A Mexican banking institution partnered with the team to design a conversational assistant that helps customers understand their financial position and move from a question to a clear next step.
The work introduced a new Financial Assistant capability, supported by an AI interaction layer that extends the institution's existing Design System. It brings voice, text, contextual clarification, financial data, and decision oriented reporting into one coherent mobile experience. The institution remains confidential; this case study focuses on the product and system decisions behind the work.
- Industry
- Banking · Financial services · Mexico
- Engagement
- Confidential product design · Conversational system architecture
- Scope
- Design Systems Architecture · Design Engineering · AI Design Operations
System scope at a glance
Shared interaction layerConversational states
A defined state model keeps listening, clarification, analysis, reporting, and detail spatially stable.
Decision support scenarios
A scalable scenario model turns distinct financial questions into clear, actionable next steps.
The Challenge
Turn a financial question into a decision people can act upon.
The institution needed the assistant to make complex financial information approachable while preserving clarity and accountability. People still had to understand what the system heard, what it needed to clarify, what the numbers meant, and which action could follow.
Voice, text, clarification, analysis, and report detail needed to behave as one experience across changing intent and constrained mobile space, rather than as disconnected screens.
Competing financial data
Reports needed to prioritize one decision instead of presenting every available metric at once.
Opaque conversation states
Listening, clarification, and thinking required visible, predictable status and continuity.
Local interface variants
Repeated controls and surfaces needed purposeful component families instead of implementations specific to individual screens.
Mobile precision
Safe areas, accessible targets, focus behavior, and overflow had to hold across every state.
The Opportunity
Create a foundation that makes every financial conversation coherent.
Instead of designing each question, state, and report as an isolated screen, we defined a system that lets new experiences inherit interaction, accessibility, and data rules from a shared foundation.
This separated durable elements, including state logic, component contracts, and financial data semantics, from the scenario specific content required for each customer question.
The result was a practical framework the institution could use to evaluate consistency as the experience expanded.
Our Approach
From question to trusted systemMap the experience
Mapped every interaction state, repeated control, report pattern, token, and mobile failure point.
Define the foundations
Established shared rules for type, spacing, geometry, semantic color, interaction, and safe areas.
4 px base rhythm · Semantic tokensCreate component families
Replaced local variants with purposeful families and documented composition contracts.
20+ AI interaction componentsModel conversations
Kept status, context, and transitions spatially stable throughout the dialogue.
6 explicit statesDesign decision scenarios
Matched each financial question to a legible report form, then verified behavior and overflow.
25 decision support scenarios
Financial Assistant System Architecture
Existing system + new capabilityA shared system for expressing complex financial decisions on mobile.
The AI interaction layer complements the institution's existing Design System, while Financial Assistant applies it to a new banking capability. Foundations define visual and interaction rules. Components turn those rules into reusable contracts. Patterns connect them to recurring customer needs. Documentation keeps decisions clear as the system evolves.
Foundations
Shared rules for type, spacing, semantic color, geometry, safe areas, and interaction states.
4 px rhythm · 12 / 16 / 22 px radius · accessible touch targetsComponents
A modular set of 20+ AI interaction components for voice, text, status, selection, reporting, payments, and data.
Contextual composer · ConversationStatus · SelectionButtonPatterns
Repeatable structures for conversation continuity, contextual clarification, decision reports, and depth on demand.
Documentation
Component specifications define insets, touch targets, states, alignment, and composition rules for implementation.
From System to Customer Experience
Making a new AI capability feel native to an established bank.
Financial Assistant is a new banking capability that helps customers turn financial questions into clear next steps. To make it feel native to the institution's digital ecosystem, we introduced an AI interaction layer that extends the existing Design System with patterns for voice, text, status, clarification, analysis, and decision oriented reporting.
Existing banking Design System
Provides the trusted foundations customers already recognize across the bank’s digital products.
AI interaction layer
Adds reusable components, states, and patterns for conversational financial guidance.
Financial Assistant
Combines both layers to turn a financial question into a clear, actionable next step.
Governance & Adoption
Evolving shared AI patternsAn operating model for evolving AI patterns with confidence.
Introducing AI into an established Design System creates new questions about ownership, contribution, and release quality. We defined a recommended model the institution can use to evaluate and evolve the shared AI interaction layer as the capability expands.
Ownership
A cross functional system group stewards foundations, shared families, and release quality.
Contribution
Product teams propose additions when a reusable need is supported by working accessibility states.
Decision making
Behavior and evidence determine whether a change becomes a variant, pattern, or local composition.
Communication
Release notes pair code changes with usage guidance, migration notes, and product examples.
Adoption
Begin with conversation and report surfaces, measure coverage, and retire duplicate implementations.
The Impact
Financial Assistant established a clear product and system model for introducing AI into the bank's digital ecosystem.
Rather than treating the assistant as an isolated experience, the work connected customer questions, conversational states, financial data, and decision support through a shared interaction layer.
This gives the institution a foundation for evolving an AI capability that remains understandable to customers and extensible for product teams.
Capabilities involved
Strategy through implementationDesign Systems Architecture
Creating the foundations behind every great product.
Design Engineering
Connecting design intent and implementation through shared systems.
AI Design Operations
Preparing Design Systems for AI enabled product development.
Building an AI capability for financial services?
Let's design the interaction layer behind it.
I help teams connect complex product behavior, customer needs, and scalable systems.
Talk on WhatsApp ↗