AI Writer

Summary

"Campaign Monitor is an email marketing SAAS platform that enables businesses and marketers to create, send and optimise email marketing campaigns.

Over the last few months, there have been many conversations on how might we leverage Artificial Inteligence (AI) for our users to make their jobs easier and more efficient. My task was to add AI capabilities into our existing email builder in a user-friendly way. This project was designed and released in late 2023."

Firstly, understanding the problem

Before I even start designing, it’s always important to first understand the problem and ask the team as many questions as possible. This may include questions about our objective, scope, who we’re designing for, tech constraints and timelines. Clear communication will save us a lot of time in the long-run!

Hmm..

Here's what I asked

WHY are we even adding AI to our email builder?

A: Research has shown that 77% of marketers want to use AI to reduce the time spent on repetitive tasks and 62% of consumers are comfortable with generative AI, as long it doesn’t negatively impact their experience. We hypothesise that this feature will give us a competitive edge for new users to increase conversions, user retention and upgrade to our premium plans.

WHAT is the objective and initial scope of the project?

A: Adding an easy to use AI Prompt for email content in the builder using OpenAI -3.5 as the language model.

Designing the MVP

With a tight deadline, we first designed an MVP of the AI Writer. From our user surveys conducted on Appcues, we know that text/content generation is the most important feature for our users. So, our MVP will be focused on generating text.

Minimal UI

Leverages existing component from our design system to minimise tech effort due to time constraint
Designed to be simple and easy to use with only function to generate content, thus reducing learning curve for new users
Made sure that colour contrast is up to WCAG 2.0 contrast standards and there’s visual hierarchy for accessibility

Loading animation

One tech constraint that we had to design for was the loading time when generating content
I created a GIF as a way to indicate to the user that “AI is now writing”. This minor detail increases perceived value in the content and makes the waiting process less frustrating.

Testing the MVP

This MVP provided a solid foundation for our project. After receiving feedback and conducting design critiques, we identified areas for enhancement and generated new ideas for the next iteration. With both the design and engineering teams ahead of schedule, we were able to incorporate additional features.

Refining the design

Improvements and refinements for the next iteration

Incorporating a "Fix Spelling & Grammar" function
Implementing an "Adjust Length" function
Additional ability to modify the generated response
Introducing clickable example prompts
Addressing error states
Leveraging existing conversational patterns from other AI prompters
Expanding component size while maintaining alignment with our design system.

Feature 01

Drag & drop

Integrated into the text block, users simply drag and drop then click on “AI Writer” to start
Users can also just click the “AI Writer” floating action button.

Feature 02

Example prompts

To reduce the learning curve, users can view example prompts for inspiration.
They can also click to generate responses from the example.

Feature 03

Modify response

Similar to the pattern of other generative AI tools on the market
Users can improve or modify the response until they're satisfied and improve generated content

Feature 04

Apply directly to email

Users can directly add the generated copy into their email with just a click of a button.
They can also copy to clipboard and paste it manually.

Measure and learn

Due to the time constraints and high customer demand for the feature, we built and released this design to ~50,000 active monthly users to measure and learn. This would allow us to capture real-life prompts outside of our testing-environment as well as more user feedback. Surveys were also sent to the beta group to gather more feedback.

The results

~33%

Adoption rate

~15mins

Reduced per sent campaign

TBC

Other metrics

Next steps

Designing should never end and iteration is key. It’s important to emphasise continuous learning from user behaviour to improve and iterate this feature through future iterations. This would include user interviews, user surveys, hotjar user recordings and user feedback.

UX UI Design @ Campaign Monitor

Revolutionising Email Marketing Through Generative AI