Employee Benefits Portal
Objective
As part of their digital transformation, an HR tech company wanted to create the next-generation employee portal experience. The existing portal had low employee engagement and satisfaction, and users voiced frustration with the poor usability and uncertainty with decisions around their benefits. The new employee portal design aimed to proactively guide employees to engage or make decisions with their benefits through personalized recommendations and actionable messaging.
Role
UX research
Design thinking sprint planning and facilitation
UX design
Process
Research
To understand the current site experience and user problem, I collected research from customer care feedback, post-visit site surveys, client feedback, and site analytics, which uncovered the following:
Users are overwhelmed with the amount of content on the site and find the info unclear
Due to the unclear info, users don't feel confident whether they're making the right decision
Analytics reveal low site engagement, including low monthly repeat visits and low click-rates on key messaging areas on the homepage
Design Thinking Sprint
I planned and facilitated a 5-day design thinking sprint with product managers, stakeholders, business partners. To gain end user perspectives outside of the organization, sprint participants also included 4 employees outside the organization. Key learnings from the sprint included:
The problem: The end user participants validated problems surfaced from the upfront research. They also voiced concerns of not knowing where to start in the benefits decision making process due to clunky navigation or lack of benefit awareness.
Top values: Employee end users valued personalized, relevant info, proactive guidance, and peace of mind in an ideal benefit portal experience.
The user: 3 types of user archetypes emerged:
The fixer upper, who has a specific issue (financial, health, etc.) to address or improve
The optimizer, who is generally on top of their benefits but wants to make the most of the offerings provided by their employer
The crockpot, who likes the status quo but can be persuaded to make a change as long as they're certain that the change will positively impact them
Design & Iterations
To prioritize the key features of the new employee portal design, I collaborated with product managers and other designers on the project. The main features were:
Benefit awareness section to surface offerings that users may find useful but not know about
Required actions to call out high-priority items
Personalized, actionable suggestions to guide users with benefit engagement
Shortcuts for easy access to frequently visited pages within the portal
To validate design concepts, I conducted moderated user testing sessions and continued to iterate based on user pain points and stakeholder feedback. Key feedback and iterations were:
Users found the awareness section engaging and familiar, as the design leveraged the social media pattern of stories. Stakeholders wanted to add more descriptive labels including a headline and call-to-action for each item in the section, but users found the copy overwhelming. To balance the user and stakeholder feedback, design was updated to incorporate more descriptive, yet concise, labeling to provide more context to each awareness item.
When users saw several high-priority items, they weren't sure what to tackle first. The required action designs were updated to include due dates and icons to indicate differing levels of priority.
Users had mixed feelings of seeing personalized recommendations up front before being able to access the homepage. The design consequently integrated the recommendations contextually within the homepage.
Throughout the design process, the design system underwent several iterations, and all wires were updated with the most up-to-date design system components.
Design Thinking Sprint Artifacts
The initial layout had to-dos on the right rail so that to-dos had a prominent, dedicated section on the homepage. The awareness section leveraged social media's story pattern as a replacement to the traditional homepage banner. During user testing, users voiced that the 3-column layout was too overwhelming, but they found the story pattern engaging. Stakeholders added that most employees would have 2-3 to-dos at a given time, so to-dos were updated to live within the main body of the homepage with a 3-card layout.
For the awareness section, stakeholders were concerned that users wouldn't understand how stories worked despite positive user testing results, and pushed for having longer story labels that included a headline and a call-to-action subcopy, and wanted each story to have an icon to indicate whether the content was a download, video, or 3rd-party link. To further advocate against breaking design conventions of social media stories, the designs went through another round of user testing, which resulted in users being overwhelmed at the amount of copy and being confused at the different icons accompanying each story content. Stakeholders understood the value of keeping the icons out. To balance stakeholder concerns about the copy, the story labels were updated to have more descriptive text with a 2-line maximum limit.
User Journeys
User Flows
Homepage Iterations
The notification center served as the central hub for all action-oriented communications for the employee, which included 3 types: secure messages, required actions, and personalized suggestions. The initial design used a tab structure for users to filter through the different types of communication, but users during testing found the tab structure cumbersome to click through. They also felt like the design looked too much like an inbox and voiced concerns of missing potentially important actions.
To rethink the notification center design, I guided the junior designers to explore notifications on social media, and label designs for emails. As a result, the final design leveraged color-coded labels to replace the tab structure, and CTA buttons to drive more action for each communication type.
Notification Center Iterations
Initially, the plan page used the tab structure to allow users to click through their different plan details (health, medical, dental, etc.) while also seeing a personalized recommendation in context of the content on the page. Similar to the initial notification design, users found the tab structure cumbersome, and also found it distracting for the personalized recommendation content to change as they were clicking through the tabs. Stakeholders also communicated that personalized plan details such as balance or remaining deductible information were possible to integrate on this page. The final design was updated to incorporate the new plan details, and the tab structure was removed entirely so that each plan had its own, separate detail page.
Plan Detail Page Iterations
Next Steps
The new employee portal designs have been released to a handful of beta clients. The legacy desktop and mobile sites are being updated with low-feasibility next-gen site features.