top of page

Constant Contact

Social Listening

USER EXPERIENCE     INTERACTION DESIGN   •   PRODUCT STRATEGY

OBDKVJ1 1.png

User Impact

Idelisa Baez (Designer)

8 Weeks

Business Impact

  • Ideation and Wireframing

  • Information Architecture

  • Generating High Fidelity Mockups

  • User Research

PROJECT TYPE

Internship Project

109747-cute-monster-1-unscreen.gif

TEAM

  • Primary Designer (me!)

  • Template Designer

  • UX Researcher

  • Content Designer

  • Several engineers and product manager

DURATION

8 Weeks

MY ROLE

  • Ideation and Wireframing

  • Information Architecture

  • Generating High Fidelity Mockups

  • User Research

  • Working with technical and resource constraints

PROJECT TYPE

Summer Internship

Project Introduction

Constant Contact recently acquired Sharpspring, a marketing company for large corporations.  This project aimed at reviving an outdated, a social media management feature, to cater to Constant Contact's small business owners. We wondered:

How might we incorporate all social media platforms and respective interactions into a single consolidated dashboard that would make social media management easier for Constant Contact's users?

ESTIMATED IMPACT

30%+

Premium Subscribers

600,000+

Users benefitted

60%+

Rise in use of social features

01

Discover Phase

EXPLORATORY RESEARCH & AUDIT OF EXISTING DESIGN

Initially we analysed user feedback on the existing Sharpspring product and these negative experiences and opportunities were revealed:

Frame 787.png

Unlimited number of tabs

✕ Change the flow of feed addition and modification

Improve reactions and provide post statistics

↑ Provide context to comments

✔︎ Create platform specific controls

Rectangle 2779.png

Exploring success in top 6 compeditors

ezgif.com-video-to-gif-11.gif

DIRECT & INDIRECT COMPETITOR RESEARCH

A competitor analysis of 6 leading social media marketing services revealed incredibly helpful insights:

ezgif.com-video-to-gif-11.gif
6/6

Made adding and modifying feeds very easy

6/6

Designed interactions to replicate the respective social media interactions

5/6

Separated user activity from social listening 

02

Define

KEY DESIGN DECISIONS 

IDENTIFYING THE NEED FOR 2 SEPARATE DASHBOARDS

Activity Tab
Search Tab

Manage posts, interact and respond to followers' comments and messages

Posts
Inbox

User's own posts on a specific platform

Respond to direct messages on a specific platform

Stay updated on trending news & activities of competitors/collaborators

SEPARATING TYPES OF FEED ON EACH

Notifications

Important updates like follows, comments, likes and interactions with them

Trending
Search

A general feed of trending hastags and news across all social platforms.

For user interaction irrespective of any accounts connected, to promote feature discovery

A search feed allowing search of a single word/name across all platforms

PROJECT SCOPING AND IDEATION OF INFORMATION ARCHITECHTURE

I also mapped out the user flow and where the feature would fit in within the existing experience. This helped determine all user touch points that needed design work or recommendations.

We then discussed this flow as a team to make sure we were all aligned on the project scope.

to export.png

SKETCHING OUT THE MACRO AND MICRO INTERACTIONS

Untitled_Artwork 66.png
Untitled_Artwork 67.png
Untitled_Artwork 69.png
Untitled_Artwork 70.png
Untitled_Artwork 71.png

I started trying to visualise the layout of the two dashboards and the essential elements within each. I also sketched out some micro interactions in these frames to discuss with the team.

This was followed with wireframe generation and the first round of usability testing before we moved to designing high fidelity prototypes.

03

Design - High Fidelity

Activity Dashboard

Manage all your social media accounts here.

Access messages, notifications, mentions and interact with posts you've made on your profile.

Frame 2796.png
activity.png

Main account feeds for each social media

Check interactions and statistics on your own posts and respond to comments

Manage your inbox

Add a feed of any social media to check for direct messages and respond within feed columns

MESSAGES.png
ezgif.com-video-to-gif.gif

Check follower interactions under notifications

Find new followers, replies, likes etc. all under notifications and interact with each within the feed column itself

NOTIF.png
ezgif.com-video-to-gif-2.gif
Rectangle 2779.png
ezgif.com-video-to-gif-7.gif
ezgif.com-video-to-gif-8.gif

Add new feed (above) and change existing feed (right)

Add a feed from any of the available platforms from an accounts you are logged into and choose any of the available feed types!

Search Dashboard

Manage all your social media accounts here.

Access messages, notifications, mentions and interact with posts you've made on your profile.

ezgif.com-video-to-gif-3.gif

Stay updated on trending news across all social media

Available to users without any connected social media account to encourage feature exploration.

Filter out social media trending posts based on interest.

Empty State.png
ezgif.com-video-to-gif-4.gif

Add a new feed

Look up any username, hashtag or keyword to stay on top of competitor activity, news regarding your business niche or potential collaborators. This space is your playground!

ezgif.com-video-to-gif-5.gif
ezgif.com-video-to-gif-6.gif

Modify feeds easily

Modify a feed by changing the social media platform, search word or account you're logged into with one click from the top of any feed!

04

User Testing

FRAMING QUESTIONS FOR THE THIRD ROUND OF USER TESTING

each.png

1. Test popularity of a general trending field in empty state

2. Test addition and modification of feeds 

3. Test searching hastag from the feed name

4. Poll for most convenient way to change feed from 3 existing pathways

Search Dashboard Test

each.png

1. Test sufficiency of notification and message fields 

2. Test addition and modification of feeds

3. Discuss expectation of analytics numbers

4. Poll the top 4 important feeds to decide empty state 

Activity Dashboard Test

general.png

1. Is the difference between the Search and Activity feeds clear? Does it feel correctly located?

2. Test overflow behaviour of the dashboards (horizontal and vertical scroll affordances

General Questions

05

Next Steps

User Centric

Business Centric

1. Uncovering painpoints of Constant Contact's own users

2. Optimising the webpage for mobile and mobile web

3. Building out affordances and micro-interactions with engineering 

1. Deciding on the premium and free features

2. Planning out versions and releases based on engineering timeline

bottom of page