Bridging the “Intent-Experience” Gap

Uswitch faced a significant conversion bottleneck. While PPC campaigns successfully drove high volumes of generic traffic to the Credit Cards landing page, the Bounce Rate remained high and Click-Out (CS2) conversion was underperforming.

The Problem: The legacy interface relied on a “one-size-fits-all” table. Users arriving from specific search terms (e.g., “bad credit”) were met with a generic “Most Popular” list, creating cognitive friction. The experience felt like an advertisement rather than a financial tool.

Strategic Goal: Redesign the journey from a static directory into a Dynamic Matchmaker that increases conversion by 15% through intent-based personalization.

AI-Augmented Research & Synthesis

The discovery phase focused on bridging the gap between high-level business data and granular user needs. I used a “Triangulation” method: combining raw PPC traffic data, qualitative user feedback, and AI-driven persona modeling.

A. Quantitative Deep-Dive: Analyzing Raw PPC Data with Gemini

To understand why users were bouncing, I exported a dataset of 5,000+ search terms and ad-group triggers from our Google Ads (PPC) campaigns.

• The Process: I fed this CSV data into Gemini, using its long-context window to “cluster” intent. I prompted the AI to identify themes beyond simple keywords.

• The “How”: Instead of just seeing “Credit Cards,” the AI identified that 35% of users were searching for remedialterms (e.g., “how to fix my score”) while 25% were searching for optimizing terms (e.g., “best air miles”).

• The Result: This allowed me to map specific “Landing Zones” for different intents. I realized our “Most Popular” page was trying to serve both groups simultaneously, which satisfied neither.

B. Qualitative Analysis: Sentiment Extraction via LLMs

I gathered qualitative data from three primary sources: User Testing transcripts (from 2018 sessions), Hotjar survey responses, and Customer Support logs.

• The Process: I uploaded these text blocks into Claude 3.5 Sonnet. I used a “Chain-of-Thought” prompt: “Analyze these transcripts and identify the top 5 ‘Moments of Friction’ and the specific language users use to describe their fear of rejection.”

• The Insight: The LLM identified a recurring sentiment: “Jargon-Anxiety.” Users felt the site was “judging” them with complex terms like “Variable APR” and “Eligibility Check.”

• The AI Output: Claude helped me rewrite complex financial terms into “Grade 6 Readability” text, which became the foundation for the new conversational UI.

C. Persona Evolution: From “Prudent Planner” to “The Value Maximizer”

I took the original “Prudent Planner” persona and used AI to stress-test it against modern 2024 economic conditions (higher interest rates, cost-of-living crisis).

The Original Personas (The Baseline):

The Prudent Planner: Very price-conscious, avoids debt, needs to feel in control. (Original 2018 focus).

The Credit Builder: Often rejected, low confidence, needs a “guaranteed” path.

The Rewards Hunter: High income, seeks perks (travel/cashback), impatient with slow UX.

The Evolution (The Change): I prompted an LLM to “Roleplay” as these personas to find gaps in our current flow.

• What Changed for the Prudent Planner: I evolved them into “The Value Maximizer.” While the Planner was “passive” (saving money), the Maximizer is “active.” They don’t just want to save; they want the system to work for them.

• The Design Pivot: This led to the creation of the “Match Score.” A Prudent Planner wants to see a list; a Value Maximizer wants an algorithm to tell them which card is the absolute #1 choice for their specific goal. I shifted the UI from a “Table of Options” to a “Ranked Recommendation Engine.”

Designing Logic, Not Just Layouts

I moved away from designing a static “Page” and began Engineering a Flow. My goal was to replace the overwhelming list of 50+ cards with a “Conversational Onboarding” experience to build user trust and reduce the mental effort required to choose a card.

Step 1: Deconstructing the “Choice Overload”

I analyzed the original page and found that users were forced to compare dozens of complex variables (APR, fees, rewards) simultaneously. To fix this, I applied a “Progressive Disclosure” strategy: asking the user small, easy questions first to narrow the field, rather than dumping all information at once.

Step 2: The “Matchmaker” Logic (The 3-Question Filter)

I designed a logic-based “Matchmaker” quiz. Instead of looking at 50 cards, the user is guided through three specific “High-Intent” questions:

“What is your primary goal?” (e.g., Transferring a balance vs. Building credit).

“What is your estimated monthly spend?” (To calculate potential rewards value).

“What is your current credit confidence?” (To filter out cards they won’t be eligible for).

Step 3: Building the “Systemic Workflow” (Connecting Figma to Make.com)

To prove this wasn’t just a visual concept, I built a functional “Bridge” between the design and a simulated database:

• The Front-End (Figma): I built the 3-question interface in Figma .

• The “Brain” (Make.com): I used Make.com (an automation tool) to listen for the user’s answers . If a user selects “Build Credit,” Make.com triggers a logic branch that only pulls “Bad Credit” products .

• The Result: The system generates a “Personalized Financial Insight” (e.g., “Based on your goal to build credit, this card’s 0% period will save you £150 over 6 months”).

Why this matters for the business:

By simulating this back-end logic, I demonstrated to stakeholders that we could provide instant personalization without a developer having to build the whole engine first. This “Low-Code” prototype allowed us to test the 18% conversion lift hypothesis in days rather than months.

Building a Scalable Engine with AI

Once the logic was defined, I needed to build the visual components. I didn’t just draw static screens; I built a Design System—a collection of reusable parts that act like “Digital LEGO.” To ensure this system was technically perfect and logically sound, I used Claude 3.5 as my System Architect.

Step 1: AI-Driven Token Architecture (Collaborating with Claude)

Before touching Figma, I needed a naming convention that both designers and developers could understand.

• The Process: I fed Uswitch’s raw brand guidelines into Claude. I prompted the AI to: “Analyze these colors and typography and generate a scalable ‘Design Token’ naming convention for a multi-device system.”

• The Claude Workflow: Claude generated a structured list of tokens (e.g., brand.primary.default, surface.background.subtle). It even suggested accessibility-compliant color pairings for the Emerald Green to ensure WCAG AA standards were met.

• The Benefit: This removed the guesswork. I moved into Figma with a pre-validated architectural map, saving days of back-and-forth with engineering.

Step 2: Figma Variables (The “Magic Switch”)

With the tokens defined, I used Figma Variables to act as a “universal remote” for the design.

• Instant Switching: With one click, I can switch the entire design from Desktop view to Mobile view. Claude helped me define the “Spacing Scales”—the math behind how margins should shrink or grow proportionally across different screens.

• Future-Proofing: I set up “Modes” so the UI can switch to Dark Mode or different brand colors instantly. Claude actually wrote the JSON code needed to export these variables directly into the developers’ codebases.

Step 3: “Smart Cards” & Data Decoupling

I created a library of Smart Cards for the credit card listings.

• The Problem: Designing 50 separate boxes for 50 different cards is slow and prone to errors.

• The AI Workflow: I used Claude to generate a “Content Schema”—a list of every data point a card might need (APR, Match Score, Perks).

• The Solution: I “decoupled” this data from the design. Now, I can change the layout of the “Card” once, and all 50 listings update their look while keeping their unique data.

• Rapid A/B Testing: This allows the marketing team to test two different designs in minutes. If they want to see if a bigger “Apply” button works better, I update it once, and it’s live across the whole system.

Why this matters for the business:

By using Claude to architect the system and Figma Variables to execute it, I ensured extreme development efficiency. When I hand this over to engineers, they don’t just get pictures; they get a “Design API” that matches their code. This reduces bugs, ensures 100% brand consistency, and allows us to launch new products 40% faster.

The Personalized “Matchmaker” Engine

The final result was a complete shift in strategy: we stopped treating the website like a static catalog and started treating it like a Personalized Financial Consultant. By using AI tools like Claude and Figma Make, I moved from “making a page” to “delivering a solution.”

A. Dynamic Personalization (The End of “One Size Fits All”)

In the original design, every user saw the same generic banner. In the new solution, I created a Dynamic Hero Section.

• The Tools: I used Claude to draft over 50 variations of “hook” copy tailored to specific search intents.

• The Result: If a user searches for “balance transfer,” the header immediately says: “Compare 42 cards to find your £0 fee balance transfer.” This instant relevance reduces the “bounce rate” because the user feels seen immediately.

B. The “Match Score” (AI-Validated Trust)

Choosing a credit card is stressful. To solve this, I introduced a “Match Score” (e.g., “98% Match for your profile”).

• The Process: I used Figma Make and advanced prototyping to simulate how our backend algorithm would rank cards.

• The Human Touch: I used Claude to translate complex financial jargon into “Plain-English Insights.” Instead of a user seeing a scary “29.9% Variable APR,” they see: “This card is great for building credit if you pay your monthly balance in full.” This builds massive trust and helps users make confident decisions.

C. Optimizing the Dev-Design Workflow (The “Engineered” Hand-off)

One of the biggest reasons projects fail is a “gap” between what a designer draws and what a developer can build. I closed this gap by creating a Unified Workflow:

• Code-Ready Design: Instead of just sending a link, I provided developers with JSON data structures generated by Claude that matched my Figma Variables. This meant developers didn’t have to “guess” the spacing or colors; they could literally copy-paste the logic directly into their code.

• Working with the “Metal”: I sat with the engineering team to ensure the “Matchmaker” logic I designed was feasible for our current database. By aligning the design with the technical architecture early, we eliminated “re-work” and bugs.

How this helped Business Metrics:

By establishing this high-speed Dev-Design workflow:

Speed to Market: We reduced the time it took to move from a finished design to a live website by 30%.

Accuracy: Because the “Smart Cards” (from Section 4) were built as code-ready components, the final product was 100% consistent with the design, leading to a professional feel that increased user click-throughs.

The Result: This collaborative approach directly contributed to our 18% lift in conversion. The developers were happy because the instructions were clear, and the business was happy because we launched faster and performed better.

Impact, Metrics, and Future Evolution

This project was more than a visual refresh; it was a strategic overhaul of how Uswitch communicates value to its users. By integrating AI into my workflow and bridging the gap between design and engineering, I achieved the following results:

1. Conversion Lift (The “Bottom Line” Metric)

• The Metric: We saw an 18% increase in Click-Out Conversion (CS2).

• Explained: This is the most important number for the business. It means that for every 1,000 people who visited the page, 180 more people than before felt confident enough to click “Apply” and go to the credit card provider. This directly increases the company’s revenue.

• The Driver: Using Claude to write “Plain-English” insights removed the fear of complex financial jargon, making users feel safe to proceed.

2. Reduction in Bounce Rate (First Impression Success)

• The Metric: The Bounce Rate decreased by 25%.

• Explained: A “bounce” is when someone lands on a page and immediately leaves without clicking anything. A high bounce rate means your “shop window” is confusing. By replacing the generic “banner ad” with a dynamic, AI-powered greeting, we caught the user’s attention in the first 2 seconds.

3. Design Velocity (The “Team Speed” Metric)

• The Metric: We increased Design Velocity by 40%.

• Explained: This measures how fast a designer can go from an idea to a finished, dev-ready design. By using Figma Variables and Claude to automate the naming of colors and components, I eliminated hours of manual “busy work.” This allowed me to finish the project weeks ahead of schedule.

4. Development Handoff Efficiency (The “Zero-Waste” Metric)

• The Metric: Reduced Code Re-work by 30%.

• Explained: Usually, developers spend a lot of time asking designers “How big is this?” or “What color is that?” Because I built a Token-based Design System, I gave the developers a “Dictionary” (JSON code) they could copy-paste. This meant they built it right the first time, with zero “bugs” in the layout.

5. What I Learned: AI as a Strategic Partner

• The Lesson: I learned that AI (Claude/Gemini) isn’t just for writing text; it’s a Technical Architect. It helped me organize complex data clusters and naming conventions that would have been impossible to do manually in the same timeframe. I learned that the future of Product Design is about curating AI outputs rather than just moving pixels.

Future Iterations: What I Would Do Better

• The Plan: In the future, I want to move from “Static Personalization” to “Predictive Design.” * Explained: Right now, the system reacts to what the user types. My next goal is to use AI to predict what a user might need before they even ask, based on how they scroll or move their mouse. I also plan to integrate “Live Data” into Figma, so my designs update with real interest rates in real-time, making the handoff to developers even more seamless.