Problem Framing
Interaction Design
Testing and Iteration

Salesforce Marketing Cloud - Journey Builder Assistant

saas | marketing automation | ux design

Client sponsored project



Sep 2019 - Dec 2019
Refined in Mar 2020


Researcher: Nic True, Penny Chiang, Varna Das
Designer: Lexie Li, Yuhao Shi
Director: Craig Birchler


Synthesize data:
Applied insights from research data, I led our team in conducting a channel & touch points map for Journey Builder, as well as an experience map for marketers

Ideation and design:
Facilitate the brainstorm session and explorations on UI design by adopting Salesforce Lightning Design System

User testing and Iterations:
Completed iterations on user interface design based on user testing results

The problem

The growing complexity of marketing campaigns makes simple mistakes hard to identify, which caused marketers being lack of confidence while building and launching their campaigns.

Journey Builder empowers marketers to launch campaigns for its audience. However, with the growing audience and their needs for personalization, messages are sent across a variety of channels.


According to Salesforce annual survey,
Marketers create audiences for each message often reaching into more than 1,000,000!

Design objectives

How can we increase marketer’s confidence at the time of activating the campaign?

To explore opportunities to lower the risks of making mistakes during campaign building
To prioritize the current problems
To provide feasible solutions that are consistent with Marketing Cloud ecosystem

solution brief

The core idea of Salesforce Journey Builder Assistant is a check mode for Journey Builder that enables marketers to check the mistakes in selected workflows to preview the experience flow for customers.

Let's see how I get here!

Problem Framing

Challenge 1
Understand the pain points and complexity:
-Why it is hard to make a successful marketing campaign?
-What makes marketers not confident?
how did I approach it?

User Interviews

Interviewing marketers to understand their pain points and their current solutions
Conducting a
contextual inquiry to learn about marketers' working process

Competitive Analysis

To learn about how does other products perform in the market (among 50+ automation and marketing products).

👉🏽   Click here to download the full collection.

What did i learn?

Factors that affect a marketing campaign

The key to a successful marketing campaign lies not only on planning the right content, audience, and time but also maintains the consistency with brand mission and business values.

challenge 2
Getting to prioritize:
What are our users’ greatest concerns?
What is our priority?

To help our end users reduce the complexity of quality assurance before launching a complete marketing campaign

I deconstructed marketers' concerns in each stage of their workflow by conducting a user journey & experience map with each key interaction and pain-point defined.

We decided to focus on the stage build the journey in Journey Builder and before they activate the campaign.

Click the photo to zoom in >>

How did I prioritize?

1. HMW:
How might we increase the marketers confidence?

We conducted a HMW session to explore the scope of potential solutions and came up open-ended proposals from five perspectives.


We brainstormed more than 50+ ideas by sketching out the potential solutions under the five categories.

3.Prioritization Metrics

As we have several possible solutions after the brainstorm, due to the time limit and current available resources, we used prioritization metrics to help us decide and move forward with the most viable one.

Design decision:
To improve marketers confidence by helping them detect mistakes in their built campaigns

In our ideation phase we conducted co-design session with marketer to verify our design direction. We presented our concepts  and probed participants with questions to understand their thoughts and reasons.

The biggest takeaway was we get to know marketers are always worrying about the accuracy of their campaign process; thus they have to go back and forth to double check if the information is correct based on the content whenever they feel unsure about.

Interaction Design


🎯 Flexible


🎯 Compatible


🎯 Intuitive


How to select a path?

We came up with three options and decided to move with option 3 by considering each options' pro and cons.

What are the concerns?

❗ There could be multiple paths between the two messages, which makes the check process more complex for users
❗ Users will need extra time to make the judgement of their preferred path, customization does not make it productive

How did I evaluate this?

✅ Easier to choose a specific path based on user’s need
❗Too many clicks to complete one task
❗Risk of forming a complete flow is high, since the flow may not be ended with a message

Why this version worked?

✅ Only two clicks, a flow always starts and ends with a message
✅ Always specify one path, no variations


How to display the information?

Option 1: Checklist

Option 2: Popup when hovering

👍🏽 Option 3: Modal window


Based on feedback from the end user,
Even for a single message, its content is configured by multiple apps on Marketing Cloud, users need to check them all in one view.

Only modal window could provide enough space and enable more interactions to preview the messages.


How to display the information in the modal window?



How does the finalized version look like?

Select the target path to check

Pain points addressed:
✅  Simplified the process for users to choose targeted path
✅  Minimized the efforts for users to complete their selection

Check audience segment

Pain points addressed:
✅  Consolidated key configurations for marketing campaigns

Preview email content on different devices

Pain points addressed:
✅  Eliminate users concerns of compatibility for their content

Unlock the map after checking

Pain points addressed:
✅  Added feasible emotional design to give a sense of accomplishment for users


Iteration based on testing results

📝 Iteration 1: Reconsidered and replaced the portal link, because:

1. We found users didn’t find where the portals are during testing
2. We found new changes will help better align with our "intuitive" principle
3. It's feasible to achieve by following the design system guidance

📝 Iteration 2: Adjusted the state of the check button before users finish their check job, because:

1. We found users clicked the check button before they reviewed all content
2. Such changes could make the guidance for users to complete their checking task more clear

SuCcess metric

How should we measure the success?

From users

• Campaigns' KPI
• Errors report rate

From product

• Check modal window retention rate
• Check button click rate
• Audience/Email Studio product adoption rate



Online collaboration

When everything goes online, communication plays a more important factor during online collaboration. One of my biggest takeaways as well as what I benefit the most from is upgrading my strategies, which entails more efforts on planning for both short-term and long-term goals. For example, making agendas ahead of meetings and making sure everyone is clear what they got moving forward were vital to guarantee working efficiency.

Let's touch base more
This not only helps me keep motivated by breaking down big goals into actionable steps but also helps the team visualize and manage the timeline on the product roadmap.

Next steps

• Other status/scenarios of the view review modal(minimum view)
• Extreme cases during the usage of the modal window

Thank you for visiting my website.