Case Study: Designing a Customer Portal for Zurich – Simplifying Access to Pensions & Investment Services
​I’ve worked across a wide range of digital service platforms—from CPD portals and eCommerce journeys to underwritten insurance products—always with a strong focus on UX design grounded in technical feasibility and real-world user needs.
One such project was with Zurich, where I was tasked with designing a responsive customer portal for their pensions and funds customers. The goal was to enable users to access statements, update their details, and manage their accounts online—replacing outdated, offline servicing methods.
This wasn’t just a design challenge—it was a complex, multi-stakeholder initiative. I collaborated closely with development teams, project managers, business analysts, IT architects, product owners, and call centre staff, navigating multiple layers of sign-off and integrating feedback from across the business.
From a user perspective, the need was clear: calling a customer service centre to make simple changes was frustrating and time-consuming. From the business side, the cost of servicing these requests via paper comms and phone calls was inefficient and unsustainable. This project was an opportunity to improve both experiences—streamlining operations while empowering users with simple, self-service tools.
Step 1: Defining the challenge
The Challenge: Aligning User Needs with System Constraints
The core challenge was to design a user-friendly portal experience while navigating significant technical and organisational constraints.
This involved consolidating data from backend systems and analysing existing UX analytics from the pre-portal servicing pages.
​
To gain a clearer understanding of user behaviour and needs, I conducted interviews with frontline call centre staff and engaged with key stakeholders at Capita. These conversations helped identify the most common customer tasks and pain points—everything from updating personal details to viewing policy documents.
​
With this insight, the next step was to design a way to present essential information clearly and intuitively, while working within the capabilities (and limitations) of the legacy systems supporting the platform.
​
Zurich needed a responsive digital portal to enable pensions and fund customers to access their statements, update details, and manage accounts online. The current offline servicing model—relying on paper communications and call centres—was costly for the business and frustrating for users.
​
The challenge was multifaceted:
-
Understand the most common user needs and service tasks
-
Work within the limitations of legacy systems
-
Design a user interface that made complex pension data understandable and actionable
Step 2: Creating structure and roadmap
​​The Approach
​
To define the scope and shape the solution, I collaborated with a broad stakeholder group—including business leads, Capita’s front-line support teams, developers, and IT architects. Together, we clarified deliverables, prioritised user needs, and agreed on what was technically achievable within system constraints.
​
Since pension data is inherently complex—and the backend systems weren’t built with user experience in mind—I worked closely with IT to map which information could be pulled from the data lake automatically, and which tasks would still require manual intervention through Salesforce.
​
Where manual steps remained, I designed user journeys and UI messaging that set clear expectations for the customer, helping reduce confusion and potential drop-off.
​
I mapped out user needs on a screen-by-screen basis, defined how information should be structured and displayed on the front end, and developed clear navigation patterns to guide users intuitively through each process.
I ran frequent feedback loops with all stakeholders to ensure the design aligned with business objectives and user expectations.
​
To keep the process fast and cost-efficient, I began with low-fidelity sketches to quickly test and iterate on screen layouts and flows. Within two weeks of kick-off, we had full customer journeys and screen flows mapped, validated, and approved by all stakeholders.
​
Because developers were engaged from the beginning, detailed wireframes and user stories allowed front-end and back-end teams to move into build confidently—eliminating guesswork and accelerating delivery.
Step 3: Collaborative Planning, Clear Design, and Fast Iteration
To kick off the project, I worked closely with a wide range of stakeholders—including business leads, Capita’s front-line servicing teams, development teams, and IT architecture—to define the project scope, user needs, technical constraints, and, importantly, the “art of the possible.”
​
Pension and fund data is inherently complex, and the backend display systems weren’t optimised for user experience. I collaborated with technical and IT leads to map which data could be surfaced dynamically from the data lake, and which elements would still require manual input or fulfilment—particularly those managed via Salesforce by Capita teams.
​
For processes that couldn’t be fully automated, I designed UI components and messaging that clearly communicated progress and expectations to the user, minimising confusion and frustration.
​
Using real user needs and common service cases as the foundation, I mapped out screen-level use cases, crafted intuitive navigation, and specified front-end content presentation. I led design and testing sessions, keeping stakeholders involved through regular check-ins to ensure alignment.
​
To enable rapid iteration and early validation, I began with low-fidelity sketches—this allowed for quick feedback loops and consensus-building before moving into detailed UI design. Within just two weeks of project kick-off, the full customer journey and key screens were mapped, tested, and signed off with stakeholder buy-in.
​
Because the development team was involved from day one, we avoided ambiguity and rework. Detailed user stories and wireframes gave both front-end and back-end developers the clarity they needed to begin building confidently and efficiently.
Step 4: From Design to Delivery – Creating a Robust, Accessible Solution
Design & Prototyping
Once journeys were defined and agreed, I created both desktop and mobile designs using Sketch, then built a functional Marvel prototype to support testing, stakeholder reviews, and development handover. This allowed for early interaction with the design and helped maintain alignment across the team.
​
User Stories & Development Handoff
Each screen element was translated into detailed user stories within Sprintr, ensuring developers had clear, actionable requirements from the start. I worked closely with both the development team and product owners throughout this phase, clarifying intent, answering questions in real time, and keeping the process agile.
​
Accessibility by Design
Accessibility was a core consideration from the outset. I ensured that colour contrasts met WCAG standards, components included appropriate ARIA labels where needed, tooltips were built in-line, and tables were structured to be responsive and screen-reader friendly. All UI elements were created with inclusive design principles in mind.
​
Streamlined Delivery
Thanks to earlier rounds of testing and iteration, the final solution was well-aligned with both user needs and business goals. This groundwork minimised design-by-committee issues and significantly reduced back-and-forth during development. Every UI element was backed by clear supporting documentation, enabling the dev team to work efficiently and confidently—without having to second-guess decisions or revisit earlier stages.