SOcial Media Tools: Compose


Social Media is one of HubSpot's core tool suites, used for top of the funnel content to lead conversion and delight. Before my joining the team and kicking off this project, these tools had not been updated for several years .



The Challenge

This project had many moving parts including modernizing the social tools to introduce new features and flows, removing technical debt as well as introducing a new style guide.  The main question I started with: was the popular trend of removing the ability to customize content per social network moving in the right direction for our users. Basically, is it more important to stress quantity or quality of social posts?


Modernize the social compose tools by adding new and expected functionality 

Streamline the process of social content creation across different networks

Introduce better content previews to mirror what will be posted on the external social networks

Decrease the time it takes to create social posts within HubSpot

Create an easy to use compose experience for our new and experienced users

Added Functionality

  • Facebook video and autoplay

  • Emojis 👏🏼 😍 💃🏻

  • Ability to tag Facebook users and business pages

  • Auto-validating and alerting users to social network specific requirements

  • Accurate content previews per network



Kicked off this new project with a meeting involving the Tech Lead, Product Manager and myself to go through technical concerns, big questions, and set an ideal timeline for alpha and beta launches.

After pinpointing the goals and main components of the project, I started with user interviews on general social media use. We introduced 3 composition flows with different functionality. 

Other methods of gathering information included mock and prototype testing, surveys, qualitative feedback (Tally and FullStory) and quantitive feedback (user tracking).


initial concepts


Key Takeaways

Using different types of feedback, I was able to drastically increase customer satisfaction and increase usage of the Beta tool. Some of these seemingly small yet key changes included adjusting the complexity and visibility of the error state and cutting back on extra clicks by adding autofocusing and adding autosaving to the Schedule dropdown. 

These edits were validated through small experimental changes to batches of user groups and monitoring FullStory.


Finalized Designs


Version 1: Surfaced errors inline and included an error that prevented posting messages without copy.

Version 2: To decrease vertical space and decrease the user's cognitive load, the warning icon symbolizes an error which shows more information on hover. Removed the 'no copy' error so that on publishing, the empty message will simply be skipped. 


After a successful Beta, this has been launched to all of our users, and we've sunset the older social compose tools.