Livefyre: Compose Comment

,

Problems

  1. The Compose Comment box is always persistent and takes up a lot of visual real estate, pushing the live comments further below the content it’s associated with.
  2. Commenters could not compose comments with any formatting (bold, italic, bullet points, etc.)
  3. Commenters could not attach media files to a comment.
  4. It was not obvious to commenters how to tag friends in their comments and there was no button to use if you didn’t already know to type “@”

Goals

  1. To implement an inactive state for the compose comment box that takes up less space and is unobtrusive.
  2. To implement a WYSIWYG editor so that commenters can format their comments as they compose them.
  3. To implement functionality that would allow users to attach media files to their comment.
  4. To add a button and UI for friend-tagging that makes the feature more easily accessible to users.

My Role

Lead Designer, Front-End Implementation

Assumptions

  1. By implementing an inactive state for the compose comment box, users who are more interested in reading live comments will be able to access them without obstruction.
  2. By implementing a WYSIWYG interface, commenters will be able to format their comments, which makes comments more legible.
  3. By implementing media attachments, users will be able to include a photo or video in their comment rather than just a link to one.
  4. By implementing a friend-tagging button, users can more easily access this feature and will tag their friends in comments more often.

Original Design

Initial Wireframe

Added buttons for WYSIWYG, Media Attachments, and Friend-Tagging to a new UI bar at the top of the Compose Comment box.

Feedback

Exposing all the WYSIWYG options in a toolbar is very heavy-looking and takes up additional screen real estate. We decided to put these options in a drop-down menu to save space, see final solutions below.

Final Solutions & Design

Created a Collapsed State for the Compose Comment box so that it is less obtrusive.

Created a self-contained Compose Comment box with all additional functionality accessible via drop-down menus, accessed by clicking on the initial collapsed state (pictured above).

Implemented WYSIWYG formatting options in a drop-down menu.

Implemented a drop-down menu for Friend-Tagging.

Implemented Media Attachments via Links in a drop-down menu.