Overview
GPP Finance customer portal is a responsive web based portal providing over 2 million customers with access to their pension and life policies; with various features. The current website was very outdated and failed accessibility. My role in the project was to design and lead the user experience while providing guidance to multiple stakeholders, BAs, operations, copywriters and developers.
The prototype was created on Figma and met AA accessibility standards.
The problem
The back office team were facing countless calls with confused and frustrated customers unable to view or take action on their policy; these actions could be anything from viewing policy documents, cashing-out, taking payment holidays.
The goal
The objective in sight was to provide users with a hassle free, easy to understand portal which allowed for all of the policy information to be provided and actions to be taken on the policy, while also providing access a secure messaging channel. We had also set out to reduce the customers waiting time for any information or actions they have requested.
The team
Throughout the project I worked in a cross-functional team. As the lead UX designer, I was involved in all phases of the project, from mapping out the problem to delivering final designs. The team consisted of over 15 individuals which included: BAs, Onshore and offshore developers, Operations, SMEs’, copywriters, UI designers and project managers.
Responsibilities
Lead UX design, Lead design communication with stakeholders, Interaction design, Wireframing, Prototyping, and Testing.
The Process
My process will be different in different projects and will be determined by many factors such as the project goals, business needs, complexity of the problem, time and etc. Here I’ll describe my process for solving this problem.
Research
Define the user
Before the team dived into thinking about solutions and designs, I encouraged the team to leverage the user research provided and communication with operations teams to understand the customers pain points while using the current website. We conducted various interviews to identify these pain points, opportunity and insights. Once completed the design team had collated all the data and found patterns in users perceptions and tasks; aggregated the findings in the form of personas.
Key Findings
Users had no choice but to call customer service as they were unable to take any action on their online account
Customers had to wait over 20 working days to receive information requested
Most policies were data heavy and very difficult to understand
Ideation
Potential solution
The research made it evident how complicated and limiting the available options to the user were. After summarising the information from interviews and data analysis, it was time to build a list of priority journeys and map out the various releases. Once the timeline and budget was agreed, the different solutions were sketched and reviewed by various teams and stakeholders. During this phase I collaborated with the various teams to outline any potential limitations or concerns.
User Journey flow
Working with the design team user flows were created; allowing me to communicate the whole user journey, covering all the screens, to the stakeholders. This also helps me to visualise and understand the whole user journey.
Design
Design library
The current website was very outdated and failed to meet accessibility. A timeframe and budget was agreed to rebrand, unifying the customer portal, IFA portal and back office portal. I had broken the task into a list of guidelines and standards required and split the design team into sub teams tasked with tackling the design library; I was involved with every step of the process, providing insight on best practice.
Mid-fidelity wireframes
Now that we had established a list of screens to cover all scenarios, grayscale wireframes to detail out the flows were created. In this step I also made a mid-fidelity prototype to test the idea with users and fix the problems in the early stage. Once issues were reviewed changes to the designs were implemented using the newly developed design library.
High-Fidelity Prototype
The mid-fidelity prototypes were then turned into a visually pleasing high-fidelity prototype. This helped provide a clear picture of the final product. The high-fidelity prototype was also used as part of user test and for discussions with stakeholders.
User test
Testing the idea
With the current customer constraints the high-fidelity prototype was tested with users; gathering feedback on the design and journey approach. Scripts were created in preparation of the user tests, covering the points of concert.
To measure the success of this test we defined to track:
The ability to understand various information on the policy screen
The ability to raise requests on the policy
Communicating with customer support through a secure mailbox channel
Development
Development reviews
During various steps in the project, the signed off screens were taken into development. Once the screens were developed they were then presented to the design team to review and outline any defects in the developed version. This action was taken till the date of release; leading to the project being released with 0 defects.
Project learning
What have I learned from this project?
Being able to lead a team and drive a successfully delivered project
Simplicity is strength. As a designer, we are often lured by attractive, trendy and out of the box designs. But, We must always remember the ‘why’. The primary goal is to understand the user, their problems and then come up with a design that solves it
Process in essential. For a project that is vast, it gives you a roadmap to navigate through what can be a clouded confusing route