case study

New York Stock Exchange
Standard Life

MANAGING A PENSION SCHEME

Complete guide from setting up to maintaining a pension account

Role

Product Design
UX Design
UI Design
Information Architect
Wireframe

2016/02 – 2017/04

Background

Standard Life, a retirement company based in Scotland, created Workplace Hub as a dedicated portal for employers to assign administrators the right to manage their workplace pension scheme. This is a complete journey from setting up the admin account to having it up and running.

Project scope

There is a lot of data entry and maintenance per employee for each company. We need to validate how to set up and display each task, so there is a clear understanding for admins on what are their next steps – in order to manage the accounts accurately and efficiently.

PERSONAL ACHIEVEMENTS

I worked alongside two (2) other designers, mainly responsible for the UI/UX experience of the portal. Although this was a year-long project, I am extremely fortunate to have had the opportunity to work closely with an international client and a team of 8 engineers based in Ukraine. I have grown tremendously, and here were some personal achievements I have gained through this journey:

  • Designed a 0 to 1 product. From identifying the project scope, creating a site map, building a roadmap, ideating, sketching, producing lo-fi wireframes, user testing, and finally delivering hi-fi designs.
  • Established a user journey. Successfully guide a user through the portal and set expectations to build familiarity within the platform.

The task

  1. Understand what is a Pension Scheme, who has access, how does it work, and when and why a user will need support.
  2. Create a portal that is clear, findable, and usable for a user to navigate on their own.
  3. Ensure a frictionless communication for our international client and users.

The Actions

Defining the user journey, and everything in between.

This was a very long session held between the CTO, 3 designers, and 2 key stakeholders from Standard Life. The session took over a week to accomplish, but necessary to establish all scenarios to assure that they will be reflected in the designs.

As we mulled through this journey, we also found ourselves constantly revisiting the project scope to ensure that we do not lose sight of the goal.

Working closely with the Head of Design and another designer, we spent about 2 weeks organizing the information in each step of the journey to understand the complexity as thoroughly as possible. When we got to a good place, we started sketching potential layouts of each element within a page, and then putting them together digitally in the next phase.

In preparations for user testing, we created a series of lo-fi wireframes and built out all the in between pages of one single journey. Here are some of those pages:

When an admin logs in, they are greeted with a progress bar and immediately guided to the highlighted area of tasks to-do.

Upon setting up a new account, an introduction is placed to set the expectations of this journey (displayed as bread crumbs above).

Once the data is in and configurations are set, tasks are auto generated and the admin will be presented with the whole list in their dashboard.

In the dashboard, there is a summary of all the data, as well as a list of populated tasks – showing the most urgent at the top of the list.

The whole journey was put through a 3rd party user testing company and when we got the results, it was mostly positive with some areas of surprises. Here are some high level findings:

Configuration
Unclear value of this page – what does it currently offer? Conflicting with step 3 and 4 in the timeline. Still lacking clarity.

We felt pretty strong about this page for setting context, but what the user testing revealed also had a very valid point so we ended up agreeing on the removal of this page!

Summary

Version 1: Loved this with a suggestion to use it as a “landing page” instead of the journey above. Reason being is the user will only need to edit what is necessary, but stresses that clicking “Accept & Continue” will lock-in their choices.

Version 2: Appreciated the more visual page design, but worries it is hard to follow as the tile layouts are the same in the previous page.

Hub Post Configuration
Single list view made sense, but was complex to follow.
With 2 lists, there is a clear priority for the list of actions; timeline adds value.
Not immediately clear to the user. Don’t need to-do-list filters.

After user testing, I started to create hi-fi prototypes using Standard Life’s brand. We went through another 3 rounds of user testing and 5 iterations before finalizing on the designs below. Once the designs were approved, the team flushed out all the remaining or missing pages in preparation to be shipped out for the engineers to start production!

The results

Successfully SHIPPED THE PRODUCT!

Since we were acting as consultants for Standard Life, once we handed the product over, we were removed from the client by New York Stock Exchange when our team was sold. Therefore we were unable to follow-up with what the metrics were, but I truly believe that creating this product from 0 to 1 must have made a positive impact to their call centers.

key takeaways

Knowledge Gap

There was a huge knowledge gap working on this project due to the unfamiliarity of the industry and the international profile. This project really taught me the importance of understanding the 5Ws in order to successfully design a viable and usable product.

Measuring Success

Due to company decisions and the inability to capture KPIs, this project has taught me to document existing KPIs and project expected KPIs upon release. This can also be a very good motivator to refer to as we are designing the product as well.