PrismHR Benefits Enrollment Workflow
Redesign of a complex workflow used by 2.5M employees

A Six-Month Redesign of Complex Legacy Apps

PrismHR's employee apps were extremely flexible and powerful, but our sales team was losing deals due to an outdated and confusing user experience.

Our challenge: redesign our Benefits Enrollment, Employee Portal and Onboarding applications into a new unified employee experience in time to show working software at our customer conference in June...only six months away!

The Team

• Product Manager
• Scrum master
• ~6 developers (all remote, mix of US and India)
• 3 QA (subject matter experts)

I was the design lead for benefits enrollment, while other team members led the employee portal and onboarding products. All three teams had to work closely together to meet our goals.

Benefits Enrollment Users

The benefits enrollment application is used by over 2.5 million employees of small and medium businesses to enroll in benefits when they join a company or go through annual open enrollment.

Since the users can be any employee of a small business, the target users range from farm workers to health care staff to restaurant waitstaff and technology workers. It's essentially a consumer audience inside Prism's wider B2B business.

Challenges

In addition to the tight timeframe, our redesign faced a number of challenges:

• Complex workflow with embedded business logic
• Mission-critical functionality (you don't want to mess up customers' benefits!)
• Legacy code that had evolved organically over 10+ years
• Multiple teams & codebases, on 2 different front end frameworks
• Millions of employees actively using the app and resistant to any loss of functionality
• Team distributed across US & India

We determined it would be too risky to refactor the back end within our tight timeframe. This meant that I had to understand the constraints of the back end so I could design a UI that met our goals while working with the back end instead of against it.

Learning a Complex Domain

I threw myself into learning everything I could about benefits enrollment. Luckily we already had plenty of customer feedback built up over years, plus a lot of ideas from our own dogfooding.

I dug into the legacy application and mapped all the existing screens, then went through them to identify pain points and usability issues.

It turned out that benefits is exactly the kind of complex, workflow-heavy domain that I love!

Mapping the Customer Journey

To create a unified experience, it was particularly important to understand the customer journey across the three applications. I made this journey map in Miro, with input from the other designers, to show the frontstage and backstage workflows for the Employee Experience applications.

Identifying UI Pain Points

I identified a number of pain points with the legacy application.

Using Prototyping to Sell the Vision

Based on my analysis, I felt strongly that a basic reskin wouldn't achieve the project's goals.

I rapid-prototyped several versions of the design, ranging from a straight reskin to a full redesign, and walked through each version with the cross-functional leads to demonstrate the difference in the experience. Having something concrete to work from helped the dev team feel confident about committing to an increased scope. I was lucky to have amazing dev partners who championed the improvements.

Although we ultimately cut some lower-priority features due to deadlines, the version we eventually released substantially matched the original vision. And we met our deadline goals too!

Benefit Cards

Benefit plans are extensively configurable and support localization in English and Spanish, so the design had to support different numbers of plans, amounts of text, and plan details.

I created a new core card design with variations for 6 different plan types. The cards had further variations for complex scenarios such as Evidence of Insurability (EOI) and underwriting.

Compare Feature

The existing plan comparison feature was clunky, hard to use, and didn't support smaller screen sizes.

Working closely with the front end dev lead, I designed a new Compare tool similar to those found on e-commerce sites. The tool is fully responsive and supports widely different amounts of text.

Responsive by Design

Over half of the visits on Prism's employee experience apps come from mobile, so it was crucial for the design to support a range of devices and screen sizes. I created designs for each of our 4 breakpoints and tested the implemented version on multiple screen sizes.

Theming

Prism's customers needed to be able to “white label” our applications to resell to their own customers. We designed a new theming approach that supported custom logos and two colors: a link/interactive color and an accent color.

The navigation automatically calculates its background color based on the selected accent color.

Prioritizing Accessibility

My team championed accessibility from the start of the project. We educated the cross-functional teams on accessibility guidelines and ensured that accessibility was part of the acceptance criteria for every development story.

I tested the implemented designs for accessibility and gave feedback for improvements to the dev team.

We achieved WCAG AA compliance for the new design — a first for PrismHR's apps!

Collaborating with a Globally Distributed Team

I held regular design review and technical feasibility meetings with the cross-functional leads, and walked through the designs with the whole team in our weekly refinement sessions.

I aimed to finish my parts of tasks before I left at night to keep the India team moving during their work day, and I often met with the overseas folks before US business hours.

I wrote detailed specifications in Figma to keep the distributed team on the same page, and I worked closely with the dev team during implementation and tested every development story for design and functionality.

Wearing the Product Manager Hat

When our awesome product manager went out on leave right before our major deadline, I stepped in to fill the gap.

I worked with the cross-functional lead to prioritize the team's backlog and write user stories. I ran team refinement sessions and led our quarterly planning meetings.

Showing Off at PrismHR LIVE

We met our goal of showing working software at our PrismHR LIVE conference. We had everything except one complex workflow in our test environment, complete with theming, ready to demo.

Since our product manager was on leave, I represented the team. I ran customer demos, gathered feedback about the new design direction, and ran hands-on prioritization activities.

Customers loved the new look and feel and the usability improvements. Our head of Product said it was the most positive vibe he'd ever seen at one of our conferences!

The Results

We shipped a beta in September, and the finished experience in November. We got extremely positive feedback from customers and our internal and channel sales teams.

We put substantial effort into making it easy and seamless to enable the new Unified Employee Experience, but in the end the improvements were so popular that we met remarkably little resistance. We were able to completely sunset the legacy system only 1.5 years from the redesign kickoff—a record for PrismHR migrations.

The Unified Employee Experience project won a bronze Stevie Award from the American Business Awards in the New Product category.

But maybe the most satisfying outcome was being able to use the redesigned experience to enroll in my own benefits!