Manager Toolkit

First Impression of the Problem Space

1. Clear business problem

The business problem with the current Manager Toolkit is clear: low usage rate - avg 9% of active managers visit per month. The existing features were built on the assumption that providing managers with sufficient data about their teams would naturally drive engagement. However, this approach has not delivered the intended results.

Existing features in manager toolkit

2. Unclear user problems

Analysis of user feedback revealed pain points distributed across interaction, journey, and relationship levels. However, due to the absence of prior user research, it was difficult to map these pain points to specific user personas or tasks. This made it challenging to pinpoint the root cause of low usage and commit to addressing a particular user problem.

Bringing Clarity to the Project

To address this fundamental gap, I focused on identifying user personas, tasks, and high-impact issues, laying the groundwork for developing a compelling project vision.

1. Clarify the project boundary

Defining clear project boundaries is essential for a large-scale initiative. While product leadership often seeks to "think further and broader," there's a fine line between exploring possibilities and losing focus. To address this, I aligned expectations with stakeholders and identified that our primary focus is around helping managers better manage employee feelings and engagement at work.

2. Set the research goal

Existing user segments reflected certain user needs. but they failed to effectively differentiate how managers handled employee feelings. My research aimed to identify behavior-oriented user groups and establish task-based manager personas.

3. Understand user tasks in general

I began the research by interviewing 10 managers recruited based on predefined user segments, regardless of whether they had access to a recognition platform at work. These interviews helped me map out the tasks involved in typical workflows for managing employee feelings. The findings highlighted that the key behavioral differentiator among managers is their level of maturity.

4. Understand user tasks with our product

I conducted 12 additional interviews with manager users to explore how varying levels of maturity influenced their use of our product. The findings further validated and refined the existing persona types.

User Personas, Needs and Problems

Four distinct manager user personas were established based on research findings, each reflecting unique needs and opportunities to enhance their experience on the platform.

How much has our product fulfilled

Despite the differences in personas, their pain points revolve around a common theme: a lack of convenience, guidance, and assurance.  

Lack of Convenience

Managers don't have spare time to navigate the platform's complexity.

• They have to download reports and manipulate data to get what they need.
• They lack an easy way to drill down into the less engaging areas.
...

Lack of Guidance

Managers take actions purely based on what they feel is right.

• They lack sufficient education on the impact of their actions.
• They receive little guidance on how to better take these actions.
• They are unaware of issues requiring their attention.
...

Lack of Assurance

Managers lack confidence in their contributions to employee engagement and their trust in our platform.

• They receive incorrect and inconsistent data.
• They don’t know if they’ve done all they need to do.
• They don’t know if they are fair in rewarding team members.
...

Visionary Design for All Phases

I conducted workshops with stakeholders to brainstorm ideas for enhancing the manager experience by addressing known needs and problems. These ideas were evaluated through value prioritization testing and then pitched to the senior leadership team.

This process enabled me to create designs with clear intent and strong validation. While the concepts were rough design mockups and details may evolve in later phases, the core intent will remain consistent.

Visionary design mockups

Detailed Design of Phase 1

Phase 1 aimed to empower managers to conveniently take and track the required actions. The detailed design focused on clearly communicating the following 3 key points to users, along with providing guidance for each:
• What are the actions and the expected goals?
• Why do you need to do this?
• How are you currently doing?

1. Guide through card layout

The initial card layout in the concept design highlighted various activities but treated them as equal, offering users no clear guidance beyond presenting them as a list of to-dos.

ITERATION A

With the intent of establishing hierarchy among the activities, more visual weight was added to the core action of "sending recognitions," while the remaining actions were grouped together.

❌  Scalability

The scalability is limited for desktop, as the content can only scale vertically within the separate column.

ITERATION B

More flexibility was added by separating activities into individual cards.

❌ Reading sequence

The order of the cards doesn’t tell a clear story and feels random. This problem will get worse in the mobile view, where the cards are read sequentially.

FINAL GROUPING SOLUTION

To group the activities in a way that guides users through a cohesive storyline, I ended up organizing the layout around two central themes
• Timing-related actions - The sooner managers take these actions, the better.
• Recognition-related actions - The more often managers engage in these actions, the better.

✅ Easily understood by users

I have a quick summary of actions I should take based on what’s pending and what’s coming up. I also have ways to access a summary of recognitions or engage with my team’s recognitions.

It looks like the bottom one is also trying to get me to take an action, but it's proactive instead of responsive, so I should go do something.

2. Guide through charts

For actions where we can’t explicitly indicate 'X left to do,' we need alternative ways to help users understand and track their progress.

As a starting point, I combined the key elements—status, progress, and goal—into the initial layout. However, this setup may create a sense of constantly playing catch-up throughout the month, which could feel discouraging, particularly given the low manager engagement we’re currently observing.

ITERATION WITH TESTING

Since sentiment will play a crucial role in this design decision, I incorporated user testing throughout the iteration process to capture the intended emotional responses. Below are some key findings that guided the final solution.

Expectation for a chart

• The size of the chart doesn’t matter much.
• Charts evoke a general feeling rather than detailed analysis; overly complex charts tend to confuse users.

User of color

• Green is universally perceived as positive.
• Displaying the full range provides more incentive for engagement.

Format of data

• Division feels more precise but is less encouraging compared to percentages.

FINAL CHART DESIGN

✅ User feedback from CA launch

I'm obsessed with getting into the green zone and really want to get that star!

3. Ensure accessibility

In review of WCAG Level AA compliance, the charts may not meet one of the requirements:

"The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): Parts of graphics required to understand the content, except when a particular presentation of graphics is eto the information being conveyed.

Identifying three colors that meet the required contrast ratio while remaining visually appealing is challenging. Compromising their effectiveness is also not ideal, as these colors significantly enhance the overall user experience. In collaboration with the design system UI designer and the accessibility manager, we determined that the concern primarily applies to charts that rely solely on colors to convey the meaning of their segments. In contrast, our chart remains fully comprehensible even if all colors are removed.

❌ Can’t locate legends in the charts

✅ The progress is understandable

One adjustment we made was to remove bold-colored text to avoid creating correlations between a specific part of the text and the colors in the chart.

❌ Color correlation between the text and chart

✅ Pass AA compliance