Context
What is Plotline?
Plotline is a SaaS product that enables users to publish tooltips, modals, and bottom sheets (collectively known as in-app engagement) without requiring developer involvement
What are Plotline Campaigns?
Plotline’s headline product Campaigns allows users to customize and publish campaigns with multiple nudge types (tooltips, modals, spotlights, etc.) with custom filters for cohorts and time windows.
What was my role?
I was brought on as a fresh pair of eyes to look at the usability issues of the product and draw on my experience as a Product Manager. I was also leading the User Research and used this as an opportunity to set a regular cadence for user research at Plotline.
Design Brief
What was the issue?
Plotline's core proposition was the ability to go live in-app campaigns effortlessly but was unwittingly introducing unnecessary friction with multiple UX issues in the campaign creation journey,
Why was this important?
This affected three metrics:
Time to publish campaign (from campaign creation; proxy metric for product complexity)
User penetration within organizations (hurt by high ‘Time to publish campaign’ and learnability)
Time taken by founding team to troubleshoot issues and field questions on campaign creation.
TL;DR
Plotline - despite its promise of lightning fast publishing of in-app campaigns - made it hard for users to move fast with usability issues going against its product thesis, which also led to fewer users per company.
Scope Definition
Drawing from the user research and our own intuition, the following scope emerged.
How might we create an easier, faster campaign creation experience by improving usability and eliminating redundancies in keeping with the product thesis?
Process (roughly speaking)
The process I followed is roughly summarized below. It doesn't come close to capturing the chaos and despair of having to convince the engineering team to build the feature though.
Understanding the Product
One of my first tasks was to design a clone app of Netflix and add the nudges in Campaigns to enable sales demos. This allowed me to do a quick UX audit to kickstart things, with the goal being understanding the ease of creating and editing a nudge campaign on Plotline.
A snippet from the early UX audit exercise
Understanding the User
Speaking to a user about their workflow - from Figma to Plotline and the associated problems
The initial insights came from Posthog recordings, but over time switched to talking to our users regularly over Google Meet and Slack. These were people who were:
Primary Users
Responsible for growth metrics - feature adoption, conversions, etc
Using Plotline for in-app nudge campaigns
Looking to largely side-step engineering involvement
Medium to high design sensitivity, basic tech-literacy
Interview Focus
Understanding life as Marketing/Growth Managers
Plotline’s role in daily workflow - from concept to go-live
Points of friction in the workflow
Mental model of Themes vs. Templates
Design Challenges
1. The better part of valor is… requesting engineering a few basic fixes?
Often the easiest problems are also the most overlooked. These are the issues I discovered via the UX audit and Posthog recordings.
Some were low-hanging fixes - such as responsiveness or copy - that were quick code changes while others required deeper thought and design changes.
Part of the rework was the inconsistency in the information hierarchy. For example, margins appeared under 'Trigger' but somehow Padding appeared under 'Styling'.
Another major issue which required some design thought was the inability to rename steps. When the each step was named 'Step N', it was easy to forget the contents of each step.
A snippet from the early UX audit exercise
2. To theme or not to theme? And sorry, what was the question?
Perhaps the biggest usability issue by a country mile and a half was updating styling parameters - colors, font weights, font sizes, corner radii or background colors.
No in-line editing of themes: Users couldn’t change an element's styling property such as color while creating a campaign. They had to:
Abandon the campaign creation/editing flow
Go into the ‘Themes’ section to change the color & save the theme
Return to their creation flow to check the changes.
No edits to existing themes: If one wasn’t happy with the styling change they made, they had to duplicate the theme to change just one variable such as color and save as a new theme.
A snippet from the early UX audit exercise
3. What's in a template?
This still required considerable work, as users had to ensure that they changed the trigger events and campaign audiences. Occasional mistakes were costly.
The user might have wanted to use a tooltip with a GIF from one campaign and a modal from another, but could not duplicate and pull in those UI elements from multiple campaigns.
Delicious dilemma
My co-designer believed themes should be a subset of templates for maximum efficiency. Users set up with go-to UI elements each with 3 or 4 themes.
My view was that themes should exist outside of any templates. These themes should exist independent of UI templates and apply variables relevant to the UI element in question.
Screengrab of one of the clients. Titles usually followed such naming conventions party because they were duplicates of past campaigns when starting out and partly because filtering was not supported.
Key insight
Do they think that themes apply to templates (colors can apply to a plethora of shapes)
OR go-to templates have distinct themes (each shapes comes in particular colors).
Screengrab of one of the clients. Titles usually followed such naming conventions party because they were duplicates of past campaigns when starting out and partly because filtering was not supported.
Final Design Decisions and Changes
I. Speeding up the decision of which UI nudge to choose
problems
There were no visual cues about the relative dimensions and positioning of the UI nudge when implemented on a phone screen.
UI Categories were hard to scan since it was presented both horizontally and vertically
decisions
Adding spatial context (with the phone frame) to understand relative size, positioning and suitability of the UI elements.
Changed UI Categories to a vertical list and moved it to the left for better scannability.
Versus the previous version - more difficult to consume data and no visual reference to the campaign in question
Versus the previous version - more difficult to consume data and no visual reference to the campaign in question
II. Cleaning up the Information Architecture and UI for Steps
problems
Inability to rename or reorder Campaign steps. Users would forget the contents of the steps and inadvertently make mistakes.
Inconsistencies in IA such as Padding and Margins appearing in two different sections.
Toggles and labels or certain CTAs set far apart, thus slowing down new users.
decisions
Steps are now contained in their own parent group and can be renamed and reordered (without having to delete a step and adding a new one in its stead).
Audience and Metrics now do not get pushed out of the user's locus of attention by Steps.
More logical grouping of settings and simplified input, such as allowing top-bottom, left-right inputs together while still affording individual tweaks.
Previously
Issues with the Information Architecture and placement of key configuration options.
Issues with the Information Architecture and placement of key configuration options.