CASE STUDY
Providing more flexibility for campaign creation
OVERVIEW
I designed a custom HTML feature to give brands more flexibility building campaigns by allowing users to copy and paste HTML and CSS code snippets into a custom HTML block.
PROBLEM
The campaign builder had limitations and was unable to support multiple column layouts in emails - a feature that a popular brand required. The existing workflow was to to submit a request to the engineering team, which was time-consuming and an inefficient process.
To provide users with more flexibility, we aimed to enable them to create multiple column layouts (and other custom requests) directly within the product by using a custom HTML feature.
USER GOALS
BUSINESS GOALS
Easily address bespoke brand requests with a flexible code editor.
Provide a simple way to copy and paste code snippets within the campaign builder.
Access a help guide with example code snippets of highly requested features.
Support non-technical users by recommending AI tools for code modifications.
Reduce dependency on the engineering team for custom email layouts.
Increase adoption and satisfaction with the campaign builder.
Improve efficiency in handling custom campaign requests.
USER STORY: CUSTOMER SUCCESS MANAGER
“As a Customer Success Manager,
I need to create a multi-column layout for a brand in the builder using a HTML code snippet from the help guide,
So that I can easily customise the design to meet their specific requirements without relying on engineering.”
USER STORY: ENGINEER
“As an engineer,
I want to collaborate with Customer Success Managers to create tailored code snippets for the help guide,
So that they have a central resource to handle bespoke brand requests independently, reducing the need for ongoing support.”
Key deliverables
Custom HTML Block: Users can add a custom HTML block to emails or pages.
Overriding capabilities: Ability to override brand elements and style Code Editor – A user-friendly editor for entering and editing HTML/CSS.
Expandable sidebar: Option to expand the sidebar for easier coding.
Live code preview: View code and real-time preview side by side.
Ability to share with brands: Enable customer success managers to share the preview with brands to review.
Code management: Ability to clear code and rename custom code block to help differentiate between multiple code blocks.
Link to help guide: Link to the help documentation within the builder for easy access to code snippets.
Discovery and definition
-
I researched similar custom HTML features in Bubble.io, Klaviyo, Wix, Duda, and Froont to gather insights for my workshop homework. I captured key screenshots and used them as references during the design phase.
-
Attendees: Designers, PMs, Engineers, and Customer Success Managers
Workshop Goals:
Provide a homework task to provide context and gather insights.
Foster collaboration between Engineers and CSMs.
Identify key use cases for the MVP.
Homework Task
Before the workshop, Engineers and CSMs paired up to explore a competitor’s custom HTML tool. They were given clear instructions and asked key questions like:
Can this tool build a multi-column layout?
What useful features could we adopt?
This helped set the stage, align everyone, and evaluate whether a similar tool would solve our problem.
-
I researched CodeMirror and Ace for the custom HTML feature, testing them with our Multi-column layout use case. I recommended Ace as it had syntax highlighting and shared my findings with the engineers to ensure this was a feasible editor to use.
Design iterations
A full-size code editor in the modal allowed users to enter or paste code. Clicking "apply" saved the code, with a "code saved" indicator in the sidebar. The rendered code appeared in the preview for instant feedback.
Iteration 1: Full-sized modal
Iteration 2: Draggable modal
A compact, draggable modal code editor allowed users to better view the code while seeing real-time changes in the preview. After clicking "apply," users could keep the modal open and monitor updates. A "code saved" indicator appeared in the sidebar when closing the modal.
Iteration 3: Embedded in sidebar
A code editor embedded in the sidebar allowed users to enter code directly, with the preview updating in real-time. The editor could be expanded for a larger view while editing. This solution was chosen for being both user-friendly and technically feasible.
Gathering feedback on solutions
I gathered feedback from CSMs and engineers, focusing on feasibility and MVP value. To make it interactive, I used FigJam and post-it notes for input.
Key Takeaways:
CSM support: Clear guides and code examples were needed.
Error detection: A code editor with syntax highlighting was preferred.
Editor size: A larger editor was necessary for better usability.
HTML & CSS only: The MVP would support only HTML and CSS for simplicity and security.
This feedback helped shape a more user-friendly tool.
Constant code visibility
BENEFITS OF CHOSEN SOLUTION (ITERATION 3)
Real-time preview updates
Expandable code editor
ACHIEVEMENTS
Introduced new feedback process
I used Figjam's video embedding feature to create a more interactive feedback process. The document was made up of 3 sections, each for a different prototype. I added post-it notes for stakeholders to leave feedback and questions directly on the designs.
This approach encouraged collaboration and gave stakeholders more control in when and how they could provide feedback, resulting in valuable and actionable insights.
I also presented the workshop findings and new feedback process in a company-wide show and tell. This aligned the team on the project’s progress, encouraged collaboration, and ensured everyone was engaged in the next steps.
Key learnings for workshop facilitation
Regular check-ins: To keep everyone on the same page, regular communication, check-ins, and feedback sessions are key for staying aligned throughout the project.
Workshop participation: Fewer participants help focus discussions, but it’s important to include key perspectives. Being assertive with clear expectations and guidance ensures sessions stay productive.