Devo Dashboard UI redesign

Redesign of Devo's dashboard section to address user flow, consistency, hierarchy, and navigation issues, informed by prior research and validated through post-prototyping Maze tests.

DevoRedesignDashboardDesign system

My Role

I led the redesign process from research to high-fidelity prototypes (sometimes, even directly coded on React), implementing reusable components and collaborating closely with developers to implement the UI improvements. The result is a more intuitive, scalable, and cohesive dashboard experience.

The Challenge

Users faced inconsistent layouts, overlapping panels, and unclear navigation paths and actions, which made performing routine tasks slower and more frustrating. Key actions and metrics were hidden or difficult to locate, creating inefficiencies.

Each screen had been built using different UI patterns over time, leading to confusion and a lack of visual consistency. The challenge was to simplify workflows while keeping advanced functionalities accessible to power users.

The dashboards suffered from a severe lack of contextual guidance, and managing available dashboards was confusing and restricted due to the limited space in the assigned panel.

In any case, we will dive deeper into the issues identified over time and outline them in the 'Research & Insights' section.

BeforeThe old dashboard interface previous to the redesign: brand color saturation, not easy to distinguish layers or sections, inconsistencies, inefficient use of space, unbalanced colors, confusing hierarchy of actions and layers... etc.

AfterThe new dashboard interface: The different contexts are now clearly distinguished (global, navigation, active dashboard settings, and widgets). The hierarchy is more consistent, and the color palette feels more balanced and aligned with the brand's visual identity, resulting in a more cohesive and professional interface.

Goals & Success Metrics

Our main goals were to reduce visual noise, enhance usability, and ensure consistency across dashboards. Secondary objectives included improving accessibility, creating reusable components, and optimizing workflows for different types of users.

Enhance usability: especially on Dashbaord manager, navigation and settings.
Contextual help/info: The user should feel guided throughout every process (from creation to maintenance and editing) while being able to easily access key information at both the dashboard and widget levels.
Multitask: Add a tab system that allows users to work on multiple dashboards simultaneously in a fast and efficient way.
Hyerarchy and contrast: Enable users to intuitively discover different contexts and actions while avoiding confusing or noisy situations, such as an excessive number of overlapping floating panels.

Success was measured by reduced task completion time, fewer navigation errors, and generally higher user satisfaction. Additional metrics included consistency of UI patterns and alignment with design system standards.

Research

We audited existing dashboards, conducted heuristic evaluations, and analyzed usage data. User interviews revealed several issues relative to the UI:

Dashboard manager usability issues
Half of the users expressed frustration with the Dashboard Manager, describing it as difficult to use due to the small panel size and the excessive amount of information and options displayed per item.
Complexity in creating a dashboard
50% of users initially found the process of creating a dashboard too complex and required assistance to build one from scratch. Non-technical users, in particular, struggled not only with the interface but also with the need to generate a query, which demands technical knowledge.
Limited workspace due to panels
20% of users reported that both the Rolling Panels and the Query Panel take up too much screen space, causing loss of focus and reducing visibility of other elements and widgets. Users often need to open and close these panels repeatedly to view the main content.
Users struggle with top panel interactions
One in four users said the top panels feel unintuitive and occupy excessive space, making it hard to stay focused. In dashboard, the idea of going to the top to access widgets didn't align with users' mental models.
Difficulty distinguishing between view and edit modes
40% of users reported difficulty identifying whether they were in View or Edit mode. Many did not realize when the mode was active or inactive, often asking for clarification. Users were unaware that switching modes enabled or disabled the dashboards.
Low discoverability of the dashboard manager
45% of users had trouble identifying that clicking the folder icon would open the dashboard manager. The icon's meaning was not immediately clear, leading to confusion when trying to navigate between boards.
Difficulty adding new widgets to Activeboards
40% of users reported having trouble adding new widgets to their dashboards. The "add" icon was not immediately recognizable, and the current method for adding widgets was not intuitive.
Problem to find the period selector
35% of users reported difficulty locating the period selector in the dashboard. Its visibility was not intuitive, making it hard to notice or access quickly.
Need for additional filter
25% of users suggested adding a new filter option for "Shared dashboards," in addition to the existing "Favorites" and "Created by me" filters. They considered it useful for quickly finding boards shared by others.

Toolbar usability problemsSeveral examples of the issues detected include: a non-intuitive top panel for adding widgets, a confusing edit/view toggle, among others.

Overlapping panelsAn example showing how overlapping panels occupy excessive space, forcing users to constantly open and close them in order to access their workspace.

Small manager panelThe panel in the Dashboard manager is too narrow, which limits the space available for displaying all the relevant information and actions for each item. Users often struggle to access certain controls or see key details without excessive scrolling or opening additional menus.

Design & prototyping

Wireframes and high-fidelity prototypes were created using the updated design system. Panels were reorganized to avoid overlap, key actions were moved to context-specific toolbars, and a tab system was added for easier navigation.

Interactive prototypes were tested in Maze to validate workflows and hierarchy. Feedback from these tests informed refinements before handing off designs to development, ensuring an intuitive experience for all users.

After completing the Maze tests, several improvement opportunitieswere identified based on both user data and feedback. The main findings included:

The folder icon did not accurately represent the Dashboard Manager functionality.
"New" and "Available" dashboard shortcuts lacked visibility and were not prominent enough to catch users' attention.
The modal for "quickly" opening a dashboard was removed, since the same action could be performed just as easily from the manager.
The "Most Visited" block was replaced with "Favorites", as it provided little real value to users.
Additional information was added to each shortcut on the home screen, such as the creator's name and the last modified date.
In the Dashboard Manager, status icons were added to indicate whether an item was shared and/or scheduled. Filters were also introduced for both states. Finally, the tags and user cells were visually improved for better clarity and hierarchy.

Maze reportWe launched a Maze test by triggering a Hotjar modal when users accessed the Dashboard section, inviting them to participate in a quick usability test. Only frequent dashboard users were shown this modal: specifically, those with over thirty total visits or more than ten visits in the past month.

Maze home initial proposalThis the version used in the Maze test for the Home page.

Home modified after testY esta es la versión modificada en base a los resultados de los tests: accesos destacados mejorados, más info para cada acceso directo, cambio de icono para el manager, se cambia el bloque de más visitados por el de favoritos... etc.

More accurate icon for the managerUn icono que representa mejor el acceso al listado completo de dashboards, ya sea para abrir o para administrar props, clonar... etc.

Acciones principales mas destacadasEn el test hubo usuarios que reportaron que no era fácil distinguir las acciones principales de 'crear' y 'available' del resto de accesos directos de la home. Por ello, se rediseñaron haciéndolos más destacados visualmente y añadiendo una peuqeña descripcióin a cada una.

New favorites blockSe reemplazó el bloque de 'Mas visitados' por el de 'Favoritos' porque no se percibió valor a tener acceso a los mas visitados, mientras que sí a los favoritos. En esta imagen también podemos ver otra de las mejoras: añadir la información del usuario creador y la fecha de última modificación a cada acceso directo de la home.

Modified actionComo el icono de folder y el verbo 'open' no encajaba perfectamente con lo que es el Dashboard manager, también se cambiaron en el modal de 'New tab'. En este modal, el usuario puede o bien, abrir un dashboard ya existente o crea uno nuevo desde cero.

Manager before testing

Manager after testingStatus icons were added to indicate whether an item was shared and/or scheduled (so 'Shared' column was removed). Filters were also introduced for both states. Finally, the tags and user cells were visually improved for better clarity and hierarchy.

Development & Implementation

The design team, including myself, worked closely with the frontend engineers to migrate existing functionalities into the new interface, integrating design tokens, iconography, and reusable components while ensuring full consistency with the design system.

We even developed high-fidelity React prototypes for each redesigned component; including the widgets panel, toolbars, dropdown menus, modals, and the new home section; to validate interactions, behaviors, and visual consistency before implementation.

After the front-end was implemented, the development team integrated it with the backend, ensuring fully functional dashboards. Close collaboration helped maintain consistency between design intent and technical execution.

Process Snapshot

Audit & Discovery

Gained a deep understanding of the current Dashboard experience and identified user pain points, building on existing departmental research.

Visual Redesign & Prototyping

Created new interface visuals and explored interactive flows using high-fidelity prototypes, which were still awaiting usability testing.

Maze testing and adjustments

We tested the interactive prototype using Maze to uncover key strengths and weaknesses in the redesign. Insights from the report guided the subsequent refinements to the prototype.

Implementation

Collaborated with the development team providing high-fidelity prototypes built in React to ensure design-dev alignment.

Validation & Rollout

Gradual deployment and measurement of impact. A/B test results, NPS increase, and usability metrics.

Impact & Outcomes

Usability

The redesigned dashboards greatly improved clarity and focus, significantly reducing cognitive load. One of the most impactful enhancements is the introduction of a tab system, allowing users to work seamlessly across multiple dashboards at once.

Additionally, new view options such as Full Screen and Focus Mode enable users to hide unnecessary interface elements, minimizing distractions and creating a cleaner, more efficient workspace.

Easy access to the useful stuff

A new Home section was introduced, offering users quick access to key information and essential actions. It includes shortcuts to create a new dashboard or open the Dashboard Manager, as well as direct links to favorite and recently opened dashboards, helping users resume their work effortlessly.

Beyond navigation, the Home also provides contextual resources such as version updates, newly released features, tutorial videos, and help center links, turning it into a practical and informative starting point for the entire dashboard experience.

Better management

The redesigned Dashboard Manager represents a major improvement over the previous version. The new layout provides more space and a cleaner visual hierarchy, adopting a tabular format that makes data easier to browse and interpret. Users can now access key information at a glance (for example, whether a dashboard is shared or scheduled) without navigating through multiple panels.

New HomeBefore the redesign, the Dashboard section didn't have a dedicated home screen. We introduced a new one that provides quick access to key actions, helpful resources, release information, and the most recent used or favorite dashboards, giving users a clearer and more efficient starting point.

New ManagerBefore the redesign, the Dashboard Manager was confined to a small side panel, where too many actions and pieces of information competed for limited space, creating visual clutter and usability issues. The new version is a dedicated, full-page manager featuring a clear tabular layout, advanced filtering and sorting options, and editable cells, offering a much cleaner and more efficient experience.

Manager row actionsThis is a detail of the available actions for each dashboard within the Manager. The new design organizes these actions more clearly, making it easier for users to identify and access key functions directly from the list view without unnecessary steps.

Manager name-description tooltipThis is a detail of the dashboard manager row tooltip, which lets users quickly preview the full dashboard name and description by simply hovering over a cell. This enhancement removes the need to open the dashboard or expand the row, streamlining navigation and improving overall usability compared to the previous version.

New tabs system

One of the most frequent user requests identified during research was the ability to work on multiple dashboards simultaneously. After benchmarking similar enterprise data platforms, we determined that a tab-based navigation system would provide the most intuitive and scalable solution.

A dedicated tab area integrated into the top toolbar, with the Home and Manager sections remaining as fixed tabs to ensure quick access, while each opened dashboard is displayed as an independent, closable tab to the right.

Contextual help and infoContextual information and help were added throughout the Dashboard experience, both at the dashboard level and at the individual widget (chart) level. Users can now quickly access guidance, metadata, and relevant tips without leaving the interface, which reduces friction and prevents confusion.

Edit/view selector improvedThe Edit/View mode selector was redesigned, replacing the original toggle switch with a clear and descriptive dropdown. This change made the control significantly easier to locate thanks to its new position and visual hierarchy. In addition, the current mode is now much more recognizable, and each option within the dropdown includes a short explanatory description.

Improved data source panel usabilityThe data source panel was redesigned to address the confusion caused by the previous version. It's now much easier to distinguish between different sources thanks to the addition of contextual icons that represent elements like groupings or aggregations. Moreover, by simply hovering over an item, users can quickly access key information such as the table, creator, last access date, and related query.

Learnings and Next Steps

From the beginning, due to the complexity of the Dashboard application, the redesign was planned as a progressive process. The first steps focused on the mode selector, followed by the new manager and widgets panel. Later, we introduced the tab system, and finally, the toolbars and Home section were redesigned. This approach added an extra layer of complexity to the project. Since our goal was to deliver improvements incrementally and provide value as early as possible.

At that point, the tab navigation system was not yet implemented. As a result, we temporarily integrated the manager within a modal interface, allowing users to benefit from the new structure, filters, and usability enhancements without waiting for the full rollout. This decision required careful coordination between design and development to ensure a seamless transition once the tab system became available.

The project highlighted the importance of early user testing during the initial prototyping phase. The feedback gathered from real users proved to be extremely valuable: not only helped us refine the existing design, but also guided the definition of new features and improvements for future iterations.

The next steps focus on enhancing contextual guidance, especially to support user onboarding. We also plan to introduce containers, enabling users to group multiple widgets under a shared configuration, and to redesign the data source creation flow to make it more intuitive and efficient.