OPTIMIZELY • SHIPPED 2025
Simplifying variant editing for first-time users
Simplifying variant editing for first-time users
TIMELINE
TIMELINE
Jun – Sept 2024
Jun – Sept 2024
Jun – Sept 2024
ROLE
ROLE
UX Designer
UX Designer
UX Designer
TEAM
TEAM
PM, Design, Research
PM, Design, Research
PM, Design, Research
TOOLS
TOOLS
Figma, Cursor
Figma, Cursor
Figma, Cursor
Variant Editing Architecture
Variant Editing Architecture
Variant Editing Architecture
bEFORE
bEFORE
AFTER
AFTER
CONTEXT
CONTEXT
CONTEXT
Optimizely was scaling their A/B testing market, but numbers showed first-time users struggle
Optimizely was scaling their A/B testing market, but numbers showed first-time users struggle
Optimizely’s Web Experimentation product helps teams run A/B tests on live websites. However, many users struggle to launch their first experiment. Editing an experiment required thinking like a developer. It didn't scale to their expanding market.
Optimizely’s Web Experimentation product helps teams run A/B tests on live websites. However, many users struggle to launch their first experiment. Editing an experiment required thinking like a developer. It didn't scale to their expanding market.
Optimizely’s Web Experimentation product helps teams run A/B tests on live websites. However, many users struggle to launch their first experiment. Editing an experiment required thinking like a developer. It didn't scale to their expanding market.
Growth teams
Growth teams
Growth teams
Product managers
Product managers
Product managers
Marketing teams
Marketing teams
Marketing teams
Problem
Problem
Problem
How people think about experiments vs create them..
How people think about experiments vs create them..
How people think about experiments vs create them..
While the platform supports powerful testing workflows, creating a variant often required working through code, identifying selectors, editing HTML, and managing styles, all within the same flow.
While the platform supports powerful testing workflows, creating a variant often required working through code, identifying selectors, editing HTML, and managing styles, all within the same flow.
While the platform supports powerful testing workflows, creating a variant often required working through code, identifying selectors, editing HTML, and managing styles, all within the same flow.
...especially first time marketers who were not fluent in code!
...especially first time marketers who were not fluent in code!
...especially first time marketers who were not fluent in code!
"I see code and my brain panics! Can I just edit how I would on no-code website builders?"
"I see code and my brain panics! Can I just edit how I would on no-code website builders?"
Product Manager
Product Manager
"What is a selector? Does this help make my job easier? For somebody non-tech like me it would be good to give some hints."
"What is a selector? Does this help make my job easier? For somebody non-tech like me it would be good to give some hints."
Marketer
Marketer
WHY THIS MATTERS
WHY THIS MATTERS
WHY THIS MATTERS
If running experiments requires developer involvement, teams,
If running experiments requires developer involvement, teams,
If running experiments requires developer involvement, teams,
Run fewer experiments
Run fewer experiments
Run fewer experiments
Iterate slower
Iterate slower
Iterate slower
Delay product learning
Delay product learning
Delay product learning
"I wanted to try a few versions quickly, but I spent more time figuring out the workflow first."
"I wanted to try a few versions quickly, but I spent more time figuring out the workflow first."
Product Manager
Product Manager
"We move fastest when we can test ideas as soon as we have them."
"We move fastest when we can test ideas as soon as we have them."
UX Strategist
UX Strategist
"We had ideas ready to test, but not always the momentum to set them up."
"We had ideas ready to test, but not always the momentum to set them up."
Marketer
Marketer
THE BIG TAKEAWAY
THE BIG TAKEAWAY
THE BIG TAKEAWAY
Lowering the technical barrier could allow more teams across an organization to run experiments independently.
Lowering the technical barrier could allow more teams across an organization to run experiments independently.
Lowering the technical barrier could allow more teams across an organization to run experiments independently.
UNDERSTANDING THE WORKFLOW
UNDERSTANDING THE WORKFLOW
Experiments meant quick, focused edits, not full redesigns..
Experiments meant quick, focused edits, not full redesigns..
Experiments meant quick, focused edits, not full redesigns..
..so the editor need to allow for fast iteration, not unlimited control.
..so the editor need to allow for fast iteration, not unlimited control.
..so the editor need to allow for fast iteration, not unlimited control.
Instead of exposing every styling and code control upfront, the editor guided users toward selecting elements directly on the page and editing only what mattered in context.
Instead of exposing every styling and code control upfront, the editor guided users toward selecting elements directly on the page and editing only what mattered in context.
Instead of exposing every styling and code control upfront, the editor guided users toward selecting elements directly on the page and editing only what mattered in context.
SO WHAT DID I DO?
SO WHAT DID I DO?
SO WHAT DID I DO?
Re-designed A/B experimentation interaction model to reduce friction and enable flexibility.
Re-designed A/B experimentation interaction model to reduce friction and enable flexibility.
Re-designed A/B experimentation interaction model to reduce friction and enable flexibility.
Mental Model
Mental Model
Mental Model
I organized the experience around a simple guided editing workflow
I organized the experience around a simple guided editing workflow
I organized the experience around a simple guided editing workflow
Users start by orienting themselves through optional support (history of changes, AI prompts, experiment context), then move into the canvas to select elements directly on the page. From there, they refine those selections through structured controls for text, images, and layout, making changes that are immediately visible and easy to iterate on.
Users start by orienting themselves through optional support (history of changes, AI prompts, experiment context), then move into the canvas to select elements directly on the page. From there, they refine those selections through structured controls for text, images, and layout, making changes that are immediately visible and easy to iterate on.
Users start by orienting themselves through optional support (history of changes, AI prompts, experiment context), then move into the canvas to select elements directly on the page. From there, they refine those selections through structured controls for text, images, and layout, making changes that are immediately visible and easy to iterate on.
By grounding the design in this three-part system (Support → Select → Control), I created a clear sense of where users are in the editing process while keeping the complexity of experimentation approachable, fast, and intuitive.
By grounding the design in this three-part system (Support → Select → Control), I created a clear sense of where users are in the editing process while keeping the complexity of experimentation approachable, fast, and intuitive.
By grounding the design in this three-part system (Support → Select → Control), I created a clear sense of where users are in the editing process while keeping the complexity of experimentation approachable, fast, and intuitive.
Iterations
Iterations
Iterations
Three levels of exploration for editing workflow:
Three levels of exploration for editing workflow:
Three levels of exploration for editing workflow:
Direct Manipulation
This is what the UI looked like when I first joined the early project.
This is what the UI looked like when I first joined the early project.
This is what the UI looked like when I first joined the early project.
Notes driven UI
Exploratory chat UI introduced as an overlay on the note canvas.
Exploratory chat UI introduced as an overlay on the note canvas.
Exploratory chat UI introduced as an overlay on the note canvas.
Structured properties panel
Synthesizes learnings into a scalable and adaptive layout.
Synthesizes learnings into a scalable and adaptive layout.
Synthesizes learnings into a scalable and adaptive layout.
VARIANT Editing Flow
VARIANT Editing Flow
VARIANT Editing Flow
The design prioritizes a tight select-edit loop, while keeping guidance and advanced tools available without getting in the way
The design prioritizes a tight select-edit loop, while keeping guidance and advanced tools available without getting in the way
The design prioritizes a tight select-edit loop, while keeping guidance and advanced tools available without getting in the way
Hover & Select
Users interact directly with elements on the page and receive immediate visual feedback and confirmation on what elements are being selected
Users interact directly with elements on the page and receive immediate visual feedback and confirmation on what elements are being selected
Users interact directly with elements on the page and receive immediate visual feedback and confirmation on what elements are being selected
Edit
The visual editing canvas, users select any element on the page and modify it without touching code & receive immediate visual feedback, keeping editing grounded in real context
The visual editing canvas, users select any element on the page and modify it without touching code & receive immediate visual feedback, keeping editing grounded in real context
The visual editing canvas, users select any element on the page and modify it without touching code & receive immediate visual feedback, keeping editing grounded in real context
Edit text
Edit text
Edit color
Edit color
Edit layout
Edit layout
Editing with code for advanced users
Editing with code for advanced users
Support
Support
Every modification is tracked in real-time, giving users full visibility and confidence in the edits they've made.
Every modification is tracked in real-time, giving users full visibility and confidence in the edits they've made.
Every modification is tracked in real-time, giving users full visibility and confidence in the edits they've made.
View selected elements
View selected elements
View active change history
View active change history
REDUCING IDEATION FRICTION
REDUCING IDEATION FRICTION
REDUCING IDEATION FRICTION
Using Opal (AI) Integration for fast ideating and editing
Using Opal (AI) Integration for fast ideating and editing
Using Opal (AI) Integration for fast ideating and editing
I explored lightweight AI-assisted suggestions to help users generate variations more quickly without interrupting the editing flow.
I explored lightweight AI-assisted suggestions to help users generate variations more quickly without interrupting the editing flow.
I explored lightweight AI-assisted suggestions to help users generate variations more quickly without interrupting the editing flow.
Direct Manipulation
This is what the UI looked like when I first joined the early project.
This is what the UI looked like when I first joined the early project.
This is what the UI looked like when I first joined the early project.
Notes driven UI
Exploratory chat UI introduced as an overlay on the note canvas.
Exploratory chat UI introduced as an overlay on the note canvas.
Exploratory chat UI introduced as an overlay on the note canvas.
Structured properties panel
Synthesizes learnings into a scalable and adaptive layout.
Synthesizes learnings into a scalable and adaptive layout.
Synthesizes learnings into a scalable and adaptive layout.
Generating copy variations
These modals are shown to users when they first open the
These modals are shown to users when they first open the
These modals are shown to users when they first open the
Exploring visual directions
Guided Setup is a series of mandatory steps for new users.
Guided Setup is a series of mandatory steps for new users.
Guided Setup is a series of mandatory steps for new users.
Edge Case
Edge Case
Edge Case
Some changes needed to work across the entire site
Some changes needed to work across the entire site
Some changes needed to work across the entire site
While most experiments involved small, page-level edits, some teams needed the ability to adjust shared styles like typography, button treatments, or color systems across multiple experiences.
Instead of exposing these controls in the primary editing flow, site-level settings were separated into a dedicated space to keep everyday experimentation focused and lightweight.
While most experiments involved small, page-level edits, some teams needed the ability to adjust shared styles like typography, button treatments, or color systems across multiple experiences.
Instead of exposing these controls in the primary editing flow, site-level settings were separated into a dedicated space to keep everyday experimentation focused and lightweight.
While most experiments involved small, page-level edits, some teams needed the ability to adjust shared styles like typography, button treatments, or color systems across multiple experiences.
Instead of exposing these controls in the primary editing flow, site-level settings were separated into a dedicated space to keep everyday experimentation focused and lightweight.
Reflection
Reflection
Reflection
What I learned
What I learned
What I learned
Making a tool easier to use didn’t mean giving users more control.
Making a tool easier to use didn’t mean giving users more control.
The challenge was deciding what not to expose. Designing how to help users move quickly without getting overwhelmed.
The challenge was deciding what not to expose. Designing how to help users move quickly without getting overwhelmed.
The challenge was deciding what not to expose. Designing how to help users move quickly without getting overwhelmed.
The hardest part was designing constraints that still felt flexible.
The hardest part was designing constraints that still felt flexible.
The hardest part was designing constraints that still felt flexible.
Limiting controls reduced friction, but the experience still needed to feel powerful enough for experimentation teams.
Limiting controls reduced friction, but the experience still needed to feel powerful enough for experimentation teams.
Limiting controls reduced friction, but the experience still needed to feel powerful enough for experimentation teams.
