Jose Andrés Granero
← Back to projects

Devo app UI refactor

Refactor and adaptation of Devo's data analysis application to the new design system — implementing the new component library, design tokens, icons, and design patterns.
DevoRefactorData-analysisAppDesign system

My Role

I was involved not only in project planning and prototyping all application screens, but also in implementing the required changes directly in code. This has been a huge project, so many times we needed to do the changes from the design department.

My responsibilities also included defining the new design system architecture, and ensuring visual and functional consistency across a vast library of data visualization components.

In addition,I collaborated closely with data engineers, product managers, and front-end developers, providing ongoing guidance and support throughout the process.

The Challenge

The original platform had evolved through years of incremental development, resulting in a fragmented experience. Data tables, dashboards, and charts were built inconsistently by different teams, using separate codebases and styling approaches. This led to visual clutter, reduced usability, and high maintenance costs.

The main challenge was to unify this ecosystem under a single scalable design system that would preserve analytical power while improving clarity and performance.

The redesign also needed to support new use cases, such as more customizable dashboards, new data tables based in components library, new navigation architecture and main menu, advanced data filtering... etc. without adding cognitive overload.

BeforeA lot of examples of the old interface previous to the UI refactor: brand color saturation, inconsistencies, inefficient use of space, secondary navigation tabs drawing too much attention, unbalanced colors, an overall overuse of icons, confusing hierarchy of actions... etc.

Research

We started with a full product audit, mapping all pages, widgets, and interactive elements used across different modules of the platform. We ran interviews with data analysts, business users, and internal developers to identify pain points in the workflow. The biggest issues were related to discoverability (hidden features), visual overload, and lack of standardization in visualizations.

In parallel, we benchmarked leading analytics tools to understand best practices in handling dense data interfaces. The key insight was that consistency and clarity were far more valuable than visual novelty. These findings guided our decision to build a flexible system around composable, data-first components.

In addition, we used a previous comprehensive research from my own design department, about pain points, inconsistencies, navigation problems, and unclear user flows or actions.

Design System

The new design system, internally named "Genesys", was conceived as a modular ecosystem covering UI components, data visualizations, and interaction patterns. We defined design tokens for color, typography, spacing, and data states, ensuring visual harmony across tables, charts, and dashboards.

To ensure adoption, we created Figma libraries linked to a Storybook instance used by developers. Each component was documented with accessibility notes, responsive behavior rules, and usage examples. This dramatically reduced design-developer handoff time and standardized visual consistency across teams.

Figma documentationThe design system documentation has been incredibly useful to align the design and the code in this huge UI refactor. This is an example of Figma documentation, specially useful for designers.
Storybook documentationThe design system documentation in Storybook has been also incredibly useful, not only for developers, but also for us, the designers, because we were implementing code too, so it was a single source of truth for everybody on the project.
Design tokensThe design tokens were fundamental during all the process, specially when we needed to refactor some parts of the app not based in React, because wether they were third-party libraries or due to technical restrictions. In these cases we couldn't use the new UI components library, so the main way of maintaining consistency was integrating with the design tokens.

Visual & Interaction Redesign

We simplified the interface by introducing a clean, data-first visual language that prioritized readability and focus. The new color palette was built around neutral backgrounds and high-contrast accent colors for data visualization, improving interpretability for complex processes and interfaces.

Interaction patterns were redesigned to make complex analytical actions (filtering, grouping, and exporting) feel effortless. Persistent filters, contextual tooltips, and keyboard shortcuts were added to streamline repetitive workflows. The overall goal was to make powerful analytics feel approachable without sacrificing depth.

Key UI improvements include:

More purposeful use of brand colorsThe new visual language applies brand colors more consistently and strategically, reinforcing brand recognition without overwhelming the interface.
Rationalized color usage by contextColors are now assigned based on clear functional meaning: error, warning, active, enabled, ownership, and more; creating a more predictable and accessible experience.
Reduced icon overuseWe removed unnecessary icons that previously represented overly complex actions or processes, which had created visual noise. Icons are now reserved for universal, instantly recognizable concepts.
Improved color hierarchy.The refined palette enhances the distinction between data levels, actionable elements, and system states, clarifying both content and interactions.
Structured use of elevation and depthShadows, borders, and corner radius are now applied systematically to establish visual hierarchy and improve spatial understanding across interface layers.
Creation of a dedicated Table componentA fully custom, high-performance table component was designed to enhance user workflows involving filtering, sorting, selecting, pagination, column management, and inline editing. It became one of the cornerstones of the new interface, replacing all legacy tables and standardizing multiple complex views under a unified interaction model.
Refined secondary navigationWe introduced a lighter, more space-efficient tab navigation system, replacing bulky vertical tabs with a cleaner horizontal structure that preserves content area and improves scannability.
Simplified main menuThe primary navigation was streamlined to include only essential sections. Account settings, query priority levels, domain and time range selectors, and help options were relocated to the right area of the toolbar, reducing cognitive load.
Standardized messaging systemAll user feedback components such as tooltips, banners, inline messages, popups, and dialogs were unified under a consistent style and tone, greatly improving clarity and cohesion.
Expanded contextual assistanceHelp cues and guidance are now embedded directly within complex user flows, not just at the section level, providing support exactly where it's needed.

Implementation & Collaboration

Close collaboration between design and development was crucial. We established a shared naming convention and design token pipeline that connected Figma styles to code variables. Weekly cross-team sessions ensured every component was validated against technical feasibility and real user needs.

Through the new Storybook-based workflow, designers could preview coded components live, accelerating iteration cycles and reducing ambiguity. This continuous collaboration also helped maintain a single source of truth between the design library and the production UI.

One of the most important tasks I had to accomplish during the refactor was supporting the development teams, as they needed to migrate numerous screens (each originally built with different technologies and languages) to React, while adopting the new libraries for components, design tokens, and icons, among others.

Anyway, in many cases, the design team (including myself) also had to take part in the code refactor, migrating legacy screens to React and implementing the new design system libraries. Once this process was completed, the developers integrated the frontend with the backend.

Process Snapshot

Audit & Discovery

Understanding the legacy system and identifying pain points. Full interface inventory, usability insights, and feature map.

Research & Benchmarking

Analyzing user workflows and comparing with market standards. Benchmark grid and summarized design principles.

Visual Redesign & Prototyping

Creating new interface visuals and testing interactive flows. High-fidelity prototypes validated through usability tests.

Implementation & Collaboration

Syncing with development via shared libraries and design tokens. Figma-Storybook pipeline and dev alignment.

Validation & Rollout

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

Impact & Outcomes

Clarity and consistency

The redesigned interface brought a substantial improvement in clarity and efficiency across all user workflows. By rethinking visual hierarchy and interaction patterns, users could now interpret and act on complex datasets with significantly less cognitive effort, reducing unnecessary friction and helping analysts focus on insights.

Analytical context

Beyond usability, the visual refresh strengthened the product's sense of purpose and trustworthiness. The refined color system, typography, and spacing created a calmer, more analytical atmosphere, aligning the interface with the mental model of professional data users.

Reliability

Consistent motion cues and microinteractions improved perceived responsiveness, making the platform feel more polished and reliable. In the same way, the improvements for feedback messages and contextual help, have improved the user experience.
BeforeBefore the refactor, the Alert Rules page suffered from visual inconsistency: excessive icons, uneven spacing, unstructured data layout, and colors that didn't align with the brand. Accessibility issues and weak hierarchy made the interface hard to read and navigate.
AfterThis is the same section after the implementation of the refactor. The layout was restructured for clarity, with consistent spacing, improved space efficiency by reducing the visual footprint of secondary navigation elements, a unified icon set, color palettes that reflect the brand... etc.
Consistency based on design tokensShown here are the Home and Marketplace sections. Despite serving very different purposes, they share a cohesive look and feel. The Home section was developed using our UI components library, while the Marketplace relies on our design tokens system, so we can maintain consistency regardless of the technology used.
Simplified main menuThis comparison shows the evolution of the main menu before and after the UI refactor. Actions unrelated to navigation were relocated to the top app bar, decluttering the interface...
...the result is a cleaner layout where elements like the account settings, time zone, domain selector and other options are positioned more intuitively, improving both clarity and usability.
Activeboards before the refactorBefore the refactor, the users reported several problems with the Dashboards section: Overlapping panels significantly reduce the available space for the main content. The top dropdown panels lack intuitiveness, access to the query panel isn't immediately clear, and the distinction between 'View' and 'Edit' modes is not visually evident, resulting in a confusing user experience, among others.
Activeboards redesignThis is the same section after the UI refactor. The layout was restructured for greater clarity and consistency, with improved spacing and better-defined areas. It's now more intuitive for users to locate the actions they need. The widgets panel has been moved to the left side, pushing the content instead of overlapping it. Additionally, a tab system was introduced, along with dedicated toolbars for each context: global, active boards management, and workspace.

Learnings and Next Steps

One major learning was the importance of designing for flexibility within constraints. In data-heavy environments, small inconsistencies can lead to confusion or misinterpretation, so maintaining strict system governance became essential. Another takeaway was that early developer involvement accelerates adoption and ensures scalability.

Moving forward, we plan to extend Genesys to support dark mode, and responsive layouts for secondary devices and scpecific sections which are able to manage in a mobile device. The system will also evolve into a shared design infrastructure for all internal analytics tools, unifying visual language company-wide.