fiddler

Scaling Fiddler ML platforms as one unified
design system

Built a consistent method to increase speed and efficiency of design and development cycles while delivering quality user experiences across a broad platform.

Overview

Fiddler is an explainable AI Platform that enables enterprise organizations to monitor, explain and analyze enterprise AI models at scale, with actionable insights which are trustworthy, transparent, and understandable.

Fiddler has created some amazing features on the platform which change the way people can monitor and analyze their monitors. As the Fiddler platform continued to add features, one of the challenges we faced has been being able to surface the correct model to a user at the right time. We went too far along without adding the necessary navigational features into our navigation with little regard to discoverability or a course data science user mental model.

The main goal of this project w to "Build a consistent way to increase the speed and efficiency of design and development cycles while also delivering quality user experiences across a broad platform."

role
Product Designer

UX, UI, Prototyping
and Testing.

TEAM MATES
Rob Harrell
product manager
Jack Reidy, Andrew MacDonald
Front end engineers
DURATION
April 2020 - June 2020
(3 Months)
LAUNCHED
July 2020
The challenge

As the product gained complexity, we realized that neglecting to invest in our design system was coming back to haunt us.

A year ago Fiddler remained small and didn’t have much turnover. It had been relatively easy to keep the design and user experience consistent and for everyone to be on the same page. However, as we began to grow and feature the development, multiple team members were at a crossroads as the solution became apparent: We needed to create an efficient model in order to scale our product while keeping our platform cohesive and consistent.

We saw that it made sense to align components from a visual and interaction standpoint in order to create a single source of truth in aesthetics, behavior, build, and experience.

Our objectives were to:

  • Empower autonomous cross-functional teams
  • Deliver new features while increasing overall cohesiveness of the platform
  • Speed up feature delivery
  • Increase shared understanding

Hypothesis

We hypothesized that if we codified our design system and processes, we could empower autonomous teams to deliver solutions faster while increasing the quality and cohesiveness across all experiences.

Constraints:

  • We had no dedicated Design Ops or tools team to create and maintain the system
  • Proposed changes to existing designs could only be applied through other feature releases
  • The solution must be easily maintained and amendable by others
process

At this stage of the project, we only focused on 3 core things to our design system :

Design principles (design principles existed in order to guide the process and output of work being done), design patterns, and the component library. Once these were established, I directed my focus to the delivery and maintenance of the design system.
Old components

Challenges with navigation using old components.

  • Redundancy in the nav elements
  • No clear hierarchy
  • Users does not know where to start from
  • Existing workflows are silo
  • Navigation is nor self-explanatory
new components

Navigation redesign with new components

  • Menu items are grouped to reflect the true value of similar actions
  • Grouping caters to the needs and workflow of a citizen data scientist
  • Each module has a clear call to action with a contextual description for user's to better understand
  • Existing workflows are not cilo
  • Frequently used modules or navigation elements are grouped for efficient navigation
fiddler design system

Fiddler design system gallery.

Check out the gallery!
outcomes

Did the design system help us achieve our objectives? Yes..

We did achieve our objectives.* While I saw significant improvements in sprint velocity, improved platform cohesiveness, these achievements could not be attributed to the design system itself — but rather to the habits and process of conversation. The documented design system was simply a recorded artifact of that work.