Laudspeaker journey builder overview

Redesign Laudspeaker Messaging Automation Platform

Overview

Laudspeaker is a dynamic marketing automation platform enabling users to effortlessly design and automate messaging journeys through a user-friendly drag-and-drop interface. Despite attracting new users, we faced a low conversion rate. As lead designer, I revamped the core feature, the Journey Builder, to elevate user experience and drive conversions.

My role
UX Design
UI Design
User Research
Team
1 Product Manager
2 Engineers
Timeline
03/2023 – 05/2023
Problem

New users were leaving due to challenges in using the core feature during their trial

Conversion Rate
< 10%
Research

What does the current Journey Builder look like?

To find why users were leaving during the trial, I studied journey creation sessions and conducted a heuristic evaluation.

Method 1: user feedback analysis
I analyze diverse feedback sources to create visual user journey maps, revealing insights during product trials.
Method 2: review screen recording
I analyzed 16 screen recordings in PostHog's backend, pinpointing user challenges during journey creation.
Method 3: heuristic evaluation
Collaborating with the product manager, I hosted a heuristic evaluation, identifying issues from a more expert standpoint.
Insights

Users were unable to create journeys, because...

Complex creation
Setting up a component took up to 7 manual steps.
Unclear next steps
Users lacked guidance for next steps.
Hard to understand
Confusion within the journey map and setting forms.

Design goals

Trim steps
Reduce journey creation steps for improved usability.
Amplify user guidance
Include suitable hints to enhance user confidence during trials.
Clearer communication
Enhance navigation and comprehension for journey maps and setting forms.

Ideation

Framework

I began with an initial framework to maintain consistent page layouts during journey creation. This ensured uniform user experiences and minimized confusion, covering button placement and interactions.

Initial framework wireframe for the journey builder
Adding a component

Next, I explored different ideas on adding a component. As this action repeats for multiple components, I aimed to minimize steps.

Adding a component — exploration 1
Adding a component — exploration 2
Adding a component — exploration 3
Detailed configurations

Lastly, I tackled detailed settings for each component. Considering diverse settings, I emphasized uniformity, scalability, and readability in design decisions.

Detailed configuration panel exploration
Final polish

3 steps to create

Creating a component now takes only 3 steps: drag > drop > set, reduced from previous 7 steps.

Drag, drop, set — 3-step component creation

Useful visual hints

Ample visual hints guide users seamlessly through each step.

Visual hints guiding the user through each step

Simplified configuration

Modularizing complex configuration forms for easy reading, while fostering user familiarity with layouts.

Simplified configuration form — interaction
Simplified configuration form — layout

Journey data visualization

Visualizing Journey data aids users in quickly grasping Journey performance and making informed decisions

Journey performance data visualization

UI components

UI component library used across the journey builder

Impact

Recorded sessions showed users could now adeptly create journeys on their own.

Conversion rate
> 25%