As I didn't have access to my original files or the previous version of the feature, I've done my best to explain the changes I made based on the last version of the product. This explains why, although this project is from 2020, it reflects the latest rebranding.
In 2020, I joined Officevibe as a Product Designer during a pivotal transition. The company was evolving from a traditional HR reporting tool into a more broad team development platform. As we migrated users to this new system, my challenge was to revamp and reintegrate key features from the old system, specifically the comparison reports.
- Eliminated a significant source of user confusion
- Enhanced accessibility.
- Included more data without sacrificing usability.
Context
Officevibe, an HR Employee Engagement tool, measured engagement across 13 metrics (e.g., Recognition, Alignment, Relationship with Manager), with each metric comprising multiple submetrics. The “Engagement Comparison” report displayed engagement scores in a table format, featuring color-coded cells to indicate variations. The “Benchmark” report compared team scores to industry percentiles, also using a color-coded system.
The Challenge
Upon reviewing the product, I identified several issues:
- An overwhelming number of separate reports.
- The Benchmark report’s percentile data was confusing to HR customers.
- The color-coding system created accessibility issues.
I saw an opportunity to simplify the app by merging the two reports. My proposal was to include benchmark data at the top of the table, displaying the industry average score for easier comparison.
There was initial resistance. Some team members worried we might be reducing the product's value or that users would miss the percentiles. However, the Product Manager agreed to migrate clients without the percentiles view.
Surprisingly, no one ever requested the old view. Customers found the new version much easier to understand and explain to their superiors.
Previously, only admin-level users could enter industry information, which created issues when other users needed to consult the data. To address this, I added a small cog icon that opens a modal window where any user can edit the industry.
Colors and accessibility
The scores and score variations were color-coded in buckets from bad to good.
To address these issues, I removed yellow from the chart and expanded the range of red and green tints. Scores close to average were represented by light green, resulting in charts with more green than red overall.
Selecting a data visualization color palette is challenging, as it needs to complement the product's branding and design system while effectively conveying information.
I conducted tests to ensure that the reds and greens would be distinguishable for all types of color blindness, and that each bucket would appear slightly different from the others.
Recognizing that color alone shouldn't be the sole means of conveying data, I added "+" or "-" symbols before each number in the Variation report to improve accessibility.
Adding more dimensions
While the report had always displayed metrics, clients expressed interest in seeing submetrics as well. With the table cells already showing the maximum number of columns, we faced the challenge of presenting 28 dimensions.
I explored various options through multiple sketches:
- Horizontal scrolling
- Modal windows
- A "+" button to swap metrics/submetrics
However, none of these solutions felt sufficiently simple, and the context switching contradicted the feature's core purpose.
Ultimately, I decided on an overlay for the table. When users click a column header, instead of sorting the table, the submetrics appear above and can be quickly dismissed.
Mobile design
The mobile version proved relatively straightforward to design. The filters remained at the top, and the table displays one metric/dimension at a time.
On the desktop version, users could hover over a grey cell to learn why no data was displayed (a minimum of 3 answers is required to show results). For the mobile version, rather than using an alert banner as suggested by the developers, I proposed a subtle message directly below the data.
Additional improvement: reducing copy
The previous version of the app contained an abundance of text that users didn't always need, giving it an almost "paper-like" appearance. To address this, I developed guidelines for designing headers (as we didn't have a design system at the time). Most information that users only needed to read once, such as during onboarding, was placed in a "?" tooltip next to page titles.
Here are the dev specs for the filter components (yes, we didn't have a design system!):
