Computer monitor displaying a dashboard with analytics, heatmap, categories, popular categories, search visitors, and tools, with a white keyboard and mouse on a lavender background.

Cludo Dashboard Widgets

Making AI-powered search data clear and actionable through intuitive dashboard widgets.

Year
2023

Client
Cludo

Scope
Wireframing, Competitor Analysis, User Research, User Testing, Prototyping

Tools
Figma, Notion

About

Cludo provides AI-powered search solutions that help businesses optimize how users find and engage with digital content. Within the MyCludo dashboard, customers access analytics and insights based on search behavior across their websites.

Challenge

The dashboard needed new widgets that were both user-friendly and capable of reflecting emerging data patterns.

The goal was to design components that presented complex analytics in a clear, accessible way - helping teams act on insights without getting lost in the data.

Process

Research

The project kicked off with doing market research, to see how the competitors display their data. Conducting the competitor analysis provided me with valuable insights, into how and what kind of data the other businesses display in their analytics dashboard. I was able to understand better and identify Cludo's strengths and weaknesses relative to each competitor.

Later on, I proceeded to discover the requested features from the customers. One of the most requested features was discovering the journey of the user fx. to see from where users start their search and where they end up. ‍

Since Cludo has already established a design library, creating the new widgets was not time-consuming.

The tricky part was to come up with a design which would display the data in the most user-friendly way so it's not only the dry numbers but valuable analytics which can be connected to actionable recommendations.

A colorful infographic titled 'The summary of user-testing' divided into four sections: Positive, Negative, Neutral, and Changes to implement, each with bullet points. The Positive section highlights helpful insights, good analytics, and positive feedback. The Negative section notes confusing terminology and lack of explanations. The Neutral section discusses widget categories and user behavior. The Changes section suggests improvements such as better explanations and consistent wording.

Design

Together with the Lead UI Designer, we developed six interactive widgets, validated through extensive internal and external usability testing.

User Testing

After the first round of user testing, I synthesised the findings on a Miro board to highlight key patterns. The insights revealed which elements supported task completion, where users faced friction, and which features required refinement.

These observations guided adjustments in wording, interaction design, and onboarding flow, ultimately strengthening the prototypes and contributing to the positive reception from stakeholders.

The Solution 

Each widget provides flexible viewing options, allowing users to choose from 1, 2, 3, or 4 columns. This feature enables users to customize their dashboard layout according to their individual preferences and workflow needs.

Such adaptability not only enhances user experience but also ensures an optimal and convenient display on a wide range of devices, including desktops, laptops, tablets, and mobile phones.

As a result, the solution offers improved scalability and usability, accommodating various screen sizes and usage environments seamlessly.

A data dashboard with various visualizations including a heatmap of interaction rates for search and QA assistant, a bubble chart of popular categories, a bar chart of autocomplete data, a visitor overview, and a line chart of top autocomplete requests. It displays metrics on search performance, user behavior, and popular search queries.

The new widgets are designed to provide an instant overview of critical data:

A presentation slide with six sections of data cards, each featuring charts and graphs related to digital assistant and data analysis, including visitor statistics, keyword analysis, and search suggestions.

  • Ensuring a smooth user flow and data consistency.

  • Visual elements, including bar charts, word clouds, and scaled heatmap graphs, display the most relevant data directly on the dashboard.

  • Each widget has an extended version in the full report, offering users access to more detailed information.

    For example, widgets with bar charts feature more detailed line or bar charts in the full report, allowing users to delve deeper into the data by hovering over or clicking on specific elements.

Keep reading!

Open book with pink cover titled 'It's a MATCH!' with subtitle about investigating user experience and trust in dating platforms, featuring a black and white illustration of a hand holding a smartphone with a pixelated heart on the screen.

Designing for Trust in Dating Apps

UX Research · Algorithmic Trust · Data Privacy · Inclusive Design · User Agency

An illustration of a white Apple iPad with the screen displaying an educational app interface on a pastel gradient background.

Immersive Teaching Platform

Playful Learning · Prototyping · UX Research · Accessibility · Digital Platform

Two smartphones floating against a light blue background displaying mobile health app interfaces, one showing personalized settings and the other showing a hospital search and details.

Redesigning Danish Health App (MinSP)

Healthcare UX · Notifications · Wayfinding · Patient Engagement · Service Redesign