Worthix Analytic Dashboard

Worthix is the world’s first self-adaptive survey built with artificial intelligence to measure customer decisions. Each project has its own analytics dashboard. Users will be able to explore the analysis result of your project, import additional data, and filter data.

My Role

As the sole UX/UI designer of this project, I was responsible for

  • Designing and shipping the enhancement to the data exploring experience.
  • Designing ahead to influence the future product roadmap.
  • Conducting user studies to understand scenarios.
  • Communication with stakeholders across different departments of the company(business leaderships, PMs, Sales, and customer support) to get feedback on the ideas.
  • Working closely with data scientists and web developers during the design and development process.

Understanding the problem space

  1. Most people need training to understand the data or concept on the dashboard, even though they understand the methodology well: Complex datasets and concepts have a steep learning curve
  1. Improve the cross-analysis ability of the dashboard.
  2. How to make the charts more intuitive and easier for users with different backgrounds to generate insights.
  3. How to build up in-dashboard communication to help users solve the problem more efficiently?

Old Dashboard

“I am frustrated to see disordered data on the dashboard and it will make it tougher to explain it to people without background knowledge. I don’t want to download data and do cross-analysis on excel every time ”

— — Marketing Analyst

“ I feel the statistics of dashboard data is very hard to understand in the beginning and it’s difficult to analyze the data by myself”

— — Store ( project ) Manager

“ We have thousands of users and it’s overwhelming to explain or communicate. But when a problem occurs we want to respond to it as soon as possible”

— — Worthix Customer support team

Scructure and Screenshot of old dashboard

Research

Question:

What prevents users from understanding the dashboard?

Goal:

Find out how do users understand and explain dashboard data

Test Scenario:

  1. One Subject: read a dashboard
  2. Two Subjects(act out scenario): Explain a dashboard to the other
  3. Three+ Subjects(act out scenario): Discuss the results as a group

Result:

Only 3/21 Subjects of the research can fully understand the dashboard data

Only 5/21 Subjects of the research can understand the data after a walkthrough

Narrow down the problem:

Observation:

  • In general, Users have difficulty in understanding the Bi-Directional Bar Chart.
  • Users have a better understanding of the statistic data than the analytic data
  • Some data visualizations don’t look intuitive with real data

Insights for potential solutions:

1. We need to revise the dashboard structure to avoid intelligence overwhelming

2. The dashboard Structure needs to be changed to tell a clear story

3. Minimize and revise the dashboard content to help the user understand

4. Understanding the concept of the potential increase and decrease is the key to understanding the dashboard

Success Metrics

1. Adaptive Learning Curve for different personas

Users with different personas could achieve their goals and feel comfortable learning and using the dashboard

2. Data — -> Actionable Insight Conversion Rate

Data visualization should be intuitive. We will measure if users could generate actionable insights from the charts

3. Trust Building

We will measure if the design meets our and our client’s business objectives.

As a customer analytic product, data visualization on the dashboard should be accurate in representing what it says.

Solutions

Multi-dimension Dashboard Structure

Vertical: Use Story-telling Structure to strengthen the relationship between components

Use storytelling methods to indicate the relationship between each component. In this dashboard, we reveal the data gradually. In the beginning, we displayed the result of the scoring questions. When users keep scrolling they will see the analysis of machine learning results and get insight into how each sentiment influences customers buying decisions.

Horizontal: Enrich actionable insights by visualizing data in different charts​

We use the tab menu to contain different charts for one data point. The feature of different charts could reveal different perspectives of data. So even people don’t have a very strong analytical background. they could generate insights directly from the dashboard easily

Depth: Enable users to breakdown the data and get more Precisely​ insight

We used Interactions and dashboard settings to help users, deep-dive, into the data to find out reasons for reasons. The depth of the dashboard enabled the advanced user to use the dashboard more freely

1. Story Telling Structure to help users understand

Use the same chart for first-level data. So if users understand one of them they could understand the others. Vertical Line indicates the worthix score

Use the same chart for first-level data. So if users understand one of them they could understand the others. Vertical Line indicates the worthix score

2. Increase the diversity and clarity of data visualization

  • Bi-Dimensional Bar chart

Use more meaningful color coding to help users understand the chart

Left is the new color, right is the old. Use green and orange to indicate negative and positive.
  • Scatter chart/bar chart of competitors

Consider the User’s reading habit. increase the interactions between charts to decrease users’ cognitive efforts to memorize.

Scatter Chart- Chart highlighting
Multi-series bar chart- chart highlighting
  • Three different charts for brand identification

Different charts reveal different features of data. So it’s easier for users with no analytical background to generate insight from the chart

3. Use interactions to help visualize ML data structure

Interaction designs enable users to break down the tags and deep dive into the experiences. LUCI (Worthix AI) enables the system to recognize the keyword from open question results and group them into tags (experiences).

Liner breakdown
Categorial Breakdown
Zoom in

4. Revise Content Design

Instead of directly displaying the explaining information on the dashboard we hide them into info bubbles. and revised it to a more human language to make it understandable for no statistic background user

5. Build up cross analytic and supporting system

Users can customize filter and weight settings to do cross analytic

Some Challenges During the process

Data visualization prototype could be different from real data

Design Prototype:

In design prototype bar chart and scatter chart is designed to show the differences of value and division of data points. So the Ideal situation is data points have decent differences from each other.

Data points have visible divisions

Findings

While visualizing real data I find that, the value of data points could be very close to each other. The following shows an example that most of the value of data points clustered around 60–100.

Solution

Give the user a zoom in&out control. So they can not only see all data points in a big picture but also see the difference between data points.

In the End

Usability testing result

Most users are able to understand the basic component of the dashboard. For some advanced analytic concepts, there’s still a number of people who have difficulties understanding. However, those complex analytics concepts are not prepared for general users. Most users feel comfortable at their knowledge level.

Challenges faced and lessons learned

During this process, we encountered several challenges. Since we were proposing something that was completely different from the current system, it took a lot of convincing other stakeholders and explaining to them why we are doing this in the first place.

This version of the dashboard has already been implemented and we really got lots of positive feedback from all of our clients. I am super proud that it doesn’t take too much time for users to understand the complex worthix methodology through the dashboard during their first time.

Worthix Tracking dashboard

Background

In the middle of 2020, due to Covid many of our clients mentioned that they want to track the changes of their Worthix metrics. So we bring “tracking dashboard” from the bottom of our backlog list to the top.

Process

Business objective

  • Be able to present what happened
  • Be able to answer why it happened
  • Allow users to set goals and compare them with their real data
  • Be transparent about the data accuracy and risk

User Scenarios

  1. Compare the Worthix score of 3 personas over the last year
  2. Find out the market reaction towards a specific marketing adjustment
  3. Compare the performance and expectation of last one year
  4. Find out the relationship between Worthix score and price strategy
  5. Find out customers priority changes over time and predict the future
  6. Find out the competitors’ position changes in the market over the last year
  7. Be able to track the performance of a specific experience or competitor over time
  8. Explore what happened and track why does it happen at that specific time

Look into the data

Solution

1. Tracking performance over time

Preset Data Binning

Users can Select preset data binning to quickly set the time axis to the scale that they need. For example, Last 30 days with the daily updated data point and the last Quater with the weekly updated data point

Clip time axis

Users can use the clip time axis to locate a specific time period by adjusting the time range and start/end date. Also, the area chart on the clip time axis indicates the data size which is a very important reference for data integrity

Enable time adjustment of a specific chart

A new window will be opened when the user clicked the external-link icon on every section of this dashboard. Users re-clip the time range on the new window without influencing other sections on the dashboard. Also, data computing will be faster than re-computing the whole dashboard.

2. Compare performance

Set and add a reference line

Users can add customized or preset (average ) reference lines to the chart for comparison. Users can select saved reference lines or add new reference lines. As designed this tool will be often used as setting goals.

To set a new reference line, users need to add at least a value point by giving it a date and value. By adding new points and adjusting the value of the data point, users can change the shape of the line to compare with real data.

Compare with filtered data

When users need to compare the worthix scores with a specific filter like female and male, they can add a reference line with a specific filter applied. All filters displayed on the list were created by uploaded fields. Maxim 3 filters can be added and deleted.

Compare worthix score with sentiment Score

Finding the correlation between the worthix score and a specific sentiment can help users understand the variation of the worthix score. Users can hide or show different sentiments on the chart to compare each of them with worthix score.

3. Locate a specific data point

Bump chart to track the customer priority

Using the Bump chart can help users track the rank of experiences by their combined potential. Instead of just showing the combined potential changes over time, showing the order changes help users track the priority changes of their customers.

Enable user to track a specific experience

Users Can easily locate a specific data point by hovering over the data spot. Also, by clicking one specific experience, the user can highlight this experience to have a clearer view of how did it change.

4. Time travel through animation

Enable user to track a specific experience

Animations help present data changes dynamically

Product Designer | www.simingu.com

Unlisted

Product Designer | www.simingu.com