Pensions and funds portal

Complex infrastructure with a simple user experience

Working with development teams, internal stakeholders and testing with users, I have worked on UX design for numerous customer portals, CPD portals, underwritten insurance and eCommerce purchase journeys.

As well as technical complexity, these projects generally involve managing complex business and stakeholder requirements - including working with project managers, BAs, product owners, IT architecture, call centre teams and external development teams - with various levels of sign off.

I work to ensure that all of this project and technical complexity translates to a simple user experience and ensures ROI on the UX process. Agile iteration ensures development teams know exactly what to build without the need for costly rework that impacts delivery timelines. The below example looks at UXD for a customer portal for Zurich's in-force Pension and Fund management clients.

CONTACT

WORK

Step 1; Interpreting the brief

I was asked to design a responsive portal to allow Zurich's pensions and funds customers to access statement information, and to make changes to their account and update their details online.

On the business side, servicing these customers offline (via paper comms and call centres) was expensive and inefficient.

On the user side, having to call in to edit or get updates on your policy was frustrating and time consuming.

My role: The challenge was to bring together the data available (from BE systems and the UX analytics currently available on the pre-portal servicing pages), speak to 'front line' call centre staff and Capita stakeholders to work determine the most common actions users wanted to complete, and then to work out how we could display the information required, working around the limitations of the underlying systems in place.

Outcomes: A considerable take up in use of the portal vs. offline communications, a reduction in paper and phone communication had meant the business have decided to extend the portal to service more products (e.g., ISAs and fund management), which they can do well as I designed this portal to be scalable.

Step 2; Understanding and agreeing requirements

Working with stakeholders from the business, development teams, Capita front-line servicing staff and IT architecture, we agreed project scope, deliverables, user need and the art of the possible.

Pension and fund information is complex, and the BE display of this information wasn't particularly user friendly! I worked with technical and IT leads to map what could be pulled from the data lake, and what would still require manual set up.

Where there was still manual work (i.e., tasks to be completed in Salesforce by Capita) I designed UI and messaging that would make outcomes clear to the customer.

I worked to map the information users wanted to see based on use case for each screen, designed clear navigation and specified how information should appear on the FE, and then began design and testing - running regular check ins with the various stakeholders along the way.

This stage was achieved through sketching out screens (which meant rapid and cost effective iteration with stakeholders, before UI design begun).

Within 2 weeks of project kick off, journey and screens had been mapped and agreed with feedback and buy-in from all stakeholders.

With the development team engaged from the start, we could then begin work in earnest without the need for either FE or BE dev to second guess anything about build - detailed user stories and frames had this covered.

Step 3; Design, testing and compliance

Once we had the deliverables aligned with user need and technical availability of data, it was time to frame.

As with any financial services project, there was now the issue of legal and compliance to consider in terms of journey and the text displayed. A collaborative approach always works best here.

I ensured regular reviews of copy (down to tool tips and messaging for customers). This work was completed working with the Marketing Communications team, to ensure the overall customer experience was aligned and seamless.

I also ensured we ran testing with end users (working with the Insights team to source existing customers from the InForce customer list) to iterate the initial designs and copy.

At the end of this process, we had a clickable prototype with all copy agreed and technical display we knew was possible - with UI elements and technical documentation that made it easy to pass to development.

This meant a reduced number of development sprints, as there was no need to second guess what needed to be done.

Step 4; User story creation and development

I created desktop and mobile designs in Sketch, and added these into a Marvel prototype.

I created user stories in Sprintr for each screen element, and worked closely with the development team and product owners throughout this process.

Accessibility requirements were also part of this process, making sure correct mark up was used, colour contrasts met WCAG standards, and things like tooltips were built in line, ARIA marked (where necessary) and tables were built responsively.

The user stories were detailed, and ensured as little as possible back and forth between developers and the business as guess work was removed.

As we had previously iterated and tested, I was confident in the solution provided, and this limited any issues around design by committee, as well as negating development questions as all UI and supporting documentation was readily available and already agreed.

Outcomes

The portal was launched on time and within budget (designed to be scalable to add further functionality and to extend to other financial products).

We've seen reduction in services queries via the call centre, and opt in to the portal has been successful when offered to previously offline customers over the phone.

The POC has now been extended to InForce ISA customers, who can now access and manage their funds through the same portal.

As it's an InForce portal, I'm afraid you can't log in, unless you have a Zurich plan of course! However the portal is live here

Programs and approach

Designed in Sketch
Prototype in Axure
Workshops with Capita call centre staff and stakeholders
Involvement with legal and compliance teams throughout
Close work with development team
Build managed through Sprintr in agile sprints

CONTACT

WORK

Testimonial

"Nat is a great problem solver and manages to put herself in the shoes of the customer whilst balancing the needs of the overall business objectives. She is super collaborative, a great listener and best of all understands the development cycle, meaning she designs solutions that work practically. This is especially important when working with internal digital teams such as developers and third parties when you need to quickly prototype viable solutions. She is also passionate about building solutions accessible for all audiences".