Background

Empower Retirement is the nation’s second-largest retirement service provider, with 12 million participants and individual investors. With the success of their 401k platform and acquisition of Personal Capital, Empower Retirement made the decision to merge the experience of Personal Capital and Empower.

Scope

UX Design
UI updates
User testing

Team

Catherine Nguyen - UI Designer
Jessica Morales - UX Designer
Jeff Keil - UX Designer

Tools

Sketch
‍Zeplin
Invision

My Role

UI Designer
UX Designer

Overview

Empower has not had a redesign of their 401k application in several years. With their UX and some UI out of date, clients have turned to competitors to manage their employees 401k contributions. Customers have also had difficulties truly understanding financial language, how their retirement works, and how to meet their goals in order to retire with enough funds.

Our challenge was to modernize and update the designs as well as the flow of the 401k application in order for our diverse users to get the whole financial picture as well as make the financial language easier to understand for our users.

Empower 401k would offer users an estimated retirement income, net worth, savings, spending and debt in a simple snapshot on the homepage, helping individuals and financial advisors better understand progress toward many different goals, such as preparing for a secure retirement, paying off debt or establishing emergency savings.

Empower's Style and Branding

In order to start the redesign process, we first re visited Empower's current branding guide line in order to draw some ideas on what the new platform could look like and what sort of typography, color, and components were appropriate.

This process was required due to Empower not having a current Design Library that our designers could rely on. The process to create the Design Library took several months to accomplish and we met on a weekly cadence to complete the library.

Empower's Typography

Merriweather became the Primary font for Headers due to its sturdy and pleasant format. Opens Sans is as secondary for lengthier portions due to the ease and simplicity of this font.

Empower's Brand Colors

As a team, we decided to dress the 401k platform with the Primary Colors as seen at the top of the Brand Colors Slide

Understanding the Problem

In order to currently understand the problem at hand, the team had a session to review  customer comments and complaints about the current 401k platform. The allowed us to organize these comments through affinity mapping. From there we began the process of creating a "happy path" or an ideal path user flow of a user performing a task on the 401k platform.

Empower Affinity Map
Affinity Mapping

A common theme is seen during the affinity mapping session and we narrowed it down to 3 major pain points

Initial User Flow

Personas

Personas were created based on our user demographics. The three personas represent different generations, economic background, career backgrounds, financial literacy, and how often a user utilizes Empower's web services.

John

Age 30-39
Middle incomer earner, basic financial knowledge and literacy. Very tech savvy and checks their finances online on a weekly basis or more. Not on track yet to retire, retirement for John will be about 30 plus years.

Jane

Age: 40-49
Middle income earner who has some financial literacy. She does check her 401k online every other week or so and still receives her information in the mail. Will not retire for another 10-20 years.

Charles

Age: 50-60
High income earner, has several investments, has a good knowledge of his retirement account, but does not really check his account online, and primarily receives information via mail, makes calls to 401k customer service line every so often to make changes and adjustments. Predicted to retire in the next 5 years.

User Testing

Once we discovered the pain points of our users, identified the user types, we moved forward with user testing mid fidelity and high fidelity mock ups to better gage users understanding of the platform. We wanted to know which functionality was of the most interest to the user, where did they feel confused in the demo, the overall concept of the new 401k platform, and if trust can be established with our customers. Here are some findings that were discovered during the interview sessions.

Retirement Income Tool
Customer Feedback

The circle graphic relationship to the bar segments was clear. The sliders are understood by all participants. The Estimated healthcare cost in retirement needs to state monthly or annualParticipants wondered how the tool knew their health conditionsMost preferred that the 3 retirement income sliders be displayed by default

Net Worth Panel
Customer Feedback

“I just went through an exercise trying to calculate my net worth.  It would be relevant in future years. But do I want to know my net worth. Yeah, I would use it.”

“I guess I would want to know. I don’t know any other way that you could present it to give a positive impact. Tell the truth. That is what people need to see.”

The Final Product

Through the creation of a new design library, gathering archived research, user interviews, and testing, we felt confident in moving forward with the designs. In the new designs, users are now able to see their net worth. The net worth is based on a collection of data the customer has provided through Iinking their other financial accounts.

Empower Dashboard
Dashboard

The new dashboard presents a whole picture of the user's retirement through a pie chart.

How do I compare to others?

This tool allows users to simulate what their progress looks like compared to others at their age, salary, and gender.

Easy to Understand Data
Link Additional Accounts

Next Steps

The new and improved Empower 401k dashboard has been pushed to production as of April 2021.