Problem

When customers are deep diving metrics and looking for outliers, it is helpful to be able to isolate particular days. Currently Clarity is setup to allow for relative dates (today) and times (now), but the current time spans are very rigid for our users to do the analysis. Ultimately, we want to users to be able select the time range they want to see the metrics for, this in turn will help in serving our customers better who are trying to deep dive and find patterns in the data.

Goal

• Redesign the previous experience to simplifies user decision making

• Integrated my designs into an existing redesigned custom report experience

Challenge

My initial start of this project focused on restructuring the information hierarchy in a way that makes sense for our users. I designed the interaction for a naturally difficult task that is simple and intuitive and enables user to pick the dates they want to view for metrics they need.

Project re-scope

Part I: Redesign existing experience for Relative date timespans

This project was originally scoped out for one 3-4 week project where my design efforts primarily focused on creating an experience for users to add specific dates timespans and minimal redesign work to the existing experience we have in product today for adding relative dates timespans. As I started discovery, I proposed to to my stakeholders that there needs to be redesign to the existing experience as well. Since this project will involve redesign work and already scoped engineer effort, I suggested if we’re going to reorganize the information hierarchy, which will require redesign work, this is an opportunity to redesign the entire experience. I was able to support my redesign proposal by reiterating pain points from customer research, competitors analysis, and wireframes to gain buy-in and stakeholders agreed to re-prioritize and rescope this project into two 3-4 week projects.

Part II: Create an experience for Specific date timespans

The second part of this project that will be documented in a separate case study, involved designing custom date picker components that was not supported by our design system, for weekly, monthly, quarterly, and yearly calendar format. There was also a previous redesign work completed by another UX designer for the custom report experience that focused on moving the content into a different layout right hand fly-out versus a expandable container at the bottom of a desktop screen. When I started this project, the redesigned customize report via fly-out was already in process of being implemented, so I had to integrate my timespan experience designs into the fly-out and. Towards my final iterations, I conducted a second usability test to ensure entire redesigned custom report experience is intuitive and seamless flow.

Why do customers need timespans for reporting people data?

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 day to day, weekly, monthly, quarterly, and yearly like daily attendance for associates. These timespans 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.

Customer story

Starting with the customer, Maria, who’s an Human Resource Assistant for AMZL Fulfillment Centers and runs daily reports help track associates attendance trends for the site she cares about. Maria uses Clarity to view weekly business review key metrics to track and monitor the health of her business for her team. Maria needs to modify her report to display different timespans that allows her to track daily and weekly business trends.

Problems with the existing experience

There are limitations to how Maria, our customer can manipulate her reports with the rigid timespan options that are available in the existing custom report experience. Let’s say she wants to customize her weekly business review, start in an open report, customize mode. From there, user can click “+ Add” call to action which prompts “Add timespan fly-out.” In this view, there’s an overwhelming 39 preset relative timespans checkbox options for a user to choose from. The checkboxes presented are very rigid for our users to do the analysis. Often times, customers like Maria will end up duplicating metric results in their report because preset timespans overlap.

1. User navigating is confusing and not in logical order

2. There are 42 timespan checkboxes to choose from

3. Confusing timespan labels that actually mean aggregated amounts.

I used this redesign opportunity to highlight the confusing language used and proposed user friendly language that is simple and intuitive to the stakeholders. Although UX writing this was not in the original project requirement, I believed updating the language can drastically improve the user experience.

Customer problem

Customers need a way to track daily metrics in order to monitor the health of their business and site.

Customer goal

Customers who are customizing a report should be able to pick and choose the timespans they care about.

After reviewing the current customer goals and problems, I identified there are numerous problems with the existing experience, like the confusing timespan labels. Users who modify report by manipulating data is by nature already completing a difficult task, but it shouldn’t have to be such a confusing and rigid experience. So, I decided to explore what might our competitors be doing. While looking at competitors, I use these CX principles as my guideline for making design choices that can improve customer experience.

• Intuitive experiences match the mental models our customers

• Simplicity Keep it simple 

• Consistency Be consistent experience and behavior throughout

• Empowerment  Give the customer control.

Competitor Analysis

I gathered inspirations from other reporting tools with a feature that will allow users to pick and choose relative dates they care about. I picked Microsoft Power BI and Tableau because I thought their features follow CX principles to help inform my design decision. Although the language used and steps required for a customer to successfully complete a task is not the most user friendly, I kept in mind, that users who customize reports, have most likely used or are currently using competitors tools with similar functionality that will enable customers to manipulate data in reports.

Microsoft Power BI

I was inspired by Microsoft Power BI relative date slicer. This layout naturally formal a sentence which makes it easy and intuitive for the customer to understand.

1. With a dropdown component, customer first decision is to pick how the OrderDate will be defined by either Between, Before, After, List, Dropdown, or Relative.

2. Once customer decides they want to define a relative date, then they can make their second decision

3. Customer is empowered to customize their OrderDate in various date measurements.

Wireframes

How can we simplify user decision making?

I came up with these two wireframes on how to reorganize information hierarchy that will enable users to successfully add timespans for relative dates and specific dates in the most simple and intuitive way. These wireframes break down which decisions a user needs to prioritized in order to successfully complete their task.

Let’s make it simple with two ✌️

Using CX principles to guide my designs, Option B. which applies simplicity to the experience by guiding users to an first decision making with two options versus six options. As this point, I was able to support my proposed to redesign based on Option B. by walking through my wireframes, competitor analysis sharing customer pain points with our existing experience to the stakeholder.

Sketches

Option B. was the most clear path a user can take in order to add a relative timespan or a specific date timespan. Next steps for me was to sketch out the interactions and users task on how a user can successfully add a relative timespan. I started by writing down all the steps a user must take in order to successfully complete their task and started sketching out what a user interaction could look like. Myself and stakeholders were very inspired by competitors like Microsoft Power BI simple dropdown components which is a big driver in my design decisions for the redesigned experience.

High-fidelity visuals

Since this project focused on simplifying the experience for adding relative timespans, a lot of the redesign work involved improving timespan labels and guiding the user to make simple correct decisions and eliminating too many options to choose from. a user need to . which was previously a frustrating due to rigid timespan options, confusing labels, and overwhelming 39 checkboxes to choose from, I focused on s typcially a difficult

User flow

Simple scannable text

Updated and reordered the timespan labels to a more user friendly tone with a simpler, shorter, more common word, use it. The old timespan labels for relative dates was not inclusive of all users and did not meet at least a grade 6 reading level.

❌ Projected, Prior

✅ Next, Last

Logical order

I also reordered the timespan labels to match our natural human language. The old timespan for Days, Last 2 Weeks which actually means aggregated in days for the last 2 weeks or 14 days.

New timespan label is simply "Last 14 Days.”

❌ Days, Last 2 Weeks

✅ Last 14 Days

Result

We’ve eliminated the 42 present options and instead give users the flexibility to pick exactly the timespans they want. Users don’t have to have duplicates because they can have control on what they want to see. With the redesign for relative timespans, users can use intuitive and simple drop-down selection which forms a sentence that matches natural human language.

Success metrics

This project is currently being implemented, but I worked with the Product manager to determine what those success metrics look like. Using clickstream data, we want to track

Clickstream data tracking

• Add relative dates

• Add specific dates

• Selections for date measurements

Next steps 

As mentioned earlier, this project ended up being scoped into three projects. I’ve completed timespans for Relative dates, now my next steps is to tackle timespans for Specific dates. For the next part of this project, I will used our date picker component provided by the design system (Stencil) which includes single dates and date ranges. The challenge for me is to use the date picker, Stencil and keep a consistent behavior and experience for all the other date pickers. I had to make custom components to full-fill the other date formats; Weeks, Months, Quarters, and Years.