CASE STUDY
Providing more flexibility to campaigns with a custom HTML feature
I designed a custom HTML feature that gave brands more flexibility building campaigns by allowing users to copy and paste HTML and CSS code snippets into a custom HTML block.
THE PROBLEM STATEMENT
The current campaign builder, while flexible, had several limitations. One significant constraint was the inability to support multiple column layouts for emails, a frequently requested feature by a popular brand. Implementing this feature required users to submit a request to the engineering team, leading to a time-consuming process that hindered efficiency and agility.
To address this issue, we proposed enabling users to create multiple column layouts themselves, or with the support of an engineer, using a custom HTML block. This would not only empower users to design their campaigns more independently but also reduce the burden on the engineering team and encourage more collaboration between both teams.
THE OBJECTIVE
The primary goal of this project was to empower campaign creators to effectively address bespoke brand requests by enhancing the campaign builder's capabilities. This enhancement was a dedicated code editor within the builder that allowed users to effortlessly copy and paste code snippets. This functionality was designed to provide campaign creators with the flexibility to integrate custom code solutions, thereby enabling a tailored and responsive approach to meet the unique requirements of each brand.
To support the effective use of this feature, our objective included providing a comprehensive help guide. This guide served as a valuable resource, offering example code snippets for practical guidance. Recognising that campaign creators might not have had an engineering background, the guide recommended AI tools to assist them in making code changes. Additionally, the guide emphasised a dedicated Slack channel with the engineering team for any further support or queries, ensuring a smooth and accessible user experience.
USER STORY: CUSTOMER SUCCESS MANAGER
"As a Customer Success Manager, I need to adjust the L'Oréal email layout using a multi-column HTML code from the help guide. I'll copy and paste the code into the builder's editor to ensure it meets their specific requirements."
USER STORY: ENGINEER
"As an engineer, I want to collaborate with Customer Success Managers by providing tailored code snippets for bespoke brand requests. These snippets can be added by CSMs to the custom HTML editor, enabling efficient customisation and smoother implementation."
KEY DELIVERABLES
1. Add custom HTML block:
Allow users to seamlessly incorporate a custom HTML block into an email or page within the builder.
2. HTML and CSS code entry:
Enable users to input HTML and CSS code by providing a user-friendly code editor for both pasting and typing.
3. Expandable sidebar:
Provide the option for users to expand the sidebar, offering more space within the code editor to type and tailor code comfortably.
4. Simultaneous code and preview view:
Allow users the convenience of viewing both the code and a real-time preview simultaneously to enhance the editing experience.
5. Code preview in builder:
Enable users to preview the applied code directly within the builder interface for a quick assessment of the changes.
6. Clear indication of custom HTML:
Implement a clear visual indication to users when a specific journey or section has custom HTML applied, ensuring transparency in the editing process.
7. Visibility in shareable preview:
Ensure that custom HTML modifications are visible in shareable previews, providing brands with an accurate representation of the content.
7. Code clearing functionality:
Include the capability for users to clear the code in the code editor easily, allowing for quick edits or restarting.
8. Block naming feature:
Provide users with the ability to name the custom HTML block, enhancing organisation and clarity within the builder interface.
COMPETITOR ANALYSIS
I conducted a competitor analysis on tools with a similar custom HTML feature to gather insights and inspiration for the workshop homework task. During my research, I examined the following platforms: Bubble.io, Klaviyo, Wix, Duda, and Froont. I captured screenshots of key screens from each tool, which I later referenced during the design phase.
DISCOVERY WORKSHOP
Attendees: Designers, PM, Engineers and Customer Success Managers.
GOALS OF THE WORKSHOP
Provide a homework task to give context and ask participants to share insights from the task in the workshop.
Allow engineers and Customer Success Managers to collaborate together.
Identify use cases viable for the minimum viable product (MVP)
Share rough wireframes to visually demonstrate how I envisioned the tool working on our platform.
PART 1: HOMEWORK TASK
This workshop aimed to foster collaborative discussions between Customer Success Managers and Engineers about the custom HTML feature. I provided the attendees with a homework task prior to the workshop and paired an engineer with a Customer Success Manager. Each pair were given a competitor website that had a similar custom HTML tool and were provided clear instructions on locating the custom HTML tool. Participants were prompted to share their experiences using the tool in relation to specific use cases.
Some sample questions included:
1. "Would you be able to use this tool to build a multi-column layout?"
2. "What does this competitor's coding tool have that we could apply to our product?"
These targeted questions aimed to elicit insights and feedback on the practical application of the custom HTML tool for real-world scenarios. By focusing on specific use cases and encouraging participants to draw comparisons with competitor tools, the homework task aimed to gather nuanced perspectives that would contribute to a more thorough and actionable analysis during the workshop discussions. This provided the team with some context on what we were trying to achieve and allowed us to discover if a tool like this would solve the problem.
PART 2: WIREFRAME FEEDBACK
In the next phase of the workshop, the attention shifted to collecting feedback on the wireframes generated earlier. A visual specification was shared with the participants, detailing the requirements and wireframes for a Minimal Viable Product. The engagement was interactive, with participants encouraged to contribute their thoughts by adding post-it notes containing feedback, ideas, as well as any questions or concerns they might have.
This approach fostered a collaborative and iterative process, allowing stakeholders to provide valuable input on the visual representation of the custom HTML tool. The incorporation of post-it notes facilitated an organic and inclusive feedback mechanism, ensuring that the perspectives of both the users (Customer Success Managers) and Engineers were considered in refining and optimising the wireframes for the upcoming stages of development.
1. CSM support process:
Insights from the Customer Success Managers revealed the need for a structured support process. This involved providing CSMs with clear guidelines, code snippets, and tailored assistance to enhance their proficiency with the custom HTML tool.
2. Error validation and syntax highlighting:
Recognising the importance of error validation, there was a preferences towards incorporating a code editor with syntax highlighting. This enhancement would aim to provide CSMs with clear indications of any errors in the code, improving the overall user experience.
3. Code editor usability:
Feedback emphasised the importance of optimising the code editor's usability. Specifically, addressing concerns about the size of the code editor in the sidebar.
4. Remove styling options:
Engineers' input led to the decision not to include width and alignment styling options for the custom HTML block. Instead, the focus would be on enabling these styling aspects directly within the code, streamlining the tool's functionality and avoiding unnecessary complexities.
5. Scope refinement for MVP:
A strategic decision was made to narrow the scope for the MVP, focusing exclusively on HTML and CSS. This deliberate choice aimed to minimise complexity, reduce risk, and enhance the security of the custom HTML tool for CSMs. This iterative approach allowed for ongoing improvements based on user feedback and tool usage patterns.
SOLUTIONS
CODE EDITOR RESEARCH
I researched code editors like CodeMirror and Ace to shape my design decisions for the custom HTML feature. I tested these tools with our “Multi-column layout” use case to ensure they would suit the users needs. I shared my findings with the engineers and underlined the importance of opting for “Ace”, an editor with syntax highlighting.
HI FIDELITY PROTOTYPES
Based on the workshop findings, I developed three initial prototypes for the custom HTML feature. My focus was on enabling users to add a custom HTML block and seamlessly edit the block to incorporate bespoke code. I explored the following options for entering the code:
Solution 1
A modal with a full-size code editor which allowed users to enter or paste code. The code was applied upon clicking "apply," accompanied by a visible "code saved" indicator in the sidebar. Additionally, the rendered code appeared in the preview for immediate feedback.
Solution 2
A more compact modal with a draggable code editor provided flexibility on ability to see the code better in the preview. Users could keep the modal open after clicking "apply" to code while simultaneously observing changes in the preview. Similar to the first option, a "code saved" indicator was visible in the sidebar upon closing the modal.
Solution 3
A code editor embedded in the sidebar which allowed users to enter code directly. The preview updated in real-time as the code was entered, offering a simultaneous view of the code and its impact. This code editor could also be expanded to allow for a larger view of the code when editing.
SOLUTION 3 WINS!
After conducting the feedback process (refer to the section below), we landed on solution 3 as the final design — the code editor in an expandable sidebar. This choice emerged as the most user-friendly and feasible within our two-week sprint. The benefits of this solution over others was that it offered:
Constant code visibility:
This option guaranteed that the code was always visible, offering users a seamless experience.
Real-time preview updates:
The preview updated in real-time as the code was entered, offering a simultaneous view of the code and its impact.
Enhanced user experience:
The feature allowed users to expand the code editor, providing more space for comfortable viewing and editing.
ACHIEVEMENTS
INTRODUCED NEW FEEDBACK PROCESS
This project led us to uncover a new feedback-gathering method using Figjam's video embedding feature. We introduced a Figjam document structured into three sections, each dedicated to a specific prototype for which we sought feedback. In these sections, we incorporated a collaborative space with post-it notes, inviting stakeholders to contribute questions and feedback directly onto the designs.
To enhance clarity and comprehension, we integrated videos showcasing the prototypes within each section. Complementing the videos, we included screenshots of the designs to provide stakeholders with visual anchors for their feedback contributions.
We shared the Figjam document with stakeholders and requested feedback within a set timeline. We wanted their valuable feedback on feasibility and gave them the freedom to choose when to do the task, giving them more flexibility. We wanted this process to foster collaboration, give control back to our stakeholders, and make sure the feedback we got was really valuable.
By adopting this approach, we created an interactive platform for stakeholders to engage with the prototypes, fostering a more inclusive and iterative feedback process. The Figjam document emerged as a valuable tool for enhancing collaboration and communication in the feedback collection phase of the project.
SHOW AND TELL PRESENTATION
I presented this research project with the wider company in show and tell. I walked them through our process from discovery, emphasising key points like the homework task, and the rich feedback we received on wireframes. It was a quick yet meaningful recap, giving insights into the next steps in the project.
Subsequently, I shared the three prototype solutions and highlighted that I drew inspiration from code editor tools like CodeMirror and Ace to guide our design decisions.
Following that, I delved into the primary focus of the session– our innovative feedback-gathering approach. I conducted a live demonstration by showcasing the three prototype videos directly in Figjam, providing participants with an insightful walkthrough of the process we undertook.
To add a touch of interactivity and fun to the show and tell, I shared the Figjam document and invited participants to cast their votes for their favourite option. Additionally, I encouraged them to share their thoughts on whether this approach was something they'd be interested in participating in the future. The option with the highest number of votes aligns with the one we ultimately selected!
KEY LEARNINGS FOR WORKSHOPS
Stakeholder alignment in requirements:
Ensuring alignment among stakeholders throughout the project requires consistent communication and collaboration. Regular check-ins, feedback sessions, and reviews of project documentation are pivotal to maintaining cohesion and understanding among all involved parties.
Workshop participation:
Opting to include fewer participants in workshops can foster more focused discussions and assist in decision-making. However, it's essential to ensure the necessary perspectives are adequately represented for comprehensive insights.
Workshop facilitation approach:
Employing a more assertive or stern approach during workshops can be effective in steering discussions back on track when participants veer off- topic. Establishing clear expectations, maintaining a well-defined agenda, and gently but firmly guiding discussions ensures that workshops remain efficient and productive.
FUTURE RECOMMENDATIONS
Consider expanding the feature by incorporating JavaScript as a coding language for added flexibility and functionality. This could enhance the interactivity and open up possibilities for for complex use cases.
There are a few ways we could approach this:
1. Integrated JavaScript support:
Integrate JavaScript directly into the existing feature, allowing users to write and execute JavaScript code seamlessly within the builder.
This can make the feature more powerful and dynamic, as users can leverage the capabilities of JavaScript for advanced interactions.
2. Separate code block with feature flag:
Introduce a dedicated JavaScript code block within the builder, accessible only to authorised users, such as engineers. This approach allows users to enhance functionality while minimising security risks. Employ a feature flag initially to control access, enabling it for a limited user group. This phased rollout facilitates monitoring, gathering feedback, and ensuring responsible use. Provide clear documentation emphasising security considerations, educate users on best practices, and implement monitoring and auditing mechanisms for ongoing security.
Overall, integrating JavaScript can greatly enhance the versatility of the feature, and collaborating with the engineering team can offer valuable insights into the technical aspects of implementation.
CONCLUSION
In summary, this project successfully achieved its goal of providing campaign creators with a dedicated code editor for seamless integration of custom solutions. The iterative development, starting with a focus on HTML and CSS, ensures simplicity in the Minimum Viable Product (MVP) with ongoing refinement based on user feedback.
The comprehensive help guide, AI tools, and dedicated Slack channel support a user-friendly experience for campaign creators. Real-world examples from Customer Success Managers and Engineers highlight the tool's practical application in addressing brand requests and fostering collaboration.
Our research methodology, including workshops and innovative feedback gathering with Figjam, shapes the project effectively. Looking ahead, the recommendation to consider JavaScript integration opens doors for advanced interactions, aligning with future needs and innovation.
In conclusion, this project not only delivers a valuable custom HTML feature but also establishes a foundation for continuous improvement and innovation within the platform.