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
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.
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.
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.
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.
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.
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.
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:
. . .
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.
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.
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
