Re-design data analytics builder
for tracking strategy progress

Company

Cascade Strategy

Project type

Web application
responsive for multiple devices

Team

  • Product Manager

  • Product Designer(me)

  • Engineer Lead

  • 4-5 Software Engineers

Role

  • Define root cause of problem and goals

  • Research/Ideation/Iteration

  • UX/UI design

  • Hand-off/Design QA

  • Testing

Overview

Cascade Strategy is a strategy execution tool for business to facilitate planning, execution, and tracking their strategy. The company decided a comprehensive rewrite of the product for the next generation.


My team's mission was building a user-friendly dashboard for users to create visualised data to monitor progress of their strategy in real-time and enable them to take corresponding action by the insight from the data.

I led the entire dashboard experience in the next generation including creating a chart, display data, sharing, following executing action by data insight, paywall for about over 6 months. However, this case study is about creating a chart experience improvement.

Summery

💀 Problems

High abandonment rate (42%) while creating a new chart, especially for the first new chart creation.

Lost customer deals because of not enough flexibility and lack of options to create charts.

💡 Goals

Delivering Immediate value by intuitive and quick creating a chart experience.

Expandable features with customising and experimental charts creation for the best data visualisation

📈 Business opportunity

Increase user engagement (activation & retention rates)

Keep loyal customers & encourage to upgrade premium

👏 Results

  • Reducing the bounce rate from 42% to 22%

  • Reducing the task execution speed to create a new chart from 7-15 minutes to 1-2 minutes

  • With 100% of users who have experienced the previous version expressing that the new design is more intuitive and easier to use

Process

Research

1st phase

General understanding

Unmoderated
interview

To gain a general understanding of data analytics behavior, I conducted unmoderated interviews with five participants who are not our customers but fit our Ideal Customer Profile (ICP).


Total 12 Questions

  • What is your role, and in which industry does your company work?

  • How often do you create a new chart?

  • What tools do you use to create a chart, and which feature do you use the most?

  • Do you have a clear picture of what chart to create beforehand,
    or do you keep switching between different chart types and data sources to find the perfect data visualization?

Affinity diagram

I gathered pain points and user needs of our Current Generation dashboard from internal Customer Success Managers (CSMs) and the Sales team, as they engage with our current customers on a daily basis.

Research insight

1st phase

Persona

🤔 Early/casual users

Role/position in an organisation

  • Individual contributors

  • Operators

  • Team managers

  • Executives


Proficiency in data analytics

  • Experienced in visualising data on Excel/PowerPoint

  • Used just given visualised data


User needs/behavior in the dashboard

  • Want to quickly understand what I can do and how it can help my work

  • I don't know what makes good charts

🤓 Power users

Role/position in an organisation

  • Team managers

  • Executives

  • Data analysts

  • Risk managers


Proficiency in data analytics

  • Familiar with visualising/using data

  • Can compare with other data analytics tools like MS power BI, Hubspot

  • Ready for putting large amount of data into Cascade


User needs/behavior in the dashboard

  • Want to customize charts to create the most effective dashboard for their data visualization needs across various purposes.

Research

2nd phase

Deep-dive into the root cause of the problems

I analyzed where users encountered obstacles in completing their tasks and where they became confused by those researches below

Observation

Observed mouse tracking on the dashboard in Hotjar. Additionally, I requested the Customer Success Management (CSM) team to record videos related to the dashboard experience.

Moderated
interview

Conducted moderated interviews with six interviewees, comprising three members from the CSM team, one heavy user, and two casual users of the Current Generation Dashboard.

Usability test

Conducted usability test on the Current Generation Dashboard with two different task scenarios


  • Please create a bar chart to compare the work progress of your team members.

  • Please explore the dashboard for 5 minutes and let me know which charts you would like to create, as many as you find.

Research insight

2nd phase

Pain points

Lack of guidance

Hard to understand what's capable and where to start to figure it out

Complex workflow

Numerous errors and the need for multiple iterations to complete tasks

Too many clicks/decision

Users were fatigue by excessive clicks, which may serve as a trigger for abandonment

Solution principle

Discoverability

Guide users what to do and where to start with clear expectations

Clarity of Interaction and streamlined workflow

Clear visual feedback about available and unavailable options to minimize errors

Simplify the decision-making process

Eliminating unnecessary options and ensuring a straightforward and efficient process for users to make the right choice quickly

How might we help users better understand the value of the dashboard and how it works ?

How might we

I shared the research results with the team and facilitate HMW ideation workshop. PM and all developers in my team, CSM team participated.

User-flow/
Wireframe/
Pros and cons

Based on the ideation session, I came up with 3 different ideas, which are

  1. Dashboard templates:
    pre-designed dashboard consisting with multiple charts for specific industry or team

  1. Widget templates:
    pre-designed single chart with specific purpose

  2. Custom chart builder:
    fully customisable data visualisation builder

Defining main user flow and wireframes and understanding the associated pros, cons, and technical constraints.

This process allows the team for effective planning and consideration of factors that can impact the successful execution of the roadmap.

Priority

After analyzing the pros and cons, taking into account factors such as technical limitations, product maturity, user maturity, user adaptability, and product scalability

we have made the decision to prioritize the release of widget templates, followed by the custom chart builder, and hold the dashboard templates in this stage.

This strategic approach ensures a gradual and effective rollout of features based on their respective benefits and the overall roadmap objectives.

Final Design Solutions
for Widget Templates

Pre-designed single chart for specific purposes

Key decision 1

Provide clear expectation what users can do beforehand

Before

  • Unclear what is difference between the category, quick start and custom

  • Some of icons and descriptions were not really match with what users expected

After

  • Guide users to easily find the desired chart through categorizing tabs by purpose on the left side

  • Clear title, description with thumbnail images for users to expect correctly beforehand

Key decision 2

Simplifying decision making process

Before

  • Too many clicks and decision making with scrolling, leading the user confused and fatigue to complete chart creation.

  • Frequently miss typing the title leading to see error state as it’s mandatory input field. User feels bothered to type the title in this stage.

After

  • The chart configuration process within the widget template can be completed with just a couple of clicks, as the chart type and data source are pre-configured for optimal use. Users can quickly add charts to their dashboard and discover the capabilities and value.

  • Place the title as the last step of setting, and made it optional so users can skip it in this stage. and enable in-line title editing on the dashboard directly

10+ templates
on the 1st release

The Widget library offers a variety of commonly used charts across industries.

To decide what templates to provide for the 1st release, I studied user cases of our ICP, the possible charts with limited data source by users' onboarding process, the best practice for data visualisation, and accessibility.

Each widget has been crafted to fulfill its specific purpose, ensuring that users can efficiently visualize and interpret the data.

Final Design Solutions
for Custom Chart Builder

Fully customizable chart building experience to expand capability

Key decision 1

Streamlined workflow and easy back and forth to experiment for finding the best one

Before

  • Inefficient linear workflow. Users continuously scroll up and down, verifying their selections and switching attributes within the confined space of the sidebar.

  • There are hidden area that users didn’t expect to fill more when they scroll down, which made users fatigue

After

  • The custom chart builder occupies the entire screen, allowing users to view all the elements at once involved in configuring a chart without hidden elements. This comprehensive view helps users understand what to do for creating a chart at a glance.

Key decision 2

Quick visual feedback about availability as depending on the chosen chart type, the available configuration options vary.

Before

All configuration options can be selected from a dropdown menu. It was challenging to recognize the context of these options varying with the chart type, as users had to click the dropdown each time they changed the chart type, making it easy to lose track of the context.

After

The user interface clearly indicates the active and disabled states of the configuration options by different chart types, providing instant visual feedback to users.

This enables users to easily understand which options are applicable for their specific chart configuration.

Key decision 3

Empowers users to create customizable charts intuitively

The drag-and-drop feature empowers users to create customizable charts intuitively. The visual cues of green and blue colors provide guidance on which elements correspond to specific attributes, facilitating a clear understanding of how each element and attribute interact with one another and impact the resulting data visualization.

Results

Reducing the
bounce rate

(Amplitude)

Reducing the bounce rate from 42% to 22% indicates an improvement in user engagement and retention. This metric measures the percentage of users who initially accessed the widget library but did not complete the task of adding a chart. By reducing the abandonment rate, the new design has successfully encouraged more users to complete the chart creation process, resulting in lowered learning curve and increased user satisfaction.

Time savings

(Usability test)

The significant time savings achieved through the new design, reducing the task execution speed to create a new chart from 7-15 minutes to 1-2 minutes on widget template, demonstrate enhanced efficiency and usability. Users can now complete the task more quickly, leading to increased user satisfaction.

User satisfaction

(Interview)

With 100% of users who have experienced the previous version expressing that the new design is more intuitive and easier to use, user satisfaction is at its highest level. This positive feedback indicates that the new design has successfully addressed usability issues and provided a more user-friendly experience, resulting in improved user satisfaction and overall product perception.

Team feedback

(Feedback in retro)

The team members are happy 😄

© 2023 Ariel Kim