Quick Actions

A global command palette built during hackweek to make marketers more efficient in Iterable

Overview

Iterable offers marketers tools to create, analyze, and manage campaigns, but previously lacked a way to search for individual assets without loading their respective indexes. This meant users had to navigate to specific index pages, making searches cumbersome and inefficient. This made accessing resources cumbersome, timely, and Iterable was making expensive backend queries for tables of assets that would often go unused.

The start of this project began as a hack during Iterable's annual engineering-led "hackathon" in December 2023. This event gave engineers a chance to brainstorm, design, and build creative ideas for the Iterable product in just a few days. Historically, product and design where consulted in the process, but not typically leading a hack or directly contributing code. Having built a relationship with many of our engineers through my work on the Aurora Design System, I managed to recruit 4 engineers and another designer to assist me in building out this hack.

Challenge

A few months prior to the hack week, I was in an observation session with an Iterable customer and noticed the volume of tabs they used to work within the product. I followed-up with some off the cuff questions around tabs, finding assets in Iterable, and general navigation throughout the product. From there I began concepting feasible ideas that could address this usability concern.

How might we streamline navigation and empower marketers to quickly access key actions, create new campaigns, and connect seamlessly within their workflows?

Navigating or creating new items is difficult with Iterable's existing CRUD model—where everything is done from the index.

My role

I led the design and implementation of Quick Actions alongside design and front-end assistance from another Senior Product Designer on my team, Levi Campbell. My specific responsibilities included:

Facilitating and conducting user research to understand jobs to be done to drive design mandates and principles of the project
Designing a global command palette contextual to Iterable, built on top of the recently released cmdk open source package (https://cmdk.paco.me)
Led and collaborated with cross-functional teams, including engineers and PMs, and our technical doc team, to build, deploy, and test the feature alongside Iterable's standard release process
Directly contributing production-ready code for the feature as I iterated through different interaction patterns that could make marketers more efficient without having to leave their keyboard
Implemented custom event tracking in Heap to evaluate adoption, usage, and success of the feature

Important note: I also acted as the PM for this product feature until it was shipped in February of 2024, which was then transitioned to the Platform team (global navigation, settings, integrations) to support future development.

The process

To bring Quick Actions to life, we started with clear goals:

Discovery: We listened to users and mapped workflows to pinpoint what was slowing them down. Insights from feedback and reviews of tools like Linear, Raycast, and GitHub directly shaped how we approached command palettes.
Ideation & Design: With a plan in hand, we moved to sketches and high-fidelity Figma prototypes. The focus was on making search and creation effortless, with keyboard shortcuts and accessible designs baked in from the start.
Collaboration & Development: We built many of the keyboard interactions in Figma first, to ensure that the interaction felt fast and seamless, we realized that Figma's prototyping limitations required us to move into the code. While myself and another designer took the lead on implementing the styles from Figma to the cmdk package, 2 of the engineers focused on getting the package into our repo, while the other worked on connecting the endpoints to the front end.
Presenting our work: After four intense days of designing, coding, and strategizing, we were ready to showcase our creation to the organization. We opted to share a live demo, so teammates could see that it was working code within our product already. The zoom chat flooded with excitement—as this was a problem for any user in the Iterable product, external or internal. Our team received accolades from our peers and our CEO, ultimately leading us to win the hack week challenge and the "People's Choice Award"

Collaborating in a figjam with engineers to determine the scope and features that we'd focus on for hack week.

Evaluating which actions can and should be taken from this menu

Exploration

When we started designing for quick actions, we utilized the Jobs To Be Done framework to ensure we were prioritizing the right functions for the command palette. As we explored different iterations of the menu, here were a few of the questions we asked along the way:

What's the most important things to show here? How might product usage metrics help define what is prioritized in this menu?
Should actions for a specific item all be grouped under one item type? Or should actions be split out, so the marketer is aware of the type of actions they can take on an item?
How much meta data should we show? How do we ensure that marketers know that they are going to jump to the correct item? Should we show a preview inside the menu?
Could we simplify the hidden subpages by allowing a marketer to just "search"?

Initial designs grouped available actions for an item under the respective heading for the item

Exploring ways to help the marketer understand if they made the right selection by exploring inline campaign previews. This didn't scale well to other resource types aside from Campaigns and Templates.

After some internal testing, we decided to explore a new version that grouped individual controls by action.

And we attempted to find ways to introduce more keyboard shortcuts that could get the marketer into a specific search by bypassing the initial command menu.

Solution

Quick Actions is a global command palette that simplifies navigation and accelerates workflows for marketers.

Key Features:

Search for any resource—campaigns, templates, journeys, and snippets with smart filtering and context-aware suggestions.

Create new campaigns, journeys, or templates directly from the palette.
Navigate to key areas of the platform without losing focus on the current task—for the first time in Iterable history, you could jump between a Journey you're building and open a Campaign without having to load the individual indices.
Keyboard shortcuts quickly activate the main palette or specific workflows (/ opens the menu anywhere in the product, but using a key combination like shift+C would open the campaign search, shift+J opens the journey search, etc).
Search for a user's profile without having to leave the current task or flow—a feature that is simply a search box on an empty page in Iterable today.

Read more about how Quick Actions works on Iterable's support site and if you're interested, you can explore the file or view the prototype.

Now you can navigate, create, and search whereever you are in the product—and you don't have to leave the current task at hand—unless you want to!

Internal feedback and testing pushed the iteration that grouped items under different action categories, making it clear to see what actions can be taken on a specific item type.

Search for the most important resources in Iterable, with key meta data highlighted within the search itself

Time to start something new? Create an item without leaving the keyboard.

Results & Impact

As of February 10, 2025—Quick Actions has globally GA'd in the product. It's delivered measurable improvements for both users and the business:

Analyzing time on task with beta test group participants showed an 80% reduction in time spent with common paths like accessing a journey or creating a campaign compared to prior to the features launch with the same cohort.
We revealed this at Activate 2024, the company's annual user conference, where many users shared in the research booth that this was the feature they were most excited for us to launch
Positive feedback from internal teams and end-users, with marketers highlighting its role in streamlining their workflows.
Strengthened Iterable’s brand as a user-centric platform committed to improving marketer efficiency and proving that quality of life features can have as big of an impact as some of the key product announcements.

Due to timing and backend limitations, you have to define the item type you're searching for, but post-launch feedback has pushed the team to explore a single search that can index any resource type with the given query.

Reflections and what's next

Even though Quick Actions was designed and developed in four days, it took a long and arduous journey to get it into production. Internal team shifts, prioritization, and lack of a clear team owning the feature, meant that I had to keep pushing for it post-hackweek.

I'm excited to see how it will change how marketers use Iterable and I've already started to think of ways that we can improve the menu with things like a single search for multiple assets (no need to access a nested search view) or even a place to engage with Iterable AI for quick insights like campaign status or journey metrics.

I'm particularly proud of this feature because of the impact it had on Iterable's marketers and own teammates. While we were challenged to build this in such a short time, it demonstrates the value of engineers and designers working more closely and in tandem. Quick Actions started as an idea during an observation session, and pushed me to step out of my comfort zone to be the first non-engineer to lead and win a hack—making it a highlight of my contributions at Iterable.