My Role

UX Design

Techniques

User testing, wireframing, user persona, storyboarding, prototyping

Tools

Pen + Paper, Adobe XD

Platform

Web

Overview

I was tasked with designing the flows for two user roles with different levels of access for an email marketing campaign web called Whooshmail. In order to better understand the needs of both admin and basic user roles, a significant amount of time was spent researching, usertesting, and iterating on the interactive prototype below.

Problems

  • There is no way to customize templates on the campaign platform/website based on business category.
  • The steps to design, send, and schedule are clunky and confusing.
  • Higher competition from other email marketers so there is an increased pressure to offer the industry's best features.

How might we help our users easily navigate their workflow steps so they can accomplish their goal?

Research

Our Users

I created two personas for Admins and Basic user roles to identitify the goals, needs, and frustrations of our target audience.

Our Admins are busy small business owners in their 40s to 60s. They are passionate and skilled in their trade but are not marketing experts. They need an easy-to-use email marketing system to keep in touch with their customers/clients.

Our Basic users are employees of small businesses and they are in their 20s to 40s. 

Storyboarding

With their goals and expectations in mind, I began creating a storyboard for each user role. Visualizing how users will interact with our website made it easy to understand which features to prioritize. 

Admins:

Basic:

Competitor Analysis

  • Marketing automation
  • Template management
  • Subscriber management
  • Marketing automation
  • Mobile optimized emails
  • Free email marketing service plan
  • Email builders
  • Autoresponders
  • Tracking for analytics
  • Card mailing services
  • Facebook ads integration
  • E-commerce integration for Shopify stores
  • Surveys & polls
  • A/B Testing
  • Online donations

Opportunities:

  1.   Offer customizable templates for newsletters and email marketing     
  2.   A/B Testing and e-commerce integration                           
  3.   Offer several types of forms, including pop-ups
  4.   Ability to add Facebook and Twitter posts directly to your e-mail

Design

Sketching

I started with low-fidelity ink-on-paper wireframes and began to iterate my way to a higher-fidelity wireframes.

Admins:

Basic:

Usertesting

I then showed the medium-fidelity wireframes to participants to conduct usertesting. This was an important step to validate design decisions and to help identify problem areas.

Admins:

Previous
Next

Basic:

Previous
Next

Design

Through usertesting, I learned that users don’t have the time or effort to learn about the full potential of WhooshMail. Their biggest needs are feasible and immediate actions that can quickly improve their business.

1. Email Templates Gallery

I focused on accommodating a variety of pre-built structural components to address the needs of users across a wide variety of scenarios.

2. Edit Email Template

I took the menu bar out to keep the design lightweight and simple, only providing users with immediate information they need in a clear and concise manner.

3. Add Recipients

To encourage completion, I included a progress indicator to make the process feel more achievable by reducing uncertainty.

4. Send Email

I included a chat messenger feature for the back and forth conversation between the Admin and Basic user over review/changes. 

Admins Prototyping

View Prototype

Basic Prototyping

View Prototype

Future Steps

Next step is to delve deeper into enabling users to spend less time creating and more time managing their business. How might we allow users to easily customize and edit sections in our templates? After all, their goal isn’t to design a beautiful email but to improve their business. Focusing on this problem next would increase the usability of our website and will reduce the time to completion.

Learnings

I learned to not think solely about the visual design of the website but to think critically about the supposed purpose of the website for its target audience. In order to form a solution, I needed to stay curious to learn as much as I could about the user’s experiences and perspectives. Without user testing, I believe I would have ended up designing a website for myself instead of what my audience needed.