Amir Khademi

Senior UX Designer

Chartify

ِDesigning a flexible yet easy-to-use data visualisation SaaS for digital marketers.

Navigation

Overview

This project involved designing a data visualisation tool to help marketers monitor and optimize their performance through charting and dashboards. I was working as a freelance senior UX designer. Ultimately, I designed a fully flexible yet easy-to-use data visualisation tool that replaced their current product.

In this case study, I only focus on one product component, Data Explorer. It’s the part where the user can create charts out of imported data.

The final mockups were redesigned, and the product name was changed to maintain anonymity and NDA.

Problem

There were two main problems with their current product

Difficult to use interface

Users were frustrated with the clunky interface and the time it took to understand it and complete simple tasks, such as creating charts and dashboards.

Inflexible charting options

It was not flexible enough to create and configure desired charts and required technical knowledge.

Role

I was hired as the Senior UX Designer for this project and collaborated closely with the product team.

UX Designer

My role

Frontend Developers

2

Backend Developer

1

Project Manager

1

Data Analyst

1

My primary responsibility was to come up with a solution for the problems above. My tasks included but were not limited to conducting user research, developing user personas, creating wireframes and mockups, designing the user interface, and collaborating with the development team to ensure the final product meets the design specifications and incorporates feedback into design iterations.

Constraints

Some of the constraints of this project were:

Time

The project had a strict deadline that needed to be met because the development of the current tool was stopped.

Compatibility

The product needed to be compatible with the current backend API and a wide range of data sources.

Flexible yet simple

Flexibility leads to complexity. Maintaining flexibility while making it simple was a constraint.

Design Process

The Double Diamond design process was used in this project, which involves four phases: Discover, Define, Develop, and Deliver.

Double Diamond Design Process. Image from Dan Nessler

This process was chosen because it emphasizes empathy and understanding of the user and the problem before moving on to ideation and prototyping. By following this process, the team could better understand the problem and the user’s needs and develop a well-suited solution.

Discover

The first phase of the double diamond design process focuses on understanding the problem and the users’ needs. This phase involved:

Understanding the users
Understanding the existing product
Competitor analysis

Understanding The Users

I have conducted user interviews, surveys, and usability tests (on the current product) to better understand how users interacted with the tool and what problems they encountered. Here are some samples of the results.

User interviews

Quote from a user:
I often find myself spending a lot of time trying to create visualisations of my data in our current tool. It's frustrating because I know the data is there, but it takes so long to format it the way I want. I wish there was a tool that could make it easier and faster.

Survey

Out of 42 participants surveyed, 85% reported feeling frustrated with the current data analysis tool’s clunky interface. 70% reported spending more than an hour creating charts and graphs, and 60% said they were not satisfied with the tool’s overall performance. Additionally, 90% of the participants stated they would be interested in trying out a new tool with a simpler interface and more advanced features.

Usability test

During the usability tests, I observed that some users struggled to find certain features and were not aware of some of the existing functionalities of the previous product. This caused frustration and led to a longer time to complete tasks. I also observed that users had difficulty interpreting some of the charts and graphs, especially when there were multiple data sets. Finally, I found that some of the interface elements were not intuitive and caused confusion among users. These observations helped me identify specific areas of improvement for our new tool.

Understanding The Existing Product

I tried to understand the existing data analysis tool’s strengths, weaknesses, and limitations. This helped to understand the key features lacking in the existing tool and how the new tool could provide a better user experience.

I identified several key areas for improvement, such as better data visualisation capabilities, streamlined navigation, more convenient data import workflows, and improved drill-down capability. As the product is under NDA, no screenshot of the old tool is presented.

Competitor Analysis

I gathered information on the competition (direct and indirect competitors) and analyzed industry trends to inform my design decisions. I thoroughly investigated these three top players in the data visualisation domain.

FeatureKibanaSisenseSplunk
User InterfaceClean, simpleBusy, clutteredTechnical
Data visualisationFlexibleLimitedRobust
Data sourcesLimitedFlexibleRobust
Customization optionsLimitedFlexibleRobust
Pricing modelOpen sourceSubscriptionPer GB
Integration with systemsGoodGoodExcellent
Learning curveSteepModerateSteep

Define

Based on the findings from the previous phase, the next phase was to define a clear problem, create personas, and identify key features that the new interface needed to include.

Problem Statement

Based on the user research, competitive analysis, and persona development, the core problems to be addressed by the new tool are:

The company's existing data analysis tool is outdated and difficult to use. Users are frustrated with the clunky interface and the time it takes to complete simple tasks, such as creating charts and graphs. As a result, the tool is not being used to its full potential, and users are seeking alternatives. The core problems to be addressed by the new tool are improving usability and enhancing functionality while keeping the experience simple and user-friendly.

Personas

3 the personas were created based on the insights gathered during the user research phase representing 3 main types of our users

Ideation

In a collaborative workshop, we discussed and defined the key features and functionalities that the new product should include. 

Develop

The third phase involved developing solutions. I worked collaboratively with PM, CPO and developers to generate various design concepts based on the requirements and features we identified in the previous phase. I then created high-fidelity mockups and interactive prototypes.

Sketches

I started with rough sketches on paper to explore different layouts, positioning and visualizing the ideas. Sketches were quick and easy to iterate and allowed me to get feedback from the team and stakeholders early in the design process. Looks messy? The creativity process starts with a mess 🙂

Mockups

Once I had some initial sketches, I created digital mockups using Adobe XD. These mockups allowed me to refine the layout, colours, typography, and interactions of the tool.

Data Explorer Tool
Adding New Chart Panel
Sample Stacked Bar Chart
Sample Donut Chart
Multilayer Chart
Widget Library
Unlimited Chart Layers
Split Mode Enabled
Chart Source Data Loading
Range Picker

Prototype

With the mockups in hand, I created interactive prototypes using Adobe XD. These prototypes allowed me to simulate user flows and present and test the functionality of the tool in a realistic way.

Play Video

Deliver

The delivery phase included the following actions:

Presenting Designs
Usability Tests
Iterating on Designs
Documentation & Hand-off

Presentation and Feedback Gathering

In this step, I presented the prototype to the stakeholders, including the product owners, developers, and project managers. The goal was to get feedback on the designs and ensure everyone was aligned before moving forward. One example of feedback that I received was:

The "Compare Mode" may also be activated when we have more than one layer and type of chart.

This was an edge case I didn’t consider during design. Based on this feedback, I iterated on the designs to make this happen.

Compare Mode Enabled

Usability Tests

In this step, I conducted usability tests to validate the flows and ensure they meet the user’s needs. In total, 7 tests were conducted (3 internal and 4 external users).  One sample observation from the tests was:

During usability testing, we found that users were experiencing difficulty using the new navigation system. Specifically, they were uncertain about the contents of each page and had to access the page and learn more. This process was time-consuming, especially for first-time users.

To address this issue, I revised the navigation system and created a mega menu structure. This structure included clear explanations of the content located on each page, directly in the menu.

Mega Menu

We conducted another round of usability testing. The results showed that users no longer accessed any pages they did not want or understand as they had in previous tests.

Iterating on Designs

After conducting several design presentations and usability tests, we received a considerable amount of feedback and observations. Firstly, we categorized the feedback and then prioritized it based on its weight and importance. Some of the feedback did not have any validity and were disregarded. Afterwards, we applied the feedback on the designs according to their priority.

In the above sections, two examples of changes made based on the feedback were presented.

Documentation & Hand-off

The main actions during the hand-off were:

Sharing Design Files

The design files, created using Adobe XD, were shared along with a URL. Prior to sharing, the files were categorised into two spaces, Release and Work in Progress, to prevent any confusion for the developers caused by ongoing designs.

Sharing Design System

During the high-fidelity design phase, I created a design system to maintain consistency and share it with the developers.

Documenting in Jira

I created detailed documentation of the specifications, flows, and interactions, along with other important notes for developers, using Jira.

Supporting During Implementation

As a UX designer with a front-end background, I was able to provide ongoing support to developers during the implementation of designs. I was able to understand their technical limitations and constraints and provide design solutions that were feasible.

Outcomes

We conducted post-launch quantitative and qualitative evaluations to measure the performance of the new interface for users and the business.

User Outcomes

42% faster task completion

Result: The new tool allowed users to complete common tasks, such as creating charts, 42% faster via the new interface.

Research method: Moderated usability test. Users were asked to perform the same task in both the old and new interface while time where measured.

Covering 97% of the required charts

Result: The new product allows users to create a wider range of visualisations, covering 95% of all requirements. The previous interface only supported 66%.

Research method: We tried to create all required visualisation from a list using both old and new interfaces.

Business Outcomes

29% increase in user acquisition

Result: Within a quarter of launch, the new tool allowed the company to win 29% more new clients by demonstrating more efficient and effective data analysis capabilities.

Research method: This was measured through a report from the sales department.

38% lower support requests

Result: The new design led to a 38% decrease in support requests from users who had difficulty creating and configuring charts and dashboards.

Research method: This was measured through a report from the customer support department.

Challenges

During this project, there were various challenges, both big and small. I’ll discuss two of them, one being a high-level challenge and the other technical in nature.

Giving flexibility and keeping simplicity

Designing a product that is both flexible and easy to use can be a challenging task. In the case of Chartify, the challenge was to provide users with the ability to create any type of visualisation they need while keeping the interface simple enough for users who may not have a technical or database background.

Designing for what’s needed

We design for what our users need, not what is possible. I carried out comprehensive research to determine the specific charts and graphs that the users of this product need to create. This helped me to calibrate the flexibility level of the interface to cater to the specific needs of the users.

Inspiration from the relevant design

I gathered inspiration from products targeting similar audiences to our own. As an example, the inspiration I derived from Sisense was significantly higher than that of Splunk, owing to Splunk’s focus on expert audiences, while Sisense caters to the general public.

Showing previews

There are many configurable options for each chart type. To let the user learn them without wasting time and resources, we added a preview to the interface, so users can see how their changes affect the chart in real time. Making the preview possible was also a big challenge which I discussed below.

Preview for charts with high-volume data

As previously mentioned, we aimed to simplify the user interface by providing a preview feature. Users can see how their changes affect the chart in real time. However, creating graphs with a large amount of data in real time is resource-intensive and time-consuming.

To address this challenge, I adopted a solution from Kibana by plotting the preview using only the top 500 results from the database. By doing so, we reduced server resource consumption and displayed the preview quickly while still meeting the user’s need to see the impact of their changes.

Here is an example of how our approach affected the time required to generate a preview:

 
All results
0 seconds
Top 500 results
0 seconds

* For this test, a dataset consisting of 120.000 rows was used.