Metric library redesign
Summary
I led the designs for metric library as part of Clarity’s education experience.
Project timeline: 3-4 weeks
My role
UX designer, Interaction Designer, User researcher, Information architect, Workshops
Tools: Sketch, Invision, Quip
Who I worked with
Product Manager, User Research Manager, Engineers, UX Designer
Problem
One of the key challenges that our customers are facing today is the steep learning curve customers have to go through in order to start understanding how to utilize Clarity. The current metric library exist outside the product and it’s outdated and not intuitive for users to navigate to. We need to make education resources like the metric library more obvious in the tool to help our customers to make a guided decision, rather than having users abandoning the tool all together because they couldn’t understand it.
Goal
Redesigned the metric library experience to be built in the tool with intuitive navigation and accessible for all user profiles.
Bring alignment with newly joined team members by organizing a customer journey map workshop
Challenge
The challenge for me is to reorganize information architecture that includes over 5 thousand metric data details for a long list of metrics (630 and continuously growing) and display content in a way our users can easily digest, while redesigning a user-friendly experience for all use cases, new and old users and support our diverse user profiles in Human Resources, Operations, and Regional Management. In this project, I redefined our customer problems and goals and redesigned a visual design pattern on how the information architecture structure is displayed, a pattern that will be applied throughout product. I used the framework of user’s mental models as a foundation to structure the user interface’s content and layout for a data-heavy platform. Tactics include customer research, concept testing, information architecture verifying, wire-framing, Hi-Fi screen design, prototyping and obtaining usability feedback.
Why do customers need to track people metrics?
The Clarity web portal serves as the single starting point for all people data needs across Worldwide Operations. Clarity eliminates the need to access multiple websites to get the insights you want. Customers need to track various types of people metrics on a timely basis, like daily attendance and attrition for associates. These people metrics allow our customers to slice and dice the data further to match their business needs and goals in line. It’s their daily monitoring to check the health of their business.
Long term vision
When I started the metric library project, our organization and team has grown rapidly since. We have two engineers, researcher, three UX designers, and a program manager who have join our organization, PeopleInsight. I decided to organize a 1.25 hour customer journey workshop using Figma Jam, with breaks in between so that new members and existing members are brought up to speed. During my workshop, I started with sharing previous customer research and insights related to Clarity’s onboarding experience. I broke down what a new user’s on-boarding experience looks like with our product Clarity into separate phases, I assigned two people to each phases where team members participate by adding sticky notes of the thoughts, feelings and emotions a new user who’s onboarding would experience.
Customer journey map overview
Maria, HRA for AMZL recently joined the team. This is Maria’s journey as a new user on-boarding experience looks with Clarity.
Opportunities identified
Metric library, FAQ’s, Tooltips, Trainings, Help bot, Feedback channel, Community channel
Workshop participants
Product Manager, Program Manager, Engineers, UX Designers
At the end of the workshop, we identify pain points, gaps in our new user on-boarding experience, and explore opportunities together as a whole. Although conducting this workshop might of set back metric library project delivery by a 3-4 days, it was extremely important for me and my new team members to have a visual representation and good understand of what our customers are experiencing and how we identify opportunities to add to the product road map.
How do customer utilize metrics in Clarity today?
As the lead designer of this project, I wanted to fully understand what customer problems and goals are and there hasn’t been any recent research for me to refer to. In February 2021, I conducted seven 1:1 qualitative research interviews with participants who are actively using our tool and sit in North America. My research goal was to understand how we can better meet our customers needs around metrics. From my research, I discovered that there was a distinct difference in the way Human Resources, Operations, and Regional Managers users identify metrics and display these findings with these user profiles.
Tracy is an Human Resource Business Partner (HRBP) supports her team by reconcile associate attendance on a daily basis. She cares about making sure associates are clocking in, getting paid, who’s out, managing associates engagement to reduce the risk of retention.
Natasha is a Operations Manager (Ops Mgr) she needs to maintain the health of her site by planning enough labor to meet the volume demand of expected packages for the week. She cares about how many associates are scheduled now and how many are expected to be scheduled for the week.
Jason is a Regional Manager (RM) is involved in new site launches and business. He needs to promote internally and hire aggressively to make sure the new site are prepared to launch. He cares about building career development plans with his peers, who can be promoted, and how many new hires are in placed.
Validate with research
The structure on how metrics will be grouped into categories and subcategories is determined by the product team. I applied my research findings verify the product team’s concept around their metric grouping can support the needs of our diverse user profiles: Human Resource, Operations, and Regional Managers. For example, one metric can be categorized into multiple categories and subcategories, it’s not black or white. A usability test will be conducted as a follow-up to revalidate the metric group labels makes sense to our users and match what they’d expect.
Customer problem
Users should be able to access more information about a metric, quickly and efficiently.
Customer goal
From my research, I pulled a few customer quotes that really captured our customer goal
“I want to unlock more of what Clarity has to offer. I see a lot of metrics, but I don’t know what any of it means… ”
“If my manager ask me what’s the difference between Production Attendance % and Variable Attendance %, I don’t have a good answer for them. ”
Current experience
When users want to add a filter modal in the customizing report experience, there’s a long list of metrics and there’s no way for our customer to know what any of these metrics mean. It makes it difficult for users to slice and dice new metric calculations for their business needs or find out what are all the metrics that our tool has to offer.
When I started this project, the existing metric library exist in an external site, it difficult to find, outdated, and takes the customer experience outside the tool.
I started my explorations by looking at competitors for inspiration on how to organize heavy content .
Add metrics modal in report customize mode
Metric library from external site
Information Architecture
The data for the metric library will be pulled from a database that is maintained by product team. Requirements for the metric library to include metric name, definition, calculation, dataset, metric owner, datasources that make up that metric, available timespans, other categories and subcategories connected to this metric.
The metric data is very content heavy and can be very repetitive information, overall an overwhelming experience. I need to strategize on how to organize information in a way that can reduce cognitive load and improve legibility for our customers.
Research results
For my research, I tested the metric data with customers to understand what do care about most. I start reorganizing by separating what information is most important to all users, and what information is important to some users, but not all users, what’s not important, and what’s missing. I apply these research results to influence the structure of my metric library design.
Quip tools for documentation
Datasource last scheduled refresh was definitely a common need from some customers, which is information we already provide to our customers in product, but there’s extra steps required to get there and it’s not the ideal experience for this project. Product didn’t include this portion as part of the metric library because that alone is very content heavy and only some users need it, but as an advocate for the customer, my goal here is to provide a resource all the metrics that Clarity has to offer for our customers that can be accessed quickly and efficiently.
Competitors who inspire
From research, I know the long list of metric is an overwhelming experience for our customers. Before I could start on any design work, I needed to get inspiration from other tools information architecture structure on observe how they strategized organizing content in a way that is easy to digest and quick navigation.
What’s inspiring about Youtube?
I picked Youtube as an inspiration, wanted to look at tool that was content heavy and best enable a searching or browsing type of behavior for customers who either know exactly what they want to search for and for the customers who don’t know exactly what they want to search for. The genres displayed by default may be based on my previous watched history, but for the genres I’m not interested in, I can simply ignore and stay focused on what is important to me.
Stacked pill-pop on top allows for quick and easy navigation. YouTube is just one of the many tools who use this element, it’s a growing UI trend which keeps it simple and clean experience. Other competitors like AirBnB, Google, LinkedIn also follow this UI trend.
By default, customers can search all genres
Acts like a toggle, genre results update below without loosing customers place
Why not reapply existing patterns?
Before I answer, I should start with “is there an existing pattern?” And the answer is yes, there are UI visual of this group pattern of categories and subcategories already does exist in the customize report experience in a filter modal displayed as a list with expandable and collapsable elements. Consistency is a principle I follow strongly, it would have made sense for me to apply that principle in my project and reuse our existing patterns, but I decided to move away from that pattern because the current experience is not a delightful experience. Users can easily loose focus in trying to find content they’re looking for.
Existing patterns for metric categories and subcategories
A filter modal for attributes are organized into three primary categories and linked to other subcategories
Collapsed by default
Expanded view
The expandable and collapsable pattern makes it difficult to navigate and let the user know where they are, so I decided to scrap it and not reuse for my metric library redesign.
After my design pattern for the metric library are finalized, the plan for P1 of Education is to apply those patterns throughout the product like updating this attribute modal, metric modal, and the browse page to ensure we maintain a consistent experience for our customers.
Existing pattern in modal from customize report experience
