MassMutual Workplace

Web design

Background

MassMutal is a mutual insurance company serving 5 million clients. It offers both online and offline services to satisfy people’s financial goals. In May 2018, I joined the Customer Experience(CX) team as an UX intern.

The MassMutual workplace is the first project I took. It works as a tool for those financial intermediaries and plan sponsors to promote our products.

Problem

Two years ago, MassMutual established the digital team to renew its online digital experience. The brand new digital ecosystem aggregated all our independent websites under MassMutual.
The Workplace website reaches its life cycle, it has 2 main problems:

Challenge

The biggest challenge for me is
to understand the insurance industry and how advisors work.
When it comes to the insurance industry, it has so many complicated terms and rules. Also, I have no experience and knowledge about the advisors. I worked very close with our product owner and asked questions and feedback from other senior designers.

Who is the user

Goal & strategy

In order to understand better about our goals and strategies, I conducted several meetings with my product owner Matt. We defined the design scope,
I tried to understand the target users by keep asking him questions. And we agreed that the navigation bar is the main problem of the site and we should start from there.

Navigation bar

Problems

The navigation bar has three main problems:

New sitemap

In order to deliver a clear and clean navigation bar, I started from the information architecture. Since the products under financial advisors and plan sponsors are the same,  And this website serves more like an marketing website, for our users the most important thing is to check our products and benefits, I decided to group all the products into "solution" . So, I came up with the first site map:

Business challenge

But we faced the challenge from the business part. Business insisted that to put the "AdvisorAdvantage" as an independent group since there is a portal inside can keep advisors' information, trigger actual service plan and bring revenue.

But we faced the challenge from the business part. Business insisted that to put the "AdvisorAdvantage" as an independent group since there is a portal inside can keep advisors' information, trigger actual service plan and bring revenue.

How we deal with

However, from the user experiences perspective, we think this website is not only for advisors, but also plan sponsors, and the "AdvisorAdvantage" is really a tool which only works for advisor, so, it makes more sense to group them under "Financial professionals". And it is just a tool, not even a product, it might confused people if it is an independent group since all products and tools are already grouped under "Solution".

Wireframe

Besides the navigation bar design, I also conducted some content exploration to make sure the content can fit into the components but can also have a good hierarchy.

Visual Design

After presented to the business and got the approval, then we moved to the visual design. I worked closely with the visual designer and the engineer lead to ensure:

All the visual design was by Adi ben Hur.

User testing & feedback

After the visual design, we conducted user testing on get feedback and iteration ideas.

Further metrics to measure success.

When the website launches, the product owner and I will check the traffic and bounce rate to see if it is successful or not.