Designing a client’s website for their remortgaging product
My role
Visual / UX Designer
Year
2019
Introduction
I redesigned ICA Banken’s mortgage transfer journeys, working within the bank’s new design system to clarify steps, reduce friction, and improve completion. The work re-architected forms and content, introduced pre-qualification and error-recovery patterns, and produced developer-ready screens grounded in user feedback and regulatory constraints.
Client
ICA Banken
Sector
Finance
Project team
Andrew Pierce
Alex Yeh
Dani Kasper
Timeline
14 weeks
Constraints
Align to the new design system. Meet regulatory and legal requirements. Ensure accessibility. Maintain parity across devices.
Overview
Problem
Conversion through the mortgage transfer applications was lower than desired. Users faced long, dense forms, unclear eligibility and document requirements, and limited feedback when issues occurred. The business needed more completed, high-quality applications without increasing service load.
Challenge
Increase completion of the journey without raising support tickets. Make eligibility and document expectations clear before commitment. Shorten perceived effort and reduce rework through better sequencing and validation. Improve trust via clear language, predictable patterns, and accessible components.
Solution
A guided start that clarifies eligibility, time, and documents required. Streamlined flows for both journeys using short sections, progress, and save/resume. Inline validation and clearer error/recovery paths. Microcopy that explains why sensitive data is needed, with expandable legal detail. Accessible components and responsive layouts aligned with the design system. Developer-ready specs including alternate states, validation rules, and edge cases.
Results
Participants reported greater clarity on what was required and why. Fewer hesitations and back-and-forth within the forms. Improved wayfinding with progress and clearer sectioning. Higher stated confidence to complete the application without assistance. Reduced step-level drop-off due to pre-qualification and expectation setting. Cleaner submissions with fewer validation errors, lowering manual review time. Faster delivery through design-system reuse and tighter specs.
My process
Research activities
Current-state audit of both application flows, screens, and error paths. Design system review to understand available components and gaps. Light stakeholder interviews (product, operations, compliance) to surface risk and data needs.
Definition activities
Set success signals. Design principles. A risk log (privacy, data retention, consent).
Design activities
Information Architecture. Flow maps. High-fidelity screens using the bank’s design system. Wrote microcopy with legal review.
Testing activities
Rapid, task-based qualitative tests on prototypes to validate comprehension, sequence, and copy.
Iteration activities
Refined sequence. Pared back fields. Tightened copy and validation rules.
Handoff activities
Developer-ready specs with states, edge cases, and content guidelines.
Research
Insights in the beginning
Users were unsure about eligibility and documents until late in the process. Forms interweaved critical and non-critical data, increasing effort and abandonment risk. Error states were generic; recovery paths were unclear. Dense legal copy obscured the “what” and “why” behind sensitive fields.
What we measured during the project
Task success and time on task in qualitative tests. Observed hesitation and error points. Stakeholder feasibility checks to avoid rework at handoff.
What we would track post-launch
Step-level drop-off and completion rate. Field-level error frequency and re-entry. “Save and resume” usage and return-to-flow success. Contact-centre contacts related to application friction.
Key decisions
Eligibility first
Introduce a brief pre-qualification step (e.g., residency, age, income band, product fit) before the main form — this was so early disqualification would prevent wasted effort and reduce incomplete applications further downstream.
Front-load expectations
Show a “what you’ll need” checklist (ID, income proof/BankID, time estimate) before users start — this was so setting expectations would improve perceived control and reduce abandonment caused by surprises.
Short, sequenced steps
Break long forms into logical sections with a persistent progress indicator and “save and resume” — this was to lower cognitive load and support real-life interruptions common in financial applications.
Inline validation and smart defaults
Immediate, field-level validation and masked inputs; reuse previously entered data where possible — this was to reduce errors and rework and increase first-time completion.
Clear, layered copy
Rewrite microcopy for clarity and move legal detail into expandable “learn more” sections; keep required consent clear and explicit — this was to preserve compliance while keeping the core task legible.
Error recovery and support
Specific error messages, preserved inputs on error, and clear recovery paths; contextual help and optional handoff to support — this was to protect user efforts and reduce support contacts.
Design-system-first implementation
Use existing tokens/components and extend only when necessary, documenting new patterns — this was to speed delivery, ensure consistency, and lower maintenance cost.
Risks and how they were managed
Compliance and consent
Partnered early with legal; surfaced consent moments clearly; documented data flows in specs.
Integration dependencies
Mapped data calls and designed resilient states for slow or failed responses.
Scope creep
Prioritised changes by impact versus engineering effort; staged backlog items behind “business as usual”.
I designed a content management system that is making it simple for employees to create, manage, distribute and track content using a ‘create once, publish anywhere’ approach.
