Custom Data Visualizations
Product Design (UX/UI) @ Timeplus - 6 months
Contribution
UX Design, UI Design, UX Research, User Flows, Prototyping
Product
Web-based data analytics platform
Status
Launched at timeplus.com
Overview
The original design of customization feature was not able to provide an intuitive and easy-to-access user experience, the goal of this redesign project is enhancing it for a more specified user group, as well as optimizing for future development.
As the lead designer for the streaming data visualization features, I designed, iterated, and collaborated with the development team to deliver the final assets for production, including customization flow, configuration panel and new customization features.
Why does it matter?
High Impact
Streaming data visualization is facade of our product, acting as a compelling selling point that drives revenue.
High Effort
The project consists of a legacy design that needs to be improved and a series of new features to be added on.
Challenges
New domain
Learn designing a product for coders as a non-coder designer.
Tech restrictions
Design in a constrained data visualization framework.
Full of ambiguity
The project started with an ambiguous scope.
The Problem
Targeting everyone is akin to targeting no one.
Should have tailored specifically for data experts
Our original approach to generating visualizations for users involved automatically suggesting a chart type based on their data purposes. However, while this approach began with good intentions, it ultimately led to confusion among our target users.
The original design has two sections for customization options
Issues identified during subsequent user research:
Poor Usability
The customization configuration settings were split between two separate sections (A and B), making it difficult for users to locate and modify the settings.
Limited scalability
As we added more customization features, the customization settings (A) became increasingly crowded, which would further complicate the user interface.
Complexity
As we added more chart types, the configuration process, which initially followed a purpose-driven user flow, became increasingly complicated.
Business Goal
Our business goal is to increase service purchases by improving the overall experience of data visualization in our product. Since charts are a major selling point for our customers, who value the ability to perform streaming data analytics, enhancing the usability and customization options for building data visualizations is a key part of our product strategy.
Updated User Flow
The new customization user flow
Shifting away from the initial purpose-driven user flow, we realigned to focus towards a more specific audience—data analytics professionals. These individuals possess a keen understanding of selecting the appropriate chart types to construct the visualizations they require. In the revised flow, we no longer recommend visualization types based on their purpose, streamlining the customization process and significantly reducing mental complexity.
Explorations
Design direction #1: all-in-one compact toolbar
Following the Occam's razor principle, which advocates for exploring design directions with minimal development effort, my initial approach was to redesign the existing customization toolbar to address the issues.
While my main stakeholders praised the design initially, I soon discovered critical issues with this direction:
Significantly reduces vertical space and make more room for data visualization.
Combines two customization entries and reduces users' cognitive load.
Customization panel becomes more accessible.
Does not reserve enough space for future customization features.
Customization options are lack of segment management: users may struggle to locate specific settings.
Design direction #2: side panel
After learning that upcoming features like conditional formatting were being integrated into the customization options, it became clear that the single compact toolbar wouldn't adequately support these new functionalities. This prompted me to explore an alternative direction.
The side panel offers ample space for future customization feature development. However, its length may necessitate users to scroll through numerous options before locating the specific one they need urgently.
While this design had its advantages, it also introduced new issues：
By clearly segmenting the options, users can locate specific settings more easily compared to the design direction #1.
Combines two customization entries and reduces users' cognitive load compared to the original design.
All options can be accessed in one panel.
The panel is too long to scroll through.
Mandatory options are difficult to locate compared to the original design.
Design direction #3: side panel with tabs
Focusing on resolving the issue of locating mandatory options more easily, I iterated the design for the third time.
The mandatory options, which users frequently use according to my research, are grouped into a much shorter list for easier access.
The styling options are grouped into the Format tab.
The updated user flow is now tailored specifically for data exploration stage.
It requires an extra click for Format options, which might be a cognitive load for our users. *
*According to my usability test for this design, it did not confuse our users when formatting the data visualizations.
Final Design
Data Visualization Format
The format panel primarily controls the appearance and style of visualizations. Available options dynamically adjust based on the chart type selected by the user, ensuring easy access to the most relevant settings.
Conditional Formatting
In table view, users can set conditions where the style of relevant data points changes based on specific conditions being met, emphasizing crucial data points within a large dataset.
Customized Dashboard
A preview of the dashboard after users have customized the visualizations
Design System
During this project, I have continued worked on the Design System, the component library in particular, to reflect the changes in this project and to improve the existing librarly.
#1 Atomic component
The first part of the Design System involves creating a completely new chart component library, designed to offer flexibility in adding charts across the product, including in the Query and Dashboard features.
➤ Highly configurable chart component
Below is an example of the bar chart component. The visualization panel is composed of several subsidiary components, which we refer to as atomic components, in line with the Atomic Design Methodology. In the bar chart component, users can customize the header, labels, title, legends, and other settings. The component library enables designers to quickly generate designs by simply adjusting variants in Figma.
➤ Component variants
Below is a quick overview of how the atomic component structure allows designers to easily manipulate the appearance of the bar chart by simply changing the component variants with a few clicks. Since the charts in Timeplus are highly configurable, this approach enables designers to create customized visualizations much more efficiently.
➤ Realtime updates
Below is how the Dashboard appears after users add the charts. The data within the Dashboard automatically updates, reflecting the latest information—this dynamic feature sets the product apart.
#2 Common component
During this project, I have also updated other common components (other than chart component) to reflect the changes I have made. The goal is establishing a more robost component library to make the design more consistent across the product, and reduce the workload for designers. Below are a few examples of the component updates.
#3 Component Guideline
A guideline helps both designers and developers gain a better understanding of how to use our existing components. Below is an example of the button guidelines, which include accessibility implementation.
Retrospection
Working in an engineer-driven company is very different from working in a design-driven company, and this project has taught me some valuable lessons:
Adopting expert review
Adopting expert reviews in the design process proved to be crucial in ensuring that our design solutions aligned with technical constraints and requirements while also incorporating valuable product visions from developers who have extensive experience.
Bringing UX perspective to the table
Working in a situation where the Scrum Master and the Product Owner roles are combined presents its own challenges. The convergence of these roles can sometimes create conflicts of interest. As a result, it is crucial to bring in the UX perspective and help the individual understand the value of UX.
Seeking crossed industry user research
To ensure a more user-centric approach, we need to recognize the importance of dedicating additional time to researching customers from different industry backgrounds. A research-driven approach enables us to tailor our design solutions effectively and ensure their specific needs across industries.
Achieving alignment within the leadership team
The company achieved a new level of alignment and gained a much clearer understanding of our target audience, significantly impacting the creation of the user flow.