B2B Reporting Dashboard

Building a B2B Reporting Dashboard to Display Service Effectiveness

Making design decisions when the budget and resources are tight, while achieving the goal of increasing B2B client retention rate.

OVERVIEW

TL;DR

Working with the sales team to develop the B2B Reporting Dashboard (in this project, we called it the HR dashboard). The process includes gathering requirements from various stakeholders, evaluating the requirements based on impact / effort, and implementing the requirements into design iterations. During the project, I faced a big technical constraint and had to re-structure the design to achieve the goal. After the deployment, the HR managers were happy seeing the insights; however, there were also flaws that are discussed at the end of the project.

Role

UI/UX Designer

Skills

Research | User interview

Design | Fast prototyping, low & high-fidelity design

Product | Tech handoffs, Quality assurance testing

Tools | Figma, G-suite

Stakeholders Involved

External | B2B clients (HR managers)

Internal | Sales team, tech team (out-sourced)

Timeline

Jan 2022 | Research + design

Jan - Feb 2022 | Tech handoff + testing

BACKGROUND

Safe Space is a mental health-tech platform that provides online and offline counselling services for customers. They work with B2B clients, mostly the HR managers, to roll out Employee Assistance Program (EAP) to provide counselling sessions to the employees at the companies.

The HR manager would decide how many counselling sessions to supply per employee, and the employees would receive the counselling sessions in the form of promo codes. The HR manager would be given access to a HR dashboard to track the counselling utilisation from employees, anonymously.

PROJECT BRIEF

The old HR dashboard only provides the information of counselling session utilisation, and the HR manager doesn’t find it useful at all, because what they are looking for is more insights around the employee mental health that they can action upon. This project is to understand the HR's needs in order to improve the dashboard to provide more value.

1. GATHERING REQUIREMENTS

We worked mainly with the sales team to come up with requirements, since they are the team that the B2B clients would contact directly. From the back and forth discussions, we understood more about the HR manager and what kind of information they find useful and valuable.

We listed out the features and evaluated each features using the quadrant of high/low impact versus high/low effort, in order to decide on the priority of the features for the first build. (Effort = design & tech effort; Impact = impact on B2B retention)

The list of features:

Promo code utilisation by month
Promo code total utilisation
Self-service promo code
Employee list management
Country / site categorization
Employee feelings / symptoms / reason for counselling
Appointment line record
Webinar request portal
Manage webinar
Clinical report request
Manage clinical report
Testimonial display

How might we display the data in the HR dashboard for HR managers to understand Safe Space's effectiveness in improving their employees' mental health, in order for them to retain their EAP purchase with Safe Space?

2. THE DESIGN ITERATION PROCESS

✏️ Ideation & Wireframing

I started by doing fast prototyping on paper, then transformed my ideas to digital wireframes using Miro.

The purpose of this is to experiment the different methods to present the data visually, and how it could affect user's interaction experience.

I called this the "playground" where free flow of ideas are thrown onto the canvas.

✏️ Low-Fidelity Prototyping

To visualize the dashboard, I began putting together the low-fidelity prototype to demonstrate the experience of an HR manager. I made the following design decisions:

The filter bar is located at the top to allow the HR manager to toggle between different countries / sites and time range of the data. As a lot of our B2B clients only has one HR manager who manages different countries' team.

To highlight the voucher (promo code) utilisation by putting it above the fold. Because it is always the first question HR managers ask every month.

To add the appointment line record that gives transparency to the utilisation of counselling sessions. It is less important so it is below the fold.

This section consists of dynamic data that can be updated by the sales team. It serves the purpose of advertisement for Safe Space's service.

In the second iteration of the low-fid prototype, I decided to combine Voucher Utilisation with Session Utilisation, to highlight the ratio of utilisation from different demographic.

To allow the HR manager to interact with the interface by hovering over the bar graphs, to see specific utilisation number on session and voucher.

🎨 High-Fidelity Prototyping

After validating the design with the sales team, I proceeded to convert the design to high-fidelity prototype before showing it to HR managers and the broader team.

Desktop

Mobile

📌 Challenge #1: Misalignment in the requirement

After showing the high-fidelity prototype to the sales team and the management, I soon found out that there was a misalignment in the requirement gathering process: The employees' feelings / symptoms / reason for counselling is the most important data that the HR managers wanted to understand.

I validated the insight by showing the prototype to 4 HR managers who are our existing B2B clients. I learned that even though promo code utilisation is important to them, but knowing the mental health struggles that the employees are going through is even more insightful. Because this piece of information allows them to make decisions for the company events, and find ways to engage with the employees.

After experimenting with different displays, I added the section for employees' feelings / symptoms / reason for counselling to the dashboard:

Desktop

Mobile

📌 Challenge #2: Designing with the technical constraints

The Product Manger and I shared the prototype to the engineering team. The team highlighted the problem that with the number of filters on the page and how all data was displayed on one-page, it cannot be done smoothly. The risk of building everything in one page will significantly slows down the performance and could cause negative user experience.

We also discussed that the mobile version will take significant amount of time for quality assurance testing, with the amount of new components being added to the page.

Therefore, after evaluating and aligning with the stakeholders & considering the current resources, we made the following decisions:

To split the dashboard content from one-page to three-pages, and reduce the number of filters to improve page performance speed.
To not spend design / tech effort on the mobile version as most of the HR managers only use desktop to check the utilisation. The dashboard is something they use during work-hours and is not something they will check during their free time.

4. FINALIZING THE SOLUTION

After the previous phase, I scraped the previous design into small pieces and re-structured the information according to the impact of the information. I also worked together with the Product Manager to reduce certain features that are "good to have" and parked them for future iterations. In the final design, the content is distributed to 3 pages:

🎨 The Overview Page

The HR manager wants to see the issues that the employees are struggling with, and how effective is Safe Space in helping them solve the mental struggles. Therefore, aside from highlighting the reason for counselling, I also added the "Employee Post-Session Feedback" data onto the first page. As most of the post-session feedback are very positive, we want to shout out about it to the HR manager. The effort for gathering and displaying this piece of data is low-effort so it can be easily done.

🎨 The Utilisation Page

The Utilisation page is the only page that has "Filter" functionality out of the three pages. This is because being able to filter the utilisation for different offices is important for reporting purposes, which is different from the purpose of the other two pages. The Appointment Line Detail is also in a separate page under the Utilisation page, this is to reduce the loading effort for this page, since the Appointment Line Detail is not frequently visited by the HR managers (once a month).

🎨 The Promo Code Page

The purpose of the Promo Code page is only for the HR manager to understand if more budget needs to be spend on the service, whether they need to top up or to to remind the employees on using the services. In addition, Safe Space sales team would always keep the HR managers updated on the utilisation if it is used up by 80%. Therefore, the data is not as valuable and impactful as the data on the other two pages.

AFTER DEPLOYMENT

😊 The good news?

HR managers are happy with the dashboard. After the deployment of the HR dashboard, we have received feedback from the HR managers that they love the Overview page where it shows them the feeling / symptoms / and reason for counselling from the employees! They are now able to log in to the dashboard whenever they want to. On the business development side, it also helps us to win more deals.

🧐 The not-so-good news?

Inaccurate data due to bugs and miscommunication: Due to the dashboard's functionality being heavily dependent on data, there were a lot of calculation behind each component, and a lot of conditions that the calculation has to consider. Therefore, about 1-2 months after the launch, we received many complaints from the clients or the sales team that the data displayed is not correct.
- How did we solve it?
  - For bugs, the only way is to test, test, and test. As the product team was tight on resources, we solved the issue by manually doing rounds of testing.
  - For miscommunication with the sales team, it occurred because the logic for the HR dashboard display was not clearly written down. Therefore, I created a deck that clearly states the logic for each data display, and called for a meeting with the relevant stakeholders to present and remind the team to refer to the deck when confusion arise.
Quickly lose the competitiveness: Although there were positive feedback about the HR dashboard, the HR manager did not open the dashboard as frequently as we expected. Soon we discovered that our competitors also have similar data displayed on their HR dashboard and the data is more comprehensive as well. If we do not improve fast, we can lose client.
- How did we solve it?
  - We are currently in the process of including more valuable insights for the HR manager, by researching and understanding the tools that we can use. The solution remains confidential to the business.

MY THOUGHTS AFTER THE PROJECT

One of the challenges in this project is to recruit HR managers for testing. The HR managers are not like B2C clients who benefitted directly from our services, instead our service is more like a "check-box" to the HR managers. Therefore, they do not have much of interest to participate in user interviews. I feel like this is a challenge that I have not been able to overcome, so most of the insights are still dependent on the sales team. If more time and budget are allowed, I would like to explore for ways to incentivize the HR managers to participate in user interviews with me.

A big learning I got from this project is communication with the stakeholders. There were a couple of times where the sales team and the product team misunderstood each other, especially around the details of the logic. I figured that a method to prevent this from happening is to have clear writing records after every meeting, or even during the discussion, "take note during the share-screen". It is also important to have proper announcement for each product updates before and after feature deployment. We were not able to do it in this project. The learnings are valuable and it helped us to improve our collaboration in the upcoming projects.