SR PRODUCT DESIGNER, DESIGN LEAD

2023

A Fresh Face for Mutiny

Mutiny’s flagship product is a tool for advanced marketers that allows them to personalize discrete portions of their website for a specific audience. For example, you may want personalize an H1 to tailor your home page towards either upstart or enterprise businesses.

The engine undergirding Mutiny relies upon the demographic information provided by IP enrichment tools (like 6Sense or Clearbit), UPM parameters, or the company’s first-person data that they have collected themselves.

I joined Mutiny as just the third Product Design hire, including the Head of Design. The B2B product is a best-in-class personalization tool that boasts users like Notion, Qualtrics, Pendo and Brex. It was these users, along with the bright & highly collaborative culture at Mutiny, that compelled me to join the company in early 2023.

Starting Point

As is common with startup products, Mutiny’s product was a proof-of-concept designed by an engineer. This dashboard is the user’s first touchpoint upon logging in. I took on a comprehensive redesign of this dashboard, also called the “Inbound” dash. This redesign also coincided with a product-wide refresh.

My Product Manager and I conducted 15 interviews using Dovetail. We asked users about the current Inbound page, and also learned about the lengths users were having to go to organize, plan, and prepare their tests. In these interviews, customers shared the spreadsheets, Notion documents, and even Monday & Asana projects they were using to keep tabs on the timing & performance of their experiments.

Below are some samples of the stop-gaps that customers were using to organize their Mutiny experiments. Screenshots are blurred for the privacy of the companies.

In the absence of better tagging or sort/filter functionality, users were relying upon cumbersome DIY naming conventions to keep their tests organized. One customer used the name of the test itself to notate the market region, the test’s launch date, and where the test would appear on the site.

Research Takeaways

The research yielded some key issues I wanted to make sure to address in the redesigned product:

  1. Create a hierarchy to the key actions that this page should drive. From a business perspective, Mutiny would like to encourage the user to create a new experience. Customers are most likely to use this page as a means of navigating to a test’s details page.

  2. Narrow the use of color so that color can eventually be added back in, but with more meaning. The colorful (and animated!) iconography used in the product didn’t necessarily add value or context. I decided to pull back significantly on the use of color so that we could eventually add color back in as the system-wide color palette for the product evolved, or as usage picked up on new features, like tagging.

  3. Add in some highly-requested features, like improved sorting & filtering, tagging, and the page on which the test appears.

  4. Allow more flexible navigation by tabbing out views that let users view an overview of their tests by Segment or by Page.

I’d made the assumption that customers used this overview table as a way to compare and contrast the performance from one experiment to the next. In interviews, customers would actually view the details page for two or more experiments in separate tabs, because the more granular breakdown provided them more meaningful context about how the tests performed.

Outcome

I worked closely with the designer and engineers conducting the system-wide redesign to ensure that the design system suited the functionality I was building, and that the Inbound product meshed well with the design system & other features of Mutiny. One key vehicle for transparent conversation were weekly Design Office Hours that were 100% drop-in & optional. These meetings were a great time to align, and also economized on meetings. In one hour, we would usually have quick conversations about 4 or 5 topics, replacing the need to meet about each item.

The scope of this project spanned the overview (table view) for Experiences (Mutiny’s words for tests, or experiments), Segments, and Pages, as well as details pages for each.

This overview table displays all the tests a marketer is currently running on their site. One quality-of-life improvement we provided as a was the snippet about data freshness and the option to hard refresh data.

Each experiment has a details page with high fidelity performance data.

A Note on Documentation & Figma

I believe strongly in my Figma documentation speaking for itself. I lean on pages and headers within my pages to organize my work, and often include a Readme for larger efforts.

This team was highly collaborative, and it was not unusual for the Product Manager and Engineers to be in Figma. There is always room for exploration, but one key goal of mine is crystal clear documentation that stands on its own.

Here’s an example of how I structured my pages in this project for legibility.

Book time with me to chat more about this or any of my case studies!