Fiddler

Fiddler design system

Help creating a design system from the ground up to increase speed and efficiency of design and development cycles while also delivering quality user experience.

context

Fiddler is an explainable data platform that enables enterprise data science teams to create and manage production quality machine learning models and monitor predictions at scale. It also provides to analyze model performance and identify critical issues.

role

Design lead — discovery, user research, design, testing

team

5 Engineers, and 1 product manager

Duration

3 Months

Status

Launched on June 2020

the challenge

Fiddler remained small and didn’t have much turnover. It had been relatively easy to keep the design and user experience consistent for everyone to be on the same page. However, as we began to grow feature development across cross-functional teams, it quickly became apparent that we needed a better way to scale our teams while keeping our platform cohesive and consistent.

Inconsistent styling, design language & patterns across the different features
More time spent on designing new components, patterns and less on the actual problem

objectives

Empower cross-functional teams to autonomously deliver new features while increasing overall cohesiveness of the platform
Speed up feature delivery
Increase shared understanding

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

design audit

Started out a design audit on all of the existing features to get a sense of the polarity and inconsistencies between each of them.

Building a colour palette

Before creating our palette, we first had to determine the colours that we wanted to support, such as:

Primary / Secondary or accent colours
Grays
State colours (such as success, info, error & warning)

Creating components

Design audit had provided us with a list of components currently being used that we would need to redesign, but I also carried out a lot of research on other design systems to collate data on other components that we may need in our features.

Using the new design system in the wild

The first project I started to work on after we had created the design system was the fiddler platform navigation redesign. With new navigation users have two important ways to navigate through Fiddler platform. One is global navigation - which refers to elements that are always available via sidebar. Another way is through contextual navigation - which refers to the elements that change based on the page a user is viewing currently.

PROJECT OVERVIEW

Clear contextual navigational hierarchy of each section

Top contextual navigation helps ground the user that they are in a particular flow.

Model monitoring

Model performance, activity, and insights

Breadcrumbs at the top of the screen (contextual navigation) reinforce this, and help user understand where they are and desired actions - Monitor level.