Navigation redesigned to help users discover project and model specific info faster.

Unifying a fragmented project and model navigation experience across Fiddler web platform to increase user confidence and discoverability.


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 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 the redesign is to "Unifying a fragmented project and model navigation experience across Fiddler platform to increase discoverability and intuitiveness." Always lead user with clarity, consistency and accessible. Establish clear product hierarchy that can scale for the future product and future releases. Not only that clearly indicate the navigational hierarchy of each page in the platform.

Product Designer

UX, UI, Prototyping
and Testing.

Rob Harrell
product manager
Jack Reidy, Andrew MacDonald
Front end engineers
Dec 2019 - March 2020
(4 Months)
June 2020
design case study in detail

Want a closer look at the work? Click here to view in Figma.

BEFORE / AFTER redesign OF navigation EXPERIENCE

How might we help users easily discover project and model specific information they are seeking with confidence?

Before Redesign of Nav - This is how left side nav bar used to look.
Model and Project context is not on global level. It is very much page level.
A clear segregation between high priority navigation items to low priority navigation items. Call of action and essential details are easily accessible to the user.
Here is list of models and data sets that are associated with American Tower Project.
From this page user can switch between models very easily and can access model centric nav elements quickly.

Introducing New Navigation For Fiddler Platform.

dataset list

Enable customers to easily and quickly switch contexts

Projects and Datasets is a peer to one another. Users can switch between them very seamlessly.
Main navigation labels in dataset are action based such as "Add Dataset" List View, and Tile view.
project overview

Clear indication to the navigational hierarchy of each page.

The common top navigation helps ground the user that they are in a particular flow. Main navigation labels are action based: Add Model, Add dataset and View Model Details.
model monitoring

Performance, Model Activity, and Insights.

A clear segregation between model level navigation items to the peer level navigation stuff such as "Monitor" level.

A panel is being used to show analytic aggregates information from multiple sources to produce insights, which movable, modifiable, filterable, and subscribable.
impact and metrics
New navigation IA hierarchy not only enabled users to discover and access related flows faster and increased engagement with the platform, but from a business aspect, it also enabled the roll out of new features and products smoothly in the future.

Once you set up a clear mental model, customers can  expect and predict what will happen when they go a page deeper into the Fiddler platform. And after everything, we created a design that met the goals of the project, a simpler mental model, which was easy to use. It was then ready to be broken down into components by Design Systems and shipped to our customers.