top of page

Platform  Web App

Service Marketing Automation

Tool  Adobe Xd


Disclaimer: All the names and screenshots have been modified to comply with my non-disclosure agreement. This case study reflects my own opinions, not necessarily the view of the company.


RocketMarket is a web application that offers a comprehensive marketing automation solution to SMB companies. It helps the business owners capture leads, nurture the relationship with prospects through the sales funnel. Outstanding features are predefined email blast, customer segmentation, workflow automation, social media posting and scheduling, .etc. 


As a product designer, I’m assigned to the important task: make the existing marketing workflow automation functionality more intuitive and easier to use. The solution this time is to apply the in-place editing/updating pattern into the app.

The project about in-line editing

In RocketMarket, the marketing workflow automation feature is named Marketing Journey (MJ) and occupies a humble one-third widget on the home screen’s real estate.

The original state of Marketing Journey

In order to create a marketing journey, users will start from the Marketing Journey screen then:

  • Go to screen 1 and select a trigger type

  • Go to screen 2 and select trigger data

  • Go back to Marketing Journey and add action

  • Go to screen 3 and select an action type

  • Go to screen 4 and select action data

  • Go back to Marketing Journey and the workflow is  basically completed.

The workflow of creating a marketing journey


The Customer Success team conducted an online survey targeting a group of 10 existing customers who frequently use our app and from the same industry. These are the 3 most repetitive needs emerged from the analysis:


  • Need more robust business logic

  • Need to quickly edit everything without jumping over pages

Conducting customer survey in design process


I shortlisted the most needed workflows which had not existed in our MJ library; and sat with the development team to work on the feasibility of each workflow, and identify what is missing.

Common marketing workflows


I always kick things off with a concise epic statement.  The epic then is broken into 2 tasks. 

Work breakdown into Epic and Tasks


As the focus should be reducing the more time users interact with the UI the better, so all the essential UI components should be quickly navigated. 

The ribbon menu is introduced with 3 buttons Add Trigger, Add Action and Add Trigger. It’s configured as a sticker header so it stays accessible regardless of how long the journey can be.

Sticky menu bar when scrolling

When users create a journey from scratch, the trigger is made available by default. Users then select the trigger type and data.

The same mechanism applies to Action and Condition. 


For Action, users select the Action type and data correspondently.


For Condition, users select Condition type and data correspondently.


In order to save more precious time for users, we looked for solutions that are light-weight, space-optimal yet visually aesthetic.

We finally landed on an approach, which enables users to create a new tag right on the page via an overlay modal. The new tag is saved and accessible in the Tag screen.

Planning an automated marketing workflow is already a scary part on its own and the design should help lift a piece of burden off users’ shoulders by providing an effective and easy way to interact with the app. In-place editing is a suitable approach in which users can modify an element on the fly without having to be directed to another page.

Before and After of marketing journey enhancement
bottom of page