WCG Coral Feedback and Mockup Discussion

As most of you know, 2 weeks ago today WCG transitioned to SBNation’s new comment system: Coral. As feelings have run a bit hot on the topic, it’s important to keep in mind that Coral is a work in progress, and that we here at WCG, and the Coral Dev Team appreciate your continued patience as work continues. With that in mind, soon after Coral went live, we (the WCG staff) asked you for your thoughts and constructive criticism on the new comment system. What you liked, what you disliked, and most important: what updates you needed to make Coral enjoyable to use. The plan being, that as a community, we could flesh them out and pass them along to the Coral Dev Team. That way we could try and help shape our community, rather than just howling at the moon. You can check out that thread here:

https://www.windycitygridiron.com/2020/8/11/21362996/wcg-coral-suggestion-thread-sbnation-new-comment-system

Since then, we’ve taken some of your suggestions, suggestions from the WCG staff, as well as suggestions gathered elsewhere, and mocked up a quick style example for where it seems the community wants/needs Coral to go. Keep in mind that I’m a graphic artist, not a web developer, so it’s just a basic html/css mock up with a bit of rudimentary javascript. There is no back-end, so you can’t actually post on it, but I did my best to make it otherwise FEEL functional. That said, it’s main purpose is as a visual aid to accompany feature suggestions. You can play around with it here:

http://no-hitwonder.com/uploads/coral/Coral.html

Now that you’ve had a look, let’s go over some of the aspects and features we’ve included in the mock up.

Post Structure and Layout:

The first thing you’ll notice is the inclusion of avatars! Not only does this make identifying members much easier, it also adds a splash of color and variation to what is currently a very monochromatic design. It also allows members to inject some of their personality into their posts, which is always a good thing. The next thing you’ll notice, is added vertical spacing. It gives all the elements added breathing room, and makes everything easier to read.

After that, you’ll see that the reply button is positioned on the bottom left, by it’s self. Since the entire point of this community is conversation, it makes sense for the Reply button to have much more prominent placement than it does currently. The Rec, Share, and Flag buttons are shifted to the right side, and simplified to icons for a cleaner look.

Post/Reply Box:

This remains largely unchanged in layout, as I feel it’s fine as-is. However, based on community suggestions, we’ve added a couple extra features to the post options at the bottom. First, while retaining the Giphy search, as it is somewhat convenient for generic gifs, the custom embedded image button is back (on the far right)! This is a sports community, and there’s many situations where posting a custom image/gif is beneficial to the conversation… or just fun.

Next, you’ll see the Table button (in the center), which would allow for either pasting of spreadsheet information, or building a table with a set number of rows and columns. A SUPER useful feature for a sports community. Also, upon request, I’ve added a comment box to the bottom of the page. This makes it easier for people to comment AFTER they’ve read through a thread.

Nested Replies:

To go along with the nesting (indenting), they’ve also been given a blue highlight so that conversations are easily identified. This, along with the bottom border on each post, give an easy point of reference for who this particular post is in reply to. Of course, there’s also the “in reply to” indicator, which has been moved to the right, on the same line as the Username and post time. This can drop down under the user name on resize, while maintaining proper spacing:

Highlighting:

Rec’d posts get the familiar orange highlight that we all know and love, while new posts (which should be kept track of, and listed), get the yellow highlight. Speaking of new posts, Z scrolling functionality needs to come back, for the sake of everyone’s sanity (it is semi-functional in the mock up, but you do have to hit “z” about 10 times to get it to move to the second unread post. Like I said, I’m a graphic artist, not a developer lol):

With the reintroduction of new post highlighting and Z scrolling, meaning people can easily find new posts without having them at the top, you can also go back to having the default sort be Oldest-Newest. This feels much more natural, as you are reading the earliest posts first, and the later posts (which are often influenced by what was said before) after.

View More of this Conversation:

Instead of taking you to an entirely new tab as Coral does currently, I propose a pop-out for hidden conversations instead. This would keep you on the same page, keep you from losing your spot, and is just a more elegant solution to hidden nesting. It would also tie into Z scrolling, as it could simply pop out conversations that have new posts as you Z scroll through the comments. Also, once you have expanded a conversation, it needs to be COMPLETELY expanded. No more hidden comments inside. The user has taken action to view the rest of this conversation, so let them see all of it.

That said, my preference is to AT LEAST have an opt-out option for hidden conversations. I believe that being able to view ALL of the conversations taking place without having to click around is crucial to getting people to engage. If you only see small snippets of a conversation, especially the most popular ones, you are less likely to see something that entices you to join in.

Edit: Escape button functionality for closing the pop-out added per request (thanks Doshi!). Keep the feedback coming!

Night Mode:

This was a feature that I haven’t seen suggested, but that I think would be a nice ease of use function to implement. You can play with it in the mock up by hitting the little sun/moon button next to the sort options at the top of the page. Not everybody needs/wants a feature like this, but there are more than a few people who would find reading the comments much easier on the eyes if a night mode option were added.

Of course, the highlighting I used (especially for new and rec’d posts) could use some work, but the basic idea is there.

Lastly, we have an option that I wasn’t exactly able to include in the mock up, since it’s not fully functional:

Live updating:

This is crucial to the conversation, especially the more lively debates, not to mention the game day threads. I know the Coral team has stated that they disabled this to keep it from distracting users and making them lose their place. However, a better solution, in my mind, is simply to focus on the current comment (the comment in the center of the screen), and keep it in the same place on the screen while new comments are added. That way, you don’t lose your place, aren’t distracted, and have the benefit of participating in a LIVE discussion.

That’s all we have for now. If you have any other suggestions, be sure to leave them in the comments. Also be sure to let us know if this mock up represents what you would like to see out of future Coral updates, or what you would like to see changed. Hopefully this can function as a style guide for where the WCG community would like Coral to go in the near future.

And as always, if you would like to submit your own suggestions to the Coral team, you can do so here:

coralsupport@voxmedia.com

Bear Down everyone!