Upon starting my contract working as a UX Program Coordinator at VMware (now Broadcom), my team informed me that their UX newsletter which acted as the biweekly UX studies email newsletter campaign, formally known as “VMware Design Newsletter,” was experiencing an increase in opt-out (unsubscribe) and a decrease in study sign-ups of nearly 70% and also negatively impacting the business rationale of the UX projects.
Despite trying to increase the variety of monthly UX studies and even increasing incentives, the team conceded that “our users were just not interested anymore.”
Not succumbing to that notion, I took the initiative to investigate and improve the UX newsletter and revitalize engagement within our participants.
Solution
The project final redesign was able to increase open rates and participation sign-up rates by 80%, while also reducing the time Admins spent on editing newsletters by 50% and increased overall newsletter sentiment.
View Final Solution
PROBLEM QUESTION
The Challenge
01 | RESEARCH/INTERVIEWS
Understanding the Admin pain-points and User's perspective
For the research phase, it was appropriate to employ user Interviews to better understand and gauge how they perceive our newsletter and overall consensus with marketing emails. I conducted an interview with both our team members and users.
Method:
Attitudinal Research (p= 4 Users) 1:1 interviews to gauge user sentiment and gain feedback.
Behavioral Research (p = 3 Admins) Usability Testing to better understand process in creating newsletter.
Interview with Admins
Interview with Users
Insight 1
With no company logo or branding, the email screams Spam. It doesn’t look like it’s coming from a legitimate source.
Insight 2
The newsletter CTAs code isn't adaptive. The code isn't optimized to reflect the user's email client selected preference of dark or light theme.
Insight 3
02 | INSIGHTS & SCOPING
Drawing conclusions & honing on key issues
1) Admin Setup & Resolve Admin Issues
Ensuring streamlining the process for Admins to edit new content was swift and effortless. It would be cost-effective to reduce friction for the admins using qualtrics before searching for alternative solutions. This means:
a) Examine the current HTML/CSS. From then on, develop a system for admins to just copy the code to keep the design and content will look the same every time going forwards.
b) Plug and Play! Changing and selecting the appropriate preferences within the system settings. Admins won’t have to tinker around if something is broken.
5) Abolishing any remnants of a spam/phishing email
a) Avoid using unusual contact information, no-reply email addresses, un-identifiable links or shortened links, inconsistent and/or layout, and using deceptive words or subject lines.
b) Clearly communicate the option to Opt-Out. This is a best practice for maintaining a positive sender reputation.
c) Avoid using “no-reply” or free email address. Use a professional email address associated with our domain. That means: authenticate the email’s domain by using Sender Policy Framework (SPF) and DomainKeys identified Mail (DKIM) within our qualtrics account.
2) Branding Consistency
Incorporating branding and trustworthiness of the newsletter by including the company's branding guidelines, colors, logo and clear indications of legitimacy. This will alleviate any concerns of spam and ultimately help garner more click-throughs.
3) Responsive Design
Implementing responsive design to ensure the newsletter renders well across different devices, screen sizes and email platforms (Gmail, Outlook, Yahoo, iOS mail & etc.)
4) Create a theme and structure
a) Incorporate a layout theme by adding content variety (combination of text, images, bullet points) to make the newsletter look more polished. Keeping in mind not to add too much clutter that may lead to confusion.
b) Keep the wording concise and focuses. Avoid adding too much information that would overwhelm recipients.
03 | IDEATE, RAPID PROTOTYPING & CRITIQUE
Exploring possible design elements
Interviewing both Admins and Users helped me hypothesize that the original design had a good foundation but lacked a modern and professional feel, and the code needed investigation.
Before jumping into my next call, I did a rapid prototype of 4 different versions with different content arrangements.
I set up an impromptu call with several people in our team to brainstorm on Miro. We discussed thoughts and concerns while we picked and chose ideal design elements and further brainstormed new concept implementation if time allowed. This concept critique helped in the next stage of the redesign.
Note: Drag the slider below to reveal concept brainstorming session and how it guided my design decisions.
04 | FURTHER EXPLORATION
Refactoring HTML/CSS Code
After interviewing the Admins and discovering that they kept facing customization issues within the Qualtrics email distribution center, I decided to further explore the issue.
I learned that the main culprit to why Admins consistently faced formatting issues was because of the Qualtrics by default would churn out Spaghetti Code - "a pejorative phrase for unstructured and difficult-to-maintain source code."
With a bit of HTML/CSS and JS background knowledge, I decided to get busy.
Before
No one in our team knew how to code besides me, which to no surprise explained the 1267 lines of code.
After
Instead of making the changes to the old code, I had to rewrite and refactor it dropping it to 329 lines of code.
How did this benefit the Admins and the business for that matter?
Plug and play! I created a Facade for the code, whereby anyone within our team could simply enter the necessary text/content for the newsletter between the <h2>, <p>, <li>, and links within the <button class…href='https:…'> tags.
Admins/team members can expect to edit the code 50% - 75% faster. Just simply copy, paste and publish. This will save time to shift focus to helping researchers iterate and work faster. Additionally, the code will always stay the same as it is saved as a template.
05 | PRODUCT
Final Design
Introducing a modern, adaptable and responsive newsletter. Modern in the sense that it's up to date with the current email newsletter look & feel; design that is adaptable to user's device theme preferences; and lastly responsive to user's devices allowing them to see all the important information at first glance.
Note: Drag the slider below to reveal before and after
06 | CONSEQUENCE
Solution Outcome
At the end of the day, did we solve the business problem?
The final design proved to be a success. Here is a summary of the paramount issues that I accomplished were:
Creating cleaner code ensures streamlining the process for Admins to edit new content to be swift and effortless. Additionally, negating any future friction for admins editing in qualtrics before searching for alternative solutions.
The Qualtrics data showed a sudden increase in email open-rates suggesting the redesign garnered positive user sentiment.
Whether checking your email on phone, tablet, computer, or have dark or light mode enabled on your device, users will be greeted with a sleeker and professional newsletter that automatically adjusts the content to their device's settings and layout removing the hassle of pinch, zooming or adjusting settings.
