CC top banner - blue.png

Constant Contact v1

CC top banner - blue.png
 

Constant contact is a popular email marketing platform targeted towards empowering small businesses and non-profit organizations. Its goal is to create a valuable marketing tool offering various campaign features to help these organizations level the playing field against large corporations.

I teamed up with 3 UX designers for a group project to modernize Constant Contact’s UI design and improve the overall experience of the email campaign creation and management task flow.

TIMELINE

3 Weeks

ROLE

Research, personas, wireframing, UI, usability testing, prototyping

TOOLS

Whimsical, Sketch, InVision

 
 
Dashboard mockup - blue DOUBLE.png
 
 

PROBLEM

Users wanted the ability to efficiently promote and grow their business relationships.

SOLUTION

An email marketing tool that allowed users to create and manage marketing campaigns efficiently and intuitively would be vital in driving their success.

Having a beautifully designed platform would further elevate users’ overall experience.

 
CC logo.png
 

RESEARCH

 
 

The first step in the research process was to obtain an overall understand the email marketing industry through independent and user research. This was further supplemented by understanding Constant Contact’s business and branding goals. Various research methods were utilized to gather our data.

 
 

2. Contextual Inquiry

Specific tasks for contextual inquiry testing were designed based on survey and interview insights. We observed 10 users create and manage an email marketing campaign using Constant Contact’s platform while completing tasks with commonly utilized features. We asked users follow up questions about their experience and any observations we made during the process.

1. Online Surveys & In-Person Interviews

We surveyed 12 email marketers with varying degrees of experience and interviewed 4 additional email marketers to obtain an understanding of their demographics, preferences, feature usage, and overall email marketing process.

 
 

3. Heuristic Evaluation

My team and I also performed a heuristic evaluation of the platform to evaluate the usability of the platform at its current state.

4. Competitive Analysis

A feature comparison was performed for Constant Contact and its competitors, which included Mail Chimp, Sales Force, Hubspot to name a few.

 

. . .

 

SYNTHESIS & PERSONAS

All of the gathered user data was synthesized via affinity mapping to identify the overall problem through the largest pain points.

Our research data helped inform the user personas for the project. At a high level, they were:

1.     the experienced email marketer who works for a small corporation, and

2.     the beginner who is an entrepreneur running her own small business.

 
Persona.png
 
 

KEY RESEARCH INSIGHTS

We obtained general user insights for the platform as well as insights for each step of the creation and management process. User insights have been summarized into 4 overall points below.

 
 

Insight #1: 100% of users track campaign performance

Users prefer having quick access to analytics and wanted it to be displayed prominently to make campaign management easier.

The most important analytics for majority of users were the open and click-through rates for managing campaigns.

 
 
Screen Shot 2019-07-06 at 11.22.44 PM.png
 
 
 

Insight #2: Lack of direction

There was a lack of communication to users throughout Constant Contact’s platform. It was unclear to users what page of the site they were on, particularly on the Dashboard page, which is shown in the image below. There was also no progress indication throughout the new campaign creation process.

CONSTANT CONTACT DASHBOARD BEFORE REDESIGN

 
 
 
 
 

Insight #3: Inefficient & overwhelming

Simple tasks at various points in the process required an unnecessary amount of steps to complete. This inefficiency was amplified by the platform’s busyness and unorganized layout.

 
 
Select Template scroll GIF.gif
 
 
 

Insight #4: Overall negative user response to UI

Users described the platform’s UI as being outdated and clunky. The UI was inconsistent throughout the platform, further reducing the efficiency with which users navigated throughout the site.

 
 
compilation of CTA buttons.png
 
 
 

IDEATION, SKETCHING & WIREFRAMING

 
 

We explored how to address the various user pain points via sketches and quickly moved on to low-fidelity wireframes so we could test our solutions with users.

It was important for us to ensure our improvements did not stray too far from the existing branding and business goals of Constant Contact.

 
 
Compilation of Lo-Fi Wireframes.png
 
 
 

TEST, ITERATE & REPEAT

3 rounds of usability testing and iterations were made based on collected data before finalizing the prototype. For each round of testing, we used Usability Hub for A/B and First Click tests and further supplemented with contextual inquiries.

 
 

1. A/B Test

A/B tests were used for various elements of our re-design, including user preferences for the dashboard layout and progress bar style.

2. First Click Test

Part of our redesign included a change in the layout of templates and modifications of CTA buttons. We used a first click test to check whether our redesign was clear and intuitive to users.

 
 

3. Contextual Inquiry

Contextual inquiries were used to test singular tasks within the campaign management process and also the overall experience from start to finish. These inquiries provided us with various types of data to work with; including before and after comparison data for the time it took for users to complete specific tasks, unique observations, and ability to gain direct insight into user thought-processes.

 
 

— —

 
 

Iterations:

Progress Bar Iterations.png
 
 
CTA buttons interations.png

. . .

 

KEY REDESIGN FEATURES

 

1. Creation of a style guide & modernized UI assets

A key part in improving the overall UI included the creation of a style guide, which would allow Constant Contact to maintain consistency of their assets and fonts used across the platform. When there is a lack of standardization, users need to consciously think about each incremental decision they are making and this could lead to quicker fatigue as they navigate throughout the platform. From a branding perspective, this inconsistency also creates distrust between users and the brand. Implementing a style guide to promote consistency is crucial in improving users’ overall experience.

Icons were cleaned up and we made CTA buttons more consistent.

 
 
Icons - Before.jpg
Icons - After.jpg
 
 
 

2. Revamped Dashboard

A warm salutation and a Dashboard title were included to communicate to users that they were on the Dashboard page

An analytics graph was incorporated to ensure crucial campaign statistics were displayed prominently and visually for easier consumption.

The unnecessary two-click process of selecting a new campaign to create was reduced to one.

 
 
 

3.  Added progress bar

A progress bar was added to each step of the campaign creation pages, allowing users to gauge their progression through the creation process

 
 
 
 
 

4.  Organized template layout

Recently used templates were displayed prominently as experienced users indicated they used custom templates almost exclusively.

For beginners, the standard templates were organized into categories and the search bar made more prominent to allow for more efficient browsing.

 
 
 

5.   Improved email editing process

The number of steps required to replace and edit images was reduced from 10 clicks to 5, as this was a major point of inefficiency for users.

Email editing action blocks on the side toolbar were changed to ensure the drag and drop feature was more obvious.

 
 
Email build - before.png
Email build - after.png
 
 
 
 

KPI’s: THE IMPACT

 

25%

Reduction in number of clicks

 

73%

Reduction in time to complete user flow

 

83%

User satisfaction rating, up from 78%

 
 
 

FINAL PROTOTYPE

 
 
 

 

OTHER PROJECTS