Movio Cinema offers a comprehensive film-centric solution that allows cinema marketers to identify specific audiences and develop personalized campaigns. These targeted campaigns are composed using our WYSIWYG email editor. We set out to redesign this email editor with the goal of using it to create all Movio Cinema campaigns, no matter what communication channel you use. The aim of this iteration was to build the email editing functionality of what will become our final updated Campaign Editor platform. This blog will go into how we approached the redesign from a UX perspective which will be covered by Martijn van Buuren , and Cristal Ramirez will then give her perspective on how we’ve put the new Email Editor to the test via Movio operational services.
Why a redesign?
We knew there were some parts of the editor that needed attention, and we also noticed that our customers spent a lot of their time on this part of our product, so it was obvious that we should invest time in helping them get the most out of Movio Cinema.
By looking at the way marketers constructed their email campaigns we highlighted some areas that we could improve on, such as how to add and remove images, paragraphs and buttons.
As well as the process changes, we realized the current architecture and technology, that had served us so well, was starting to slow us down when creating new features. We were increasingly spending more time supporting it and less time building features. We’d had great results and were developing a strong knowledge of a few new UI frameworks across Movio and felt we could build more functionality faster utilising these tools. You can read more about this in our blog ‘5 useful tips for real-world Redux’.
Having recognized the frustrations of how this tool was functioning from our customers perspective, the team were motivated to redesign our Email Editor to improve the overall user experience.
Kicking off the UX design process
Research
My first port of call was to research what we wanted to achieve. I started by analyzing other email products and cataloged how certain functions worked in each product. This way I could identify the best user experience in each feature of every product and use them as inspiration for our redesign.
I interviewed Movio’s Account Managers about how their customers were using the existing product. It was very insightful to hear these real-life examples of how our product was used and about any frustrations that existed. This enabled me to really put myself in their shoes.
By comparing the templates that Movio Cinema had created for each customer with the actual emails that customers had sent I was able to analyze the way people actually used our product. This proved most valuable, I even noticed customers using different types of fonts and colors. We want our customer’s campaigns to look their best for their loyalty members and brand consistency plays a big part in achieving that.
Sketching
During my analysis, ideas started to brew in my head. Writing and drawing them on paper helps me keep my head clear for new ideas. There were so many things to take into account for this project, for example:
- Technical limitations
- Feature support
- Simplicity
- Flexibility
- Email limitations
- Customer feedback
This meant lots of sketching, discussions and exchanging of ideas to refine my plan.
The 4 ingredients to a successful UX redesign
Following my research and planning stage I was ready to get started on the product. There are four main points that I covered which I’ll explain in further detail in this blog:
- Design for flexibility
- The balancing act - freedom and constraints
- Best practices inform design
- Clean interface
1. Design for flexibility
When designing any kind of software application, I always go a few steps further in the design than is required for the initial release. By doing this I can make sure that all the features that are likely to be implemented (and some that may never be) will fit into the application - it’s future proofed. It is very counter productive when you come to add a feature to a menu and find there is no space remaining to do so. Designing for flexibility means that it will be very easy to add features because you’ve already planned where they are going to go.
2. The balancing act - freedom and constraints
The Email Editor is effectively a design tool that lets its users create something new that didn’t exist before, so, it allows for a lot of creative freedom. However, I decided more guidance was required to help our customers easily maintain consistency for their brand. This became a balancing act; with each feature I thought about the possibilities it would bring, good and bad.
A trend that was apparent during my research was the ‘drag and drop’ of individual components such as headings, texts, buttons etc. into the email which enables lots of freedom. It also begs the question, can you offer too much customization?
Thinking about the desired result our customers are looking to achieve, I decided it would be easier if we supplied pre-composed sections - a composition of headers, texts boxes, images and buttons. This would mean that each section has its own purpose, such as an introduction or a specific movie offer. Building the desired email using these sections will be faster than dragging each individual component to the correct location and it makes it a lot easier to specify the correct layout for each section.
With the introduction of pre-composed sections that you drag into the email, you can now add what is needed instead of removing what you don’t need. This solves an issue our users encountered in the previous editor.
When addressing how to add and remove images, paragraphs and buttons we decided that we wanted to enable users to easily change their minds. I didn’t want to add another collection of individual elements because there would no longer be any constraints on where the user can put these elements. We now have a collection of sections rather than individual elements. By using sections we can ensure that they render consistently across mail clients.
Allowing the user flexibility to change their minds during the email build was enabled via placeholders; whenever an element is deleted, it is simply just hidden as a placeholder. With the click of a button the user can show or hide all the placeholders. This ensures they can get buttons back after removing them, but also constrains them into where they can be placed.
3. Best practices inform design
You shouldn’t use too many CTAs, but rather keep your email to the point. The new placeholder idea lightly enforces this as a best practice. Another guideline is to keep your text short and engaging. The length of text depends on the width of the column. Text of normal length on a laptop might appear lengthy on a mobile phone because of its smaller screen. Since more than 50% of emails are currently opened on mobile phones, I wanted to encourage our users to keep the text short. I decided to make the textbox roughly the size of a phone to simulate a thinner column. That doesn’t mean the text can’t be longer, it’s just visually suggestive. We’re very keen to see how this will affect user behavior going forward.
4. Clean interface
The updated interface of the Email Editor is clean and reactive, keeping distractions to a minimum and allowing the user to focus on their current task. The email is always visible, enabling a good overview of its current status. The colors of the interface have been kept to shades of gray with blue highlights (Movio Cinema’s brand color). The colors are intended not to distract too much from the emails’ own design and content
Editing structure and content is clearly divided in the interface. Structural changes are made directly on the email with the help of the sections library sidebar. Editing content, like texts, links, and uploading images happens in the properties sidebar. This sidebar appears and covers the section library when an object, such as an image, is selected, clearing up space for properties relevant only to the current task, in this case the selected image. These sidebars have a simple aesthetic, making it easier to instantly see which sidebar is currently active.
Real world testing - Cristal Ramirez, Movio operational services
Once the redesign was complete it was time to put the new Email Editor to the test in the real world. This is where I could help. As an Account Manager based in our LA office performing operational services, I was tasked with testing the new Email Editor during my day to day handling of member communications. Our operational services are for customers who have outsourced the daily operation of their loyalty program to Movio, as a result, I was able to test the updated editor for real life campaigns on behalf of our customers.
My general feedback for the new Email Editor is really positive. I’ve found that the minimalistic interface makes it easy to appoint a foundation to the email. After selecting the type of email template, you’re greeted with your main introduction section, in this case a hero-image, header, textbox and button. It is easy to either remove properties from the section module, or remove the section entirely to replace it with something that better represents the message the marketer is trying to convey.
I think one of the nicest aspects of this UX redesign, and a benefit to our customers, is the ability to easily retrieve a deleted text box with a click of a button. The streamlined interface allows marketers to create an email quickly and effectively, including only sections that are needed, without the fear of removing a segment that will later need to be included due to a change of heart or a last minute addition.
Additional benefits include:
- Adding images or new sections to an email via the simple drag-and-drop process whether it be an image file, or updating a link or message on a button
- Quickly able to show or hide elements, such as images or buttons, with the new placeholders feature
- All the text editing tools conveniently placed around the textbox so it’s so easy to craft a message exactly how you want it
- The ability to preview your email in both desktop and mobile views
We know that personalization can be key to the success of some email campaigns so it’s great to easily be able to ensure that each section of my email is personalized based on the group I am targeting (e.g. age or gender). By using the option of conditional content I can simply click to add a new rule to a section I want to personalize.
Along with simplifying the email building process, the hope is that the new Email Editor will save significant time for each campaign build.
We look forward to rolling out this new Email Editor to all our Movio Cinema customers over the next few months.
