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.

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.
Design lead β€” discovery, user research, design, testing
5 Engineers, and 1 product manager
3 Months
Launched on June 2020
Old Components
New Components
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.
How might we empower team members deliver solutions faster while increasing the quality and cohesiveness across all experiences?
  • 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.

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.