748.17 (0.79%) on May 15, 09:38 AM

Modernizing Iterable

A startup gets its glowup

In 2018, I joined Iterable as the first product designer during its Series B stage. At the time, the product was a powerful marketing tool, but its user experience was fragmented, difficult to scale, and required technical know-how to use. As the company matured, our platform needed to evolve to support enterprise customers, billions of message sends, and heavily trafficked workflows.

Context

My role was to help modernize the app's foundations and unlock future innovation with scalable patterns.

Starting point
  • User flows and navigation were unclear, and people relied on constant context-switching and multiple tabs to complete a single task.
  • The app had few guardrails and was almost too flexible, especially considering how many people it could directly message.
  • Old stack and existing technical debt also limited the performance of user-critical features and the experiences and updates we could deliver.
  • Backward compatibility was essential, as many of our users were deeply entrenched in our platform for their day-to-day work.
Starting Point

The original interface was fragmented and required technical know-how and repetition to understand.

Modernizing the core UX

  • Led redesigns for the general user flows throughout our app, before focusing on modernizing our Journeys and Audience portfolio areas.
  • Met and interviewed with many customers, both for initial research and concept validations.
  • Introduced modular, contextual editing experiences, so that folks can stay within a single view to complete a task.
  • Worked with Engineers to replatform our front-end codebase from Angular to React, unlocking capabilities and more enhancements.
  • Tailored the platform to better fit with what enterprise teams need from it.

Redesigned our indexes with improved information architecture and visual hierarchy.

Modernized the Journeys Studio and, early on, added the ability to draft changes before publishing live.

Improved context switching flow, for viewing, editing, and previewing a Journey's resources—without leaving the Studio.

Modernized segmentation and user list pages for easier-to-understand searching and filtering capabilities.

Micro-interactions and feedback for the query builder pattern.

Quick query and list summarization with AI.

Kickstarting a design system

  • With the other early designers, we swarmed and created an early design system, starting with our most used components.
  • We collaborated with Metalab, who took the visual design of our library to the next step. Eventually, we invested in an amazingly talented Product Designer who led the evolution of our design system and integration with our front-end codebase.
  • While modernizing both the Journeys and Audience portfolios, I further developed and expanded the design system with more complexity.
Early Design System

Early design system components and patterns.

Design System Sample

Expanded design system with comprehensive documentation.

Highlights and impact

  • Reached $100M ARR → $200M ARR!
  • Our UX and design is a competitive differentiator in our space and frequently cited as one of the reasons why our customers prefer and stick with us.
  • Meeting and hearing directly from customers and expert marketers about what they need to get their jobs done.
  • Our project swept Hack Week 2021, and my team won again in 2024.
  • Got to share our upcoming product releases on stage at our annual flagship conference!
On Stage

On stage in 2024, showcasing the latest enhancements to Journeys Studio.