Take me back

Building a new Visual Editor

Project

A core part of my work has been improving the Visual Editor in Web Experimentation, with a strong emphasis on empowering non-technical users. By simplifying how marketers can independently create and manage variations—without relying on developers—we’re making experimentation more accessible, increasing experiment velocity, and ultimately driving adoption, satisfaction, and retention.

Deliverables

 • High-fidelity interactive prototypes
 • Refined designs prepared for launch.
 • Personas
 • User journeys and task flows
 • Low-fidelity wireframes
 • High-fidelity mockups and prototypes

Tools

 • Figma
 • Lucid Chart
 • Origami Studios

Situation

At the beginning of 2024, I joined Optimizely as a Senior Product UX Designer, focusing on the Experimentation platform. One of the most critical and heavily used features—the Visual Editor—was increasingly becoming a source of frustration for users. Originally built in 2015, it relied on outdated iframe-based architecture that frequently failed to load modern websites, making it unreliable and limiting for non-technical users like marketers and experimentation specialists. Competitors were gaining traction by offering smoother, more modern editing experiences, causing us to lose deals and reduce customer satisfaction.
What we want to achieve

Enpowering Marketers with Autonomy: Enabling Intuitive Creation, Confident Editing, and Scalable Experimentation

Task

I was tasked with leading the UX vision and execution for a full rebuild of the Visual Editor. The goal was to create a more intuitive, scalable, and developer-trusted experience that empowers non-technical users to independently build, edit, and manage experiment variations—ultimately increasing experiment velocity, usage, and retention. My role involved aligning product and engineering around customer needs, defining the core UX problems, and delivering a roadmap of user-centric design solutions across multiple milestones.

Actions

Discovery & Research:
Conducted analysis of stakeholders, internal feedback logs, support tickets, and internal reports Mapped core personas (e.g., digital marketers, experimentation specialists, developers) and their pain points—from lack of reliability, transparency, and drag-and-drop capabilities to limited accessibility due to iframe and installation dependencies. 
 
UX Strategy & Vision:
Developed the end-to-end UX vision for a new overlay-based Visual Editor, eliminating iframe dependency for better compatibility with modern JavaScript frameworks and CSPs. Defined key UX pillars: live editing, drag-and-drop layout control, transparency of code, multi-variant tab switching, and Opal AI-assisted editing.  
 
Design Execution:
Created low-to-high fidelity mockups and prototypes covering M1–M4 milestones, including real-time element editing, AI integrations, personalized editing using customer variables, and enhanced debugging tools. Worked closely with PMs, engineers, and QA to define detailed user stories, flows, and acceptance criteria, ensuring shared understanding of cut lines and design priorities. Conducted regular design reviews with internal stakeholders and usability testing with customers to validate functionality and iterate quickly. 
 
Cross-functional Alignment:  
Partnered with product and engineering leadership to break down the vision into quarterly deliverables (M1–M4). 
Collaborated with Sales and Solutions Architects to ensure pre-sales use cases were addressed and demo-ready. Supported internal documentation, onboarding flows, and customer-facing messaging to prepare for rollout and feedback collection.
 

Results

Redesigned experience laid the groundwork for what will become the most advanced, user-friendly Visual Editor on the market—prioritized around non-technical users while earning back developer trust through transparency and reliability. Customer feedback alignment increased confidence in adoption—expected to raise monthly Visual Editor usage in 2025.Anticipated increase in experiment velocity and platform stickiness, supporting reduced churn and higher user engagement across Web Experimentation. element editing, AI integrations, personalized editing using customer variables, and enhanced debugging tools. Created a replicable framework for balancing technical feasibility with user-centered design across complex, multi-phase product initiatives.

Admin flow

Drag and Drop

AI Flow