Digitizing a Financial Services Experience
Digitizing a Financial Services Experience
Helping customers compare financial products without relying on agents
Helping customers compare financial products without relying on agents
Designing Talisa, a direct-to-consumer financial services website that helps everyday customers and brokers understand insurance, credit, and FX products, so more people can start their journey online instead of depending solely on offline agents.
Designing Talisa, a direct-to-consumer financial services website that helps everyday customers and brokers understand insurance, credit, and FX products, so more people can start their journey online instead of depending solely on offline agents.
My Role
Product / UX Designer (end-to-end IC)
Tools
Figma
Figma
Jira
Jira
Team
1 PM, 1 tech lead, 2 engineers, 1 content/marketing partner
1 PM, 1 tech lead, 2 engineers, 1 content/marketing partner
Timeline
2 months
2 months
Key Outcomes
Key Outcomes
Reframed Talisa’s information architecture around three core services: Insurance, Credit, and FX, making offerings explicit from the homepage.
Designed guided quote/contact flows that reduced the steps and perceived effort to request a quote or call-back.
Created a lightweight design system (navigation, cards, buttons, typography) to support consistent future feature development.
Reframed Talisa’s information architecture around three core services: Insurance, Credit, and FX, making offerings explicit from the homepage.
Designed guided quote/contact flows that reduced the steps and perceived effort to request a quote or call-back.
Created a lightweight design system (navigation, cards, buttons, typography) to support consistent future feature development.
CONTEXT: PROBLEM, AUDIENCE & CONSTRAINTS
CONTEXT: PROBLEM, AUDIENCE & CONSTRAINTS
What is Talisa?
What is Talisa?
Talisa is a direct-to-consumer financial services company that offers insurance brokerage, credit, and foreign exchange (FX) services.
Talisa is a direct-to-consumer financial services company that offers insurance brokerage, credit, and foreign exchange (FX) services.
The business had historically relied on human agents: customers would talk to a broker who explained options and recommended products. The new ambition was to build a modern, digital-first experience that could do more of that early education and guidance online.
The business had historically relied on human agents: customers would talk to a broker who explained options and recommended products. The new ambition was to build a modern, digital-first experience that could do more of that early education and guidance online.
The Problem
The Problem
As Talisa expanded its services, the existing website wasn’t keeping up. It:
Didn’t clearly explain what Talisa actually offers
Made it hard to explore and compare options
Failed to support a clear path to request a quote or talk to someone
This meant potential customers quickly bounced or reverted to calling agents directly.
As Talisa expanded its services, the existing website wasn’t keeping up. It:
Didn’t clearly explain what Talisa actually offers
Made it hard to explore and compare options
Failed to support a clear path to request a quote or talk to someone
This meant potential customers quickly bounced or reverted to calling agents directly.
Users & customers
Users & customers
We focused on two primary user types:
Prospective customers (25–50)
Want insurance, credit, or FX products
Often feel overwhelmed by jargon and perceived risk
Tend to rely on agents, friends, or family because they don’t feel confident deciding alone
Brokers & agents
Need clear, up-to-date information on Talisa’s products
Want a reference they can use while advising clients
Need a simple way to capture leads and start applications
We focused on two primary user types:
Prospective customers (25–50)
Want insurance, credit, or FX products
Often feel overwhelmed by jargon and perceived risk
Tend to rely on agents, friends, or family because they don’t feel confident deciding alone
Brokers & agents
Need clear, up-to-date information on Talisa’s products
Want a reference they can use while advising clients
Need a simple way to capture leads and start applications
Constraints & context
Constraints & context
Timeline:
We had six weeks to deliver an experience that made Talisa’s services clear, helped users self-serve, and could be shipped on existing infrastructure without drastically changing how products were priced or fulfilled.
Business:
Must support the full breadth of services (Insurance, Credit, FX) without confusing users.
Could not radically change Talisa’s brand positioning (early-stage brand guidelines already in place).
Scope:
Focus on marketing + pre-quote experience—not a full logged-in account portal (that was explicitly defined as “what’s next”).
Timeline:
We had six weeks to deliver an experience that made Talisa’s services clear, helped users self-serve, and could be shipped on existing infrastructure without drastically changing how products were priced or fulfilled.
Business:
Must support the full breadth of services (Insurance, Credit, FX) without confusing users.
Could not radically change Talisa’s brand positioning (early-stage brand guidelines already in place).
Scope:
Focus on marketing + pre-quote experience—not a full logged-in account portal (that was explicitly defined as “what’s next”).
KEY FEATURES
KEY FEATURES
Services-first navigation – Instead of burying offerings under generic menu labels, Talisa exposes Credit, Insurance, and FX as first-class citizens in the navigation. A user always knows:
What Talisa offers
Where to click to explore that category
The result: less guesswork (“Where do I find loans?”) and a clearer mental model of Talisa as a multi-service financial partner.
Services-first navigation – Instead of burying offerings under generic menu labels, Talisa exposes Credit, Insurance, and FX as first-class citizens in the navigation. A user always knows:
What Talisa offers
Where to click to explore that category
The result: less guesswork (“Where do I find loans?”) and a clearer mental model of Talisa as a multi-service financial partner.
Guided hero panels – Each key page opens with a hero section that does three things in one place:
Names the user’s goal or pain (“Need a personal loan?”, “Protect your assets”)
Summarises how Talisa helps
Offers a single, focused CTA or mini-form (e.g., “Get a quote” or “Reach us”)
These glassmorphism style panels keep users from feeling lost: the page immediately tells them what to do next.
Guided hero panels – Each key page opens with a hero section that does three things in one place:
Names the user’s goal or pain (“Need a personal loan?”, “Protect your assets”)
Summarises how Talisa helps
Offers a single, focused CTA or mini-form (e.g., “Get a quote” or “Reach us”)
These glassmorphism style panels keep users from feeling lost: the page immediately tells them what to do next.
Quote and contact flows – Talisa doesn’t push users into long, intimidating application forms. Instead it offers:
Short, step-light quote request flows
Call-back / enquiry forms that only ask for essential info
This lowers the barrier to starting a relationship. Users can signal interest and context, and Talisa (or a broker) can follow up with tailored guidance.
Quote and contact flows – Talisa doesn’t push users into long, intimidating application forms. Instead it offers:
Short, step-light quote request flows
Call-back / enquiry forms that only ask for essential info
This lowers the barrier to starting a relationship. Users can signal interest and context, and Talisa (or a broker) can follow up with tailored guidance.
Product and policy cards – Within those service pages, Talisa uses cards for individual products or policies (e.g., Aviation Insurance, Marine Insurance, Instant Loans). Each card offers:
A clear name
A short description or bullet list
A natural next step (view more, get a quote, talk to us)
Cards make complex product catalogs easy to scan, compare, and discuss — especially helpful for users and brokers working side-by-side.
Product and policy cards – Within those service pages, Talisa uses cards for individual products or policies (e.g., Aviation Insurance, Marine Insurance, Instant Loans). Each card offers:
A clear name
A short description or bullet list
A natural next step (view more, get a quote, talk to us)
Cards make complex product catalogs easy to scan, compare, and discuss — especially helpful for users and brokers working side-by-side.
FX rate and calculator modules – On the FX side, Talisa doesn’t just say “we do FX.” It provides:
Live-ish rate cards for key currencies
Calculator-style modules where users can enter amounts and see what they’d get
These tools make FX tangible: users can see approximate outcomes and feel more informed before reaching out or placing an order.
FX rate and calculator modules – On the FX side, Talisa doesn’t just say “we do FX.” It provides:
Live-ish rate cards for key currencies
Calculator-style modules where users can enter amounts and see what they’d get
These tools make FX tangible: users can see approximate outcomes and feel more informed before reaching out or placing an order.
How might we support the full breadth of services (Insurance, Credit, FX) without confusing users?
THREE DISTINCT JOURNEYS, SHARED PATTERNS
THREE DISTINCT JOURNEYS, SHARED PATTERNS
APPROACH OVERVIEW
APPROACH OVERVIEW
I structured the work into four phases, each with clear outputs to keep the six-week timeline on track.
I structured the work into four phases, each with clear outputs to keep the six-week timeline on track.
DEEP DIVE - WHAT ACTUALLY HAPPENED
DEEP DIVE - WHAT ACTUALLY HAPPENED
Discover & Insights
Discover & Insights
Inputs & activities
Inputs & activities
To ground decisions in real behaviour (not just stakeholder assumptions),
Conducted interviews (remote + in-person) with:
Prospective customers who had recently purchased or considered financial products
Brokers/agents already working with Talisa
Observed how users browsed competitor sites and how agents pitched products offline
Performed a heuristic review of Talisa’s existing process flow
Conducted competitive analysis
Reviewed support questions and email threads to spot recurring points of confusion
To ground decisions in real behaviour (not just stakeholder assumptions),
Conducted interviews (remote + in-person) with:
Prospective customers who had recently purchased or considered financial products
Brokers/agents already working with Talisa
Observed how users browsed competitor sites and how agents pitched products offline
Performed a heuristic review of Talisa’s existing process flow
Conducted competitive analysis
Reviewed support questions and email threads to spot recurring points of confusion
Key Insights - Design Decisions
Key Insights - Design Decisions
These insights directly informed the IA, page structure, and interaction patterns.
These insights directly informed the IA, page structure, and interaction patterns.
Competitive Analysis
Competitive Analysis
Strategy & Problem Framing
Strategy & Problem Framing
Problem Statement
Problem Statement
How might we help customers and brokers understand Talisa’s insurance, credit, and FX offerings and confidently start a conversation—without needing an agent to explain everything first—so Talisa can scale its digital presence and reduce reliance on purely offline sales?
User Personas
User Personas
Detailed Persona
Detailed Persona
Affinity Map
Affinity Map
A snippet of our affinity map, with information derived from user interviews.
A snippet of our affinity map, with information derived from user interviews.
User Flow
User Flow
The user flow was designed to guide users from discovery to action with minimal friction, using clear service pathways and consistent patterns. Each step helps users understand their options, build confidence, and smoothly transition from digital exploration to human support.
The user flow was designed to guide users from discovery to action with minimal friction, using clear service pathways and consistent patterns. Each step helps users understand their options, build confidence, and smoothly transition from digital exploration to human support.
Information Architecture
Information Architecture
The information architecture was designed to make Talisa’s broad financial offering easy to understand and navigate. By structuring the site around clear service categories—Insurance, Credit, and FX—the IA reduces cognitive load, supports quick orientation, and guides users toward the right service without confusion.
The information architecture was designed to make Talisa’s broad financial offering easy to understand and navigate. By structuring the site around clear service categories—Insurance, Credit, and FX—the IA reduces cognitive load, supports quick orientation, and guides users toward the right service without confusion.
DESIGN EXPLORATIONS & ITERATIONS
DESIGN EXPLORATIONS & ITERATIONS
Concept Directions
Concept Directions
I explored three main directions for how Talisa’s services could be presented on the homepage and in navigation:
Product grid homepage
Services-first homepage (chosen)
Journey-based homepage
We ultimately went with Services-first homepage and incorporated some journey language within each service area.
I explored three main directions for how Talisa’s services could be presented on the homepage and in navigation:
Product grid homepage
Services-first homepage (chosen)
Journey-based homepage
We ultimately went with Services-first homepage and incorporated some journey language within each service area.
Crazy 8s
Crazy 8s
Low Fidelity Wireframes
Low Fidelity Wireframes
Brand & Design Principles
Brand & Design Principles
Brand attributes
Trustworthy & professional – feels like a regulated financial institution, not a startup experiment.
Warm & human – lifestyle imagery, soft blues and peaches (not black & green “bank” vibes).
Clear & educational – typography and layout prioritize legibility and scannability.
Experience principles
Reassure first – hero zones and forms focus on reassurance (“Need a personal loan”, “Get a quote in under 24hrs”) rather than features.
One decision at a time – lots of white space, simple cards, and short forms.
Same patterns everywhere – the same header, hero pattern, CTA styles and cards repeat across CREDIT, INSURANCE and FX so users learn the interface once.
Brand attributes
Trustworthy & professional – feels like a regulated financial institution, not a startup experiment.
Warm & human – lifestyle imagery, soft blues and peaches (not black & green “bank” vibes).
Clear & educational – typography and layout prioritize legibility and scannability.
Experience principles
Reassure first – hero zones and forms focus on reassurance (“Need a personal loan”, “Get a quote in under 24hrs”) rather than features.
One decision at a time – lots of white space, simple cards, and short forms.
Same patterns everywhere – the same header, hero pattern, CTA styles and cards repeat across CREDIT, INSURANCE and FX so users learn the interface once.
Usability Testing
Usability Testing
To validate the new services-first information architecture and guided flows, I conducted moderated usability testing with prospective customers and brokers.
To validate the new services-first information architecture and guided flows, I conducted moderated usability testing with prospective customers and brokers.
Key Findings
Service categories were clear, but some users hesitated between “Insurance” and specific policy types.
Users appreciated the short forms, but wanted reassurance that they weren’t committing to a purchase.
Brokers valued structured product summaries but asked for faster access to key details.
Some users skimmed past guides and tools unless visually emphasized.
Key Findings
Service categories were clear, but some users hesitated between “Insurance” and specific policy types.
Users appreciated the short forms, but wanted reassurance that they weren’t committing to a purchase.
Brokers valued structured product summaries but asked for faster access to key details.
Some users skimmed past guides and tools unless visually emphasized.
Quantified Impact
Quantified Impact
After conducting moderated usability sessions and iterating on the prototype, we ran a second validation round to measure improvement across key tasks.
After conducting moderated usability sessions and iterating on the prototype, we ran a second validation round to measure improvement across key tasks.
High Fidelity Wireframes
High Fidelity Wireframes
LOG IN / SIGN UP
LOG IN / SIGN UP
The high-fidelity wireframes translate the validated information architecture and interaction patterns into a polished, cohesive interface. At this stage, the focus shifted from structure to visual hierarchy, clarity, and consistency — ensuring Insurance, Credit, and FX feel unified under one system while maintaining clear, service-specific context.
The high-fidelity wireframes translate the validated information architecture and interaction patterns into a polished, cohesive interface. At this stage, the focus shifted from structure to visual hierarchy, clarity, and consistency — ensuring Insurance, Credit, and FX feel unified under one system while maintaining clear, service-specific context.
ABOUT TALISA
ABOUT TALISA
CREDIT / FX
CREDIT / FX
INSURANCE
INSURANCE
SHIPPING & COLLABORATION
SHIPPING & COLLABORATION
Throughout the project, I partnered closely with the PM to define launch scope and success metrics, engineers to ensure feasibility and smooth handoff, and marketing to align messaging with a clear, accessible tone.
We launched the redesigned responsive web experience as a learning release, prioritizing core flows and deferring advanced features (e.g., calculators) to phase two.
All Information Architecture, key flows, and components were documented in Figma, alongside a concise implementation guide to support development and stakeholder alignment post-handoff.
Throughout the project, I partnered closely with the PM to define launch scope and success metrics, engineers to ensure feasibility and smooth handoff, and marketing to align messaging with a clear, accessible tone.
We launched the redesigned responsive web experience as a learning release, prioritizing core flows and deferring advanced features (e.g., calculators) to phase two.
All Information Architecture, key flows, and components were documented in Figma, alongside a concise implementation guide to support development and stakeholder alignment post-handoff.
OUTCOMES & IMPACT
OUTCOMES & IMPACT
As a design-led engagement, impact was measured through structural clarity and behavioural indicators rather than long-term analytics.
As a design-led engagement, impact was measured through structural clarity and behavioural indicators rather than long-term analytics.
The new Information Architecture and design system created a scalable foundation for future features, including comparison tools, calculators, and a logged-in dashboard.
The new Information Architecture and design system created a scalable foundation for future features, including comparison tools, calculators, and a logged-in dashboard.
REFLECTION & WHAT'S NEXT
REFLECTION & WHAT'S NEXT
Key Learnings
In finance, users seek reassurance more than full autonomy.
Designing for brokers strengthened the experience for all users.
Clarity and structure build more trust than visual complexity.
What I’d Improve
Conduct unmoderated testing to further optimize quote conversion.
Involve engineering earlier in future-state ideation to unlock technical opportunities.
Future Opportunities
Side-by-side plan comparison tools.
Integrated financial calculators (premium, repayment, FX).
A unified logged-in dashboard for policy, loan, and FX management.
Key Learnings
In finance, users seek reassurance more than full autonomy.
Designing for brokers strengthened the experience for all users.
Clarity and structure build more trust than visual complexity.
What I’d Improve
Conduct unmoderated testing to further optimize quote conversion.
Involve engineering earlier in future-state ideation to unlock technical opportunities.
Future Opportunities
Side-by-side plan comparison tools.
Integrated financial calculators (premium, repayment, FX).
A unified logged-in dashboard for policy, loan, and FX management.