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
Lack of affordance and signifiers makes it hard for users to understand what's possible and where to start
Complex workflow
Due to a steep learning curve, requiring multiple errors and iterations to understand the process of creating charts and complete the task
Too many clicks/decision points
Users feel 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
Dashboard templates:
pre-designed dashboard consisting with multiple charts for specific industry or team
Widget templates:
pre-designed single chart with specific purposeCustom 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 😄
