Critical Number Redesign
UX/UI & Implementation
overview
Align is growth management software that organizations use to keep their goals and people aligned as they scale. As the Product Designer for Align, I redesigned the Critical Number component.
THE FEATURE
Critical Numbers are a set of 1-5 metrics companies identify each quarter as most critical to their success.
Critical Numbers are the first thing users see when they log into the app. The purpose is to help users quickly assess the status of their essential numbers and to promote alignment, transparency and accountability.
The CHALLENGE
Align was originally designed to digitize a business methodology known as the Rockefeller Habits. According to Rock Habits, businesses should choose their Critical Numbers once a quarter during their strategic planning sessions. Almost all early Align users had a business coach to help them implement this methodology. As a result, Critical Numbers were designed to work within this particular guided structure.
As Align grew its user base and started to enter new markets, new users were less likely to have a coach and were more likely to be unfamiliar with the Rock Habits. As a result, they were confused by the rigid workflow.
This redesign was a response to the business need to connect with users who did not employ a coach due to a shifting user base.
The redesign
The redesign addressed two fundamental issues with Critical Numbers. Critical Numbers were:
1) Difficult to understand — Users didn’t understand how the status of the numbers were calculated which made it hard to answer the fundamental question: “Is my company performing well, and why?”
2) Confusing to create and update — Usability tests found that users were confused why critical numbers were created and updated in different locations. They struggled to locate the area in the strategy section where critical numbers were created.
PROCESs & tools
NPS (Net Promoter Score) feedback
Support tickets
Customer Interviews
Observational Studies
Timed task-focused “find-ability” study
Sketches
Prototypes
Feedback
Iterations
Implementation (CSS, HTML, TypeScript)
Team
I worked with two engineers on this feature.
CHALLENGE I: CONCEPTUAL
overview
The most common question we heard from customers was “How are the color statuses of my Critical Numbers calculated?”
The purpose of the redesign was to provide users with the visual indications and context needed to assess and act on their Critical Number status.
User confusion: color Status calculation
Align calculates whether or not a Critical Number is “on track” and assigns one of four colors: red, yellow, green, and “super-green”. However, the progress calculation was not shown or explained.
BEFORE: Lack of context. The component does not explicitly indicate what the colors mean or how they are calculated. Additionally, users cannot tell where they are on the spectrum, i.e. if they are yellow, how close are they to red or green? Which green is “regular green” and which is “super green”? What do these colors indicate?
User confusion: TWO TYPES OF CRITICAL NUMBERS
To add to the confusion, color status was calculated in two different ways and these two calculation types were indistinguishable on the dashboard. Understandably, users were confused and did not know what these calculation types meant.
BEFORE: Users could not tell the progress calculation behind each color. Some of these numbers are “time-based” and some aren’t!
1) “Time-Based Numbers” progress is time-weighted, i.e. calculated based on how much time has passed in the quarter. For example, if Sally completed 50% of her goal in the first week of the quarter a time-based number would show her as green / on track. If it were the last week of the quarter she would be behind / red.
2) All other critical numbers have a flat set of 4 colored targets. Their status is independent of time. For unknown reasons, this type of number had no name.
Before: Creating Critical Numbers in the strategic planning module was very confusing.
BEFORE: creating a “Time-Based” Critical Number.
BEFORE: creating Critical Number that is "not Time-Based”. This type of critical number didn’t have a name, the target section was not labeled, and the target colors were difficult to see an inaccessible.
first step: Naming Components and cleaning up the design
We interviewed users and found that even frequent users were confused by the “Time-Based” check box.
To address this, we added a section label, named the previously unnamed type of progress calculation and switched the check box to a radio button.
We tested various names with users before landing on “Custom Targets” for the “other” type of critical number and “Progress Calculation” for the section label. (To note, original mockups renamed “Time-Based” to “Time-Weighted”, but this new naming convention was dropped after feedback from user interviews who preferred “Time-Based”. )
AFTER: Labeled radio button replaced the checkbox. Font is bolder for legibility.
AFTER: “Custom Targets” are a named and the Target section is labeled. Colors are also labeled with an aria tag.
First round of sketches: meant to distinguish the types of process calculation. These sketches were shown for user feedback and iterated on.
second step: Visual representations
It was clear users needed a visual quickly assess their status as well as understand the progress calculations. I drew linear gauges in order to:
1) Visually indicate progress and contextually emphasize how far a number is from each level
2) Create a visual distinction between Time Based and Custom Target critical numbers to aid understanding. I laid the Time-Based progress bar next to a time progress bar to indicate how it was calculated.
Incorporating Feedabck
We went from not having enough information to showing too much of it all at once. Users found the first prototype to be overwhelming.
In response to feedback, I cleaned up the interface by implementing changes including — but not limited to — allowing the gauges to collapse and moving certain labels to tooltips.
CHALLENGE II: INTERACTIVE DESIGN
overview
We added UI functionality that allows users to create and edit Critical Numbers directly on the dashboard.
Prior to the redesign, Critical Numbers were created in the “Strategic Tools” section of the app and viewed & updated on the Dashboard.
inline editing
New inline editing allows users to update Critical Numbers in the dashboard.
improved edit drawer
Previously, users had to navigate to a separate section of the application to edit their critical numbers.
The new edit drawer allows users to create Critical Numbers straight from the dashboard.
