Constant Contact
Social Listening
USER EXPERIENCE • INTERACTION DESIGN • PRODUCT STRATEGY
User Impact
Idelisa Baez (Designer)
8 Weeks
Business Impact
-
Ideation and Wireframing
-
Information Architecture
-
Generating High Fidelity Mockups
-
User Research
PROJECT TYPE
Internship Project
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?
-
To be able to keep an eye on current trends and competitor activity across all social media channels
-
Increase use of social posting feature and promote premium features
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:
✕ 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
Exploring success in top 6 compeditors
DIRECT & INDIRECT COMPETITOR RESEARCH
A competitor analysis of 6 leading social media marketing services revealed incredibly helpful insights:
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.
SKETCHING OUT THE MACRO AND MICRO INTERACTIONS
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.
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
Check follower interactions under notifications
Find new followers, replies, likes etc. all under notifications and interact with each within the feed column itself
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.
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.
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!
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
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
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
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