- Role
- Senior Product Designer (freelance)
- Team
- 2 frontend, 1 backend, 1 PM, 1 analyst
- Process
- Double Diamond
- Tools
- Adobe XD, Jira
This project involved designing a data-visualisation tool to help marketers monitor and optimize their performance through charting and dashboards. Ultimately, I designed a fully flexible yet easy-to-use tool that replaced their existing product.
This case study focuses on one component, Data Explorer: the part where users create charts from imported data. My responsibilities ran from user research, personas, and wireframes through to UI design and collaborating with developers on the final implementation. (The final mockups were redesigned and the product renamed to respect the NDA.)
The existing product had two core problems.
Difficult to use
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
It was not flexible enough to create and configure the charts users wanted, and it required technical knowledge to operate.
Time
A strict deadline: development of the current tool had been stopped, and the replacement was needed quickly.
Compatibility
The product had to work with the existing backend API and a wide range of data sources.
Flexible yet simple
Flexibility breeds complexity. Keeping the tool flexible while still simple was a constant tension.
I used the Double Diamond process: four phases that move from understanding the problem to delivering the solution. It was chosen because it emphasizes empathy and understanding of the user and the problem before jumping to ideation and prototyping.
Discover
The first phase focused on understanding the problem and the users' needs: understanding the users, the existing product, and the competition.
Understanding the users. I ran interviews, surveys, and usability tests on the current product to learn how people used it and where it broke down.
I often spend a lot of time trying to visualise my data in our current tool. It's frustrating: I know the data is there, but it takes so long to format it the way I want. I wish there were a tool that made it easier and faster.
Of 42 participants surveyed, 85% felt frustrated with the current tool's clunky interface, 70% spent more than an hour creating charts and graphs, and 60% were not satisfied with its overall performance. 90% said they would be interested in trying a tool with a simpler interface and more advanced features.
In usability tests, users struggled to find features and were unaware of functionality that already existed. They had difficulty interpreting charts with multiple data sets, and several interface elements were not intuitive. These observations pointed to specific areas to improve.
Understanding the existing product. I assessed the current tool's strengths, weaknesses, and limits, and identified where the new tool could do better: richer visualisation, streamlined navigation, more convenient data import, and improved drill-down. (As the product is under NDA, no screenshots of the old tool are shown.)
Competitor analysis. I studied three leading players in the data-visualisation space to inform the design decisions.
| Feature |  |  |  |
|---|---|---|---|
| User interface | Clean, simple | Busy, cluttered | Technical |
| Data visualisation | Flexible | Limited | Robust |
| Data sources | Limited | Flexible | Robust |
| Customization | Limited | Flexible | Robust |
| Pricing model | Open source | Subscription | Per GB |
| Integrations | Good | Good | Excellent |
| Learning curve | Steep | Moderate | Steep |
Define
With the research in hand, I defined a clear problem, created personas, and identified the key features the new interface needed.
Problem statement. The existing tool is outdated and hard to use. People are frustrated by the clunky interface and the time simple tasks take, so the tool is underused and users are seeking alternatives. The new tool needs to improve usability and functionality while keeping the experience simple.
Personas. Three personas were created from the research, representing the product's three main user types.
Ideation. In a collaborative workshop, the team defined the key features and functionality the new product should include.
Develop
I worked with the PM, CPO, and developers to generate design concepts from the agreed requirements, then produced high-fidelity mockups and interactive prototypes.
Sketches. I started on paper to explore layouts and positioning. Sketches are quick to iterate and easy to get early feedback on.
Mockups. From the sketches I built digital mockups in Adobe XD, refining layout, colour, typography, and interactions.
Prototype. With the mockups in place, I built interactive prototypes in Adobe XD to simulate flows and test the tool in a realistic way.
Deliver
The delivery phase covered presenting designs, usability testing, iterating, and hand-off.
Presentation and feedback. I presented the prototype to product owners, developers, and project managers to align everyone before moving forward. One example of feedback:
Compare Mode should also work when we have more than one layer and type of chart.
That was an edge case I had not considered. I iterated on the design to support it.
Usability tests. I ran seven tests (three internal, four external) to validate the flows. One recurring observation:
Users were unsure what each page contained and had to open it to find out. That was time-consuming, especially for first-time users.
To fix it, I revised the navigation into a mega menu that explains each page's contents directly in the menu. In the next round of testing, users no longer opened pages they did not want.
Iterating. After several presentations and tests we gathered a lot of feedback, categorized and prioritized it by weight and importance, discarded what did not hold up, and applied the rest in priority order.
Hand-off. I shared the Adobe XD files, split into Release and Work-in-Progress spaces to avoid confusion, along with a design system built during the high-fidelity phase. I documented specifications, flows, and interactions in Jira, and supported developers through implementation. With a front-end background, I could understand their technical constraints and propose feasible solutions.
We ran post-launch quantitative and qualitative evaluations to measure the new interface's impact on both users and the business.
For users
42%
Faster task completion
Moderated usability test: the same tasks timed in the old vs new interface.
95%
Of required chart types covered, up from 66%
Building every required visualisation from a list in both interfaces.
For the business
+29%
New clients within a quarter of launch
Reported by the sales department.
−38%
Support requests about charts and dashboards
Reported by the customer-support department.
Flexibility versus simplicity
The hardest part was letting people build any visualisation they needed while keeping the interface simple enough for users without a technical or database background. I researched the specific charts this audience actually needed, so I could calibrate flexibility to real requirements rather than to what was technically possible. For inspiration I leaned on tools serving a similar audience (Sisense more than Splunk, since Splunk targets experts).
Previewing high-volume data
Many chart options are configurable, so I added a live preview: users see how changes affect a chart in real time. But rendering a preview from a large dataset is resource-intensive and slow. Borrowing an approach from Kibana, I plotted the preview from only the top 500 results, which cut server load and made the preview near-instant while still showing the effect of each change. (Tested on a dataset of 120,000 rows.)