Scorecard
Workforce | EX
Epic Icon
The scorecard is one of the key places where the client will look for both the summary and detailed answers to their survey questions. By revamping the existing scorecard, we are adding features like comparing each block with the overall mean of the survey, customizing the scale favorability & colors, switching decimal points, and exporting the data to Excel. The new enhanced scorecard will be available in the portal as a widget.
Why?
Due to the old UX, the scorecard is difficult to use. It is difficult to understand the mean data and the comparisons are based on which marker or question. Scale favorability customization could be made easier and colors cannot be customized.
Problem
Solution
What are we trying to get out of the Scorecard?
Problems
Inability to sort results by favorability score, you can only sort by mean
To know the actual number of respondents per favorability (green, yellow, red) you have to manually calculate it
Overall benchmark (to be renamed) is confusing. On the category level it is compared to the overall survey mean, but on the item level it’s compared to the category mean. This is the desired behavior, however the way it’s shown today it’s not intuitive to users.
Labels (distribution should be favorability, benchmark should be something that’s clear that it’s comparing to their score not other companies’)
Scorecard in admin doesn’t allow for comparison between surveys, but it does in Manager in portal. Even in the manager portal, this table view is very confusing.
Jane is an administrator who manages the employee experience surveys and want to analyze the data in scorecard. Due to current scorecard she is not able to fetch the detailed information and is not able to customize her scorecard to add it to her presentation. ��Jane wants the ability to customize and compare the scorecard results to finish her study. She would want the scorecard to give her detailed information.�
�
�
The purpose of this highlighted in red is to show YoY comparison and see the greatest improvements and the greatest declines
Jane Doe
Demographic
Name
Behaviour and Actions
Needs and Pain Points
User Persona
Jane is an Administrator who manages the employee experience surveys and want to analyze the data in scorecard -
Use Cases
Suggested solution is to do a revamp of the scorecard and significantly increase usability.
Revamp features:
Solution Description
Current Scorecard
Scorecard New Design
Scorecard Default View
Name of the study and overall respondents (n=completed the survey)
Metric’s rows in grey to help identify the user the difference between the Metric and its content when expanded
Study overall mean
Kebab icon triggers a drop down menu with options to customize the color palette, favorability intervals and decimal places displayed.
Add Benchmark comparison
COLLAPSED METRICS
Scorecard Home
EXPANDED METRIC EXAMPLE
Different font weights are assigned to each level to help identify easily the metrics, sub-metrics and questions/items.
Metric - Medium
Sub-metric - Regular
Question - Light
The overall results framework will remain sticky when the table gets too long
A scroll bar will indicate the user content existing beyond its sight
The widget will occupy as much space as possible depending on the screen size but no more than that, respecting a distance of 16 px from the upper menu bar and the bottom of the screen.
Scorecard Comparison Interactions
To understand where the mean comparison is coming from, the hovered-over mean will be highlighted, as well as the mean to which is comparing, in this case it’s the overall mean. A tooltip will be triggered explaining where the comparison result comes from.
METRIC VS OVERALL MEAN
Scorecard Comparison Interactions
METRIC VS OVERALL
Scorecard Comparison Interactions
SUB-METRIC VS METRIC
Individual Question will compare against the category its in, whether its a Sub-Metric or Metric. See next slide.
Scorecard Comparison Interactions
QUESTION/ITEM VS SUB-METRIC
Individual Question will compare against the category its in, whether its a Sub-Metric or Metric. See next slide.
Scorecard Comparison Interactions
QUESTION/ITEM VS METRIC
In the case where there are no Sub-Metrics set up.
Customizing Favorability Color Palette
Customize Color Palette for Favorability
Customize Color Palette for Favorability
Customize Color Palette for Favorability
Customize Color Palette for Favorability
Customize Color Palette for Favorability
Customize Color Palette for Favorability
Customizing Favorability Intervals
Customizing Favorability Intervals
OPTIONS MENU
Favorability Intervals Modal
DEFAULT STATE
Favorability Intervals Modal
HOVER OVER DIVIDERS
Favorability Intervals Modal
DRAGGING INTERACTION
Favorability Intervals Modal
SETTING A NEW INTERVAL
Editing Decimal Places Displayed
Customizing Decimal Places Displayed
SELECTION FROM DROPDOWN MENU
One Decimal Place
Reducing the decimal places shown will round the values to the nearest whole number (halves round up), resulting in possible changes in the Positive, Equal or Negative results from the comparisons.
Cero Decimal Places
Adding a Benchmark Comparison
Adding a Benchmark Comparison Widget
Adding a Benchmark Comparison Widget
The user can select from previous studies or upload data to compare to and add UP TO 4 studies to a comparison.
Scorecard Home
Scorecard Home
Thank you!
#ft-relatedchannel
Phase 2
Adding comparison to overall/Delta score
Action Planning
For HRBP - Overview
The action planning editor widget allows dashboard viewers to create action plans based on survey results.
For example, maybe your team’s engagement scores are lower than expected. Maybe your company isn’t measuring up to industry standards in certain areas. The action planning editor widget allows you to create plans to resolve these issues. Within these plans, you can indicate progress, create sub-tasks, and tag the appropriate dashboard users and hierarchy units involved in the initiative.
Notes
User Story
Jane is an administrator who manages the employee experience surveys and want to analyze the data in scorecard. Due to current scorecard she is not able to fetch the detailed information and is not able to customize her scorecard to add it to her presentation. ��Jane wants the ability to customize and compare the scorecard results to finish her study. She would want the scorecard to give her detailed information.�
�
�
Scorecard
Name of the widget changed from Drivers to Scorecard
Name of the study and overall respondents (n=completed the survey)
Metric
Sub-Metric
Question
Add a Comparison Widget
Study Overall Mean
STATE - DEFAULT
Respondents tooltip. “N” allows to save space but this way it is explained
Widget Menu Button
Scorecard
Example of a metric without submetrics
STATE - DEFAULT
Scorecard
MODAL - ADD BENCHMARK WIDGET
User can name the widget
Select the studies to compare (up to 4)
Scorecard
MODAL - ADD BENCHMARK WIDGET
Dropdown active
Scorecard
BENCHMARK WIDGET
Studies added
Name of the original study to be compared
Scorecard
STATE - DEFAULT (Widget Menu Active)
Widget Menu Button active
Scorecard
STATE - COLOR PALETTE EDITION ACTIVE
Scorecard
STATE - COLOR PALETTE EDITION ACTIVE
Scorecard Home
Metric
Overall Mean - Mean to which is comparing
Metric Mean - One being hovered over
To understand where the mean comparison is coming from, the hovered-over mean will be highlighted, as well as the mean to which is comparing, in this case it’s the overall mean.��METRIC MEAN
- COMPARED TO -
OVERALL MEAN
HOVERING OVER A METRIC MEAN VALUE
Scorecard Home
To understand where the mean comparison is coming from, the hovered-over mean will be highlighted, as well as the mean to which is comparing.
SUB-METRIC MEAN
- COMPARED TO -
METRIC MEAN
Sub-Metric
Metric Mean - Mean to which is comparing
Sub-Metric Mean -
One being hovered over
HOVERING OVER A SUB-METRIC MEAN VALUE
Scorecard Home
Single Question
To understand where the mean comparison is coming from, the hovered-over mean will be highlighted, as well as the mean to which is comparing.
SINGLE QUESTION MEAN
- COMPARED TO -
SUB-METRIC MEAN
Sub-Metric Mean - Mean to which is comparing
Single Question Mean -
One being hovered over
HOVERING OVER A SINGLE QUESTION MEAN VALUE
Option B
Considering the feedback of the UX Teams a different version of the scorecard was made��Goal�- Define metric areas with different colors to ease legibility
- Use tooltips to explain comparison algorithm
Scorecard Home
To ease legibility 3 levels of colors were defined for each instance: Metric, submetric, question/item
COLOR CODE
Scorecard Home
Hover triggers a tooltip explaining with which mean that result it’s being compared
TOOLTIP
Scorecard Home
Hover triggers a tooltip explaining with which mean that result it’s being compared
TOOLTIP
Scorecard Home
Hover triggers a tooltip explaining with which mean that result it’s being compared
TOOLTIP
Scorecard Home
Hover triggers a tooltip explaining with which mean that result it’s being compared
TOOLTIP
This one is a version of a metric without sub-metrics