Email Campaign Website
Treehouse UX Project

Overview

This is the third project of a series of UX projects from the Treehouse UX program. In this project, I designed a website called Wooshmail that allows users to create email marketing campaigns, browse through available email templates, and analyze the performance of their campaigns. I needed to design it in a way that was user-friendly and intuitive enough for beginners, but powerful enough for advanced users.


Role: Research, strategy, design

Team: Solo project

Length: May to June 2020

Tools: Adobe XD, Illustrator, After Effects

Introduction

Wooshmail is a mock email marketing campaign website that needed two user flows, “Admin” and “Basic” roles. The Admin role is for business owners and advanced users who manage the entire email marketing for their business, and make the final calls. Basic users have a more restricted set of features available to them, and need their work to be reviewed by Admin users. They are looking to create and improve the experience for both flows, as their audience consists of mostly small business owners and entrepreneurs.

The Problem

Most small business owners want an easy way to keep in contact with their customer base. The common issue is that the process can be clunky and confusing, as many tend to be older and are not very tech-savvy. The issue becomes more compounded as they try to use complicated editing tools, understand niche marketing phrases, or even try to navigate these sites.

One other issue is also that there are various existing competitor sites such as Mailchimp, Mailerlite, and Constant Contact - all of which have a similar set of features. This makes it difficult for prospective users to decide which service to use, since they all seem to be the same.

I sought to answer the question: How can we make a email campaign site straightforward enough for any small business owner to use?

Research

At first, I looked into understanding not only the issues that small business owners face, but also what the product itself is. I started by:

  1. Reading up on what the difference is between email campaigns and regular emailing, as I’ve never used an email campaign site before.
  2. Researching the competitors and comparing each of their features.
  3. Creating user personas and storyboards to further understand what the pain points were for each role and how to address them.

User Personas

Storyboards

Sketches

Approaching the iteration, I wanted to keep each page consistent with each other, aside from the template editing page, so that there is unifying theme. I ended up sketching out two ideas per page, and as I was sketching I kept in mind that this app should be intuitive for users within that age range.

I tried to find as many examples from competitors like Mailchimp, Constantcontact, and Mailerlite as I could, but this was a challenge because I’ve never used those apps, let alone have an account to see how it works for myself. I also designed the add recipients and send mail pages similar to a regular email client, so that it would feel more familiar for those who have not used an email marketing client before.

Wireframes

As I usually do when I transition from sketching to wireframing, I combined the best ideas from both sketches into the wireframes. Admittedly, due to my inexperience with these types of mail clients, I ran into a potential flaw in my design for the add recipients pages because I misunderstood the requirements. I ended up redesigning part of it by changing the preview mail section into an add recipient groups section so that I didn’t need to entirely redo the design, which I think worked out well.

I added details above the email template image in the send email page to serve as a confirmation page and help users make sure that all of their entered info looks correct before sending. I also made both Admin and Basic pages similar, to keep a level of consistency in the site despite the difference in available features between each role.

User Tests

I conducted user tests after selecting 10 users, and asked them to test out the wireframe version of the prototype. The group was split into two testing groups, one testing the Admin and the others testing the Basic user flows.

Admin

The Good

  • Template editor seems intuitive, and similar to existing tools like Photoshop which makes it easy for power users to navigate.
  • Add recipient page is similar to email clients that most people use, which makes it familiar and less of a learning curve to use.
  • Navigating through the site was easy due to clear instructions along the way, despite users not having experience with email marketing sites.
  • Users appreciated having the review page to preview the email before sending.
  • Analytics page presents lots of data in an easy-to-understand and digestible way.
  • Menus and navigation bars are helpful and consistent.

Areas to improve

  • The layout of the template editor could be made larger so that more focus is on the actual template being edited.
  • The elements on the add recipient page could be more consistent, for example the “edit” texts and buttons.
  • Navigation buttons overall are misleading at times, or take users to pages they don’t expect. For example clicking on the back button from the review page didn't really take the user back.
  • Review page could have a more visually appealing way to display the email information.
  • Analytics page could use a call-to-action or next steps, like downloading/sharing the report, modifying the campaign, etc.
  • Some menu items are unclear, not needed, or missing across pages.

Basic

The Good

  • Feedback checkmarks make sense and are appreciated.
  • Site has a lot of functionality even for basic access, so would be good for both beginners and experienced users.
  • Template editor seems easy to use, yet powerful enough so that users can have power to customize.
  • Icons are used well, and describe the tools in an intuitive way.
  • Add recipient page feels similar to standard email clients.

Areas to improve

  • Feedback section on the review page could be clarified - users were unsure whether this was automated feedback, or a live person entering it.
  • Analytics page could be more clear and describe the metrics that are shown. Additionally, there should ideally be actions to take based on the data.
  • Sizing of various texts, sidebars, and elements throughout the site can be more consistent and made more readable.
  • Transition between the template editor and add recipient page could be improved - feels like it skipped a couple steps.
  • At the review page, the back button is confusing because it leaves the user on the same page.

Design Principles

Colors

I went with a balance between mostly primary colors - red, blue, and yellow, with a hint of green within turquoise and creamy mint green. I featured the cool colors more to keep a sense of professionalism and used the other colors as accents. Red was used to create a sense of urgency when used in features such as the “new campaign” and “go back to campaigns” buttons, and in the graphs in the analytics page.

The template editor page is a dark cool theme to create contrast in comparison to the other pages, but also to make it easier on the eyes when users are editing their templates.

Shapes

I chose to go with rounded edges for elements on the page, such as buttons, dialogs, and images. I felt that this conveys softness and friendliness to the users, and reflecting how easy and straightforward it should be to use the site. I also handmade the icons in the campaign and template editor pages to communicate what each tool does without the user needing to read the text.

Final Mockups

Template gallery

Create a new campaign from a selection of pre-made templates, free to edit and customize to exactly the way you want.

Template editor

Picked out a template and want to make it yours? Use the template editor to drag and drop content, edit text, and customize it for your campaign.

Review and send email

Ensure your audience gets your message with recipient lists and scheduled sending. The review page helps you double-check that your email looks as you expect, and the sent page confirms that your message was sent.

Campaign analysis

Take a look at your campaign stats all in one page. Share the data with your team, print it out for later viewing, or edit your campaign to optimize your results.

Steps for basic users

Just starting out? Don’t worry. We have steps for basic users that walk them through how to Wooshmail.

Feedback before sending

As a basic user, it’s always good to get a second opinion before sending. Admins and collaborators can take a look at your email draft and directly share feedback with you.

Summary

Admittedly, this project was difficult for me to understand in the beginning, as I had never used a B2B email marketing website before. However, I was able to take advantage of this by looking at the problem from the perspective of users trying to use a site like this for the first time. I used this to try to confirm my understanding of the problem and design user flows that would work well for both new and experienced users. As a result, I feel like I have a better understanding of how to design for a B2B client, how campaign sites like these work, and how to design for two different types of users for the same site.

Future Improvements

Next time, I would definitely try to do better research on email marketing websites. I would even go as far as creating accounts on these sites and try them myself to get a better understanding of how they work. This would let me gain more confidence and confirmation in my designs. I would also make the differences between Admin and Basic sites more apparent, as both sites look very similar currently.

Regarding user testing, I would create more specific and targeted questions to ask my users as they test, so that I know where exactly to revisit or make changes to. With the mockup designs, I would take the time to try various color palettes to see what looks and fits best with the site, since I feel that there is quite a bit of white space on the template gallery page. And finally, if I had more time, I would create mockups for more pages to make the site look more cohesive and complete.

Back to Portfolio