Behind each card in your One Metric reports is a full history for each metric. The changes to the cards we made last week have made it much more obvious that you can drill-in to these, so hopefully they will get used more.

But, currently these drill-down pages are small pop-up modals, which makes it hard to do more with them:

Current Details Design Current Graph Design

Likewise the settings page for each metric:

Current Settings Design

How could we make these better?

  1. Convert these modals to pages (there is an existing pattern we can follow here, because the drill-down page for Data Sources is already a separate page).
  2. Add breadcrumbs to the headers (again using the established pattern from the Data Sources page). We also have the option to add hero buttons in the top-right position.
  3. Add the period selector on the details page (there is no reason to include this on the settings page).
  4. The details page needs to accommodate the “Values” and “Graph” tabs. This is the first time we’ve used tabs on a page, rather than a modal. I’m keen to experiment with a layout that combines both on larger displays, while still showing tabs on smaller screens.

So, it could look something like this:

Possible Drill-Down Design

And on mobile screens:

Possible Mobile Drill-Down Design

That would set us up nicely to add additional tabs at this level in the future.

Some considerations:

  • The settings page also needs a “Save” and “Cancel” button.
  • The details page is also reachable from the public version of reports. Can these continue to use larger modals?
  • The settings page is also reachable from the Metrics Library page. What does the header look like in that case? And will we also link to the details page from there?

Let’s see…