Development, Emails, UI / UX
The CinemaNow® Newsletter Redesign occurred in two separate phases - first for the Blue Store, and then a second time a few years later for the Popcorn Skin.
This initial redesign was the first large scale project I received after joining Rovi. My challenge was to take the initial comps from the UX / UI team and turn them into something that was functional from an HTML email and marketing perspective. These comps had already received a lot of input from Best Buy, so I had to respect the initial intent behind the layouts.
Rovi decided to sell CinemaNow a few years after I joined. No longer a property of Best Buy, CinemaNow now had the freedom to reinvent itself. Part of this was a redesign to a more modern, responsive site by a third party technology company, Precision Development. Since marketing was kept in house, I became responsible for the designing and coding all email projects (newsletters, transactional, etc.) My challenge was to respect the design aesthetic, match the new standards of the site, plus code and Q/A.
The first step in this redesign was to examine the initial comps and open a dialog with Best Buy. After researching the project, two things became clear: 1) Best Buy was only interested in a web based email and 2) Best Buy wanted to call out as many titles as physically possible in the email. I started to redesign the project utilizing HTML email standards (which the UX / UI team hadn't been aware of) based off of these two directives.
A few of the corrections I made included restructuring the email to be web optimized (ie. 650px wide vs. 1500px), developing HTML content for when the images are disabled, and keeping in mind the functional HTML side of the project. A gradient may look great in your design - but it wreaks havoc between all the different e-mail platforms. There are a number of subtle tweaks and alterations that had to occur so that this design could pass Q/A. Lastly, I reviewed the newsletter from a marketing perspective. The resulting email had dramatically increased user interactivity owing to the redesigned navigation bar, social icons, text variants, and an alternate web version link.
The new design of CinemaNow was so drastic that the emails had to be completely overhauled in order to match. The main complication this created was the beautiful full screen nature of the redesign. While we have a number of powerful coding tools to accomplish this aesthetic for the website, our HTML emails are stuck in code almost two decades old. Initially, the request was to make a matching full screen email - but I knew it would only render on the most recent platforms. I utilized Google Analytics to discern who our customer base was and what email programs they were using. Management quickly agreed with my modified design (which constrained images, but utilized full screen background colors) in order to be accessible by the largest audience possible.
Since we now owned CinemaNow, I suggested we reduce the number of titles in the email. This decision dramatically helped conversion since people were no longer bombarded with so many options. It also held a positive side effect - it lead to an email that was much easier to turn responsive. Working hand in hand with design and code, the resulting email was aesthetically pleasing, well converting, and maintained brand standards.
Email communication is an integral part of a customer's user experience (and it often yields the highest ROI vs. other forms of marketing!) Since the UX design involved in phase one and two are so similar for this project, I'd like to take this opportunity to go through my UX design process for emails. Here are my top 5 UX checkpoints:
As basic as this sounds, I've encountered companies where their email marketing was so far from their website that customers would question whether or not they were the same entity! This raises red flags about security and brand trust, all of which hurt sales. With both CinemaNow email redesigns I made sure that the brand style guides were enforced.
Generally, someone who receives an email has already interacted with your website on one platform or another. Utilize this experience to build a level of trust with the user! By simply maintaining similar logo, navigation, colors, etc. the customer instantly develops rapport with your email. If you remember, one of the very first things I did in phase one of this redesign was to modify the preexisting comp in order to add in these elements. Often times if you examine your analytics, you will see that these elements are the highest clicked items in your email.
Since emails are one of your strongest marketing tools, it is critically important that you capture every possible piece of analytical data that you can. There are a lot of fancy systems out there (ie. Optimizely, Marketizator, Crazy Egg, etc.) - but even free systems, like UTM tags with Google Analytics, can provide you with the information you need to improve your marketing. I have accomplished this through my Newsletter Editor project. With some simple PHP code I was able to set up automatic UTM tags in order to track our email's performance.
This step isn't always feasible, but going the extra mile to accomplish it can seriously drive up your conversion rates. The CinemaNow platform didn't have an easy way to generate unique landing pages on the fly, so the next best alternative was to drive customers to Customized Category pages. Customers are expecting more and more from companies, and a seamless marketing experience is part of that expectation. If your emails simply drive customers to the homepage, there is little to no motivation for the customer to reengage with your product. If you create a landing page with highly relevant content that matches your email communication your customer is far more likely to convert.
There are all sorts of statistics out there supporting mobile design, so it is almost always part of email design. The phase one of the CinemaNow redesign happened in the era prior to this, so no mobile variant was created. When the second phase was requested, I was able to work on both desktop and mobile variants. With mobile design, it is important to remember a few key UI practices: streamline navigation, recognize minimum pixel sizes (ie. fonts: 13-14 pixels, headlines – 22 pixels, click space – 44 x 44 pixels), and make sure to condense your messaging (from subject lines to copy.)