Platform Web App
Service Marketing Automation
Tool Adobe Xd
ROCKETMARKET - MARKETING AUTOMATOR
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.
OVERVIEW
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.
THE PROJECT
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.
ORIGINAL STATE
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.
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 PREP
USER RESEARCH
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
BUSINESS LOGIC ANALYSIS
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.
WORK BREAKDOWN
I always kick things off with a concise epic statement. The epic then is broken into 2 tasks.
THE WORK
NEW MENU RIBBON UI
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.
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-LINE TAG CREATE
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.
