Forum UX Upd

[dmtrjsg]

Context

Forum during MVP dev phase was built around splitting the overall experience to tabulated pages and an overview landing page. The info architecture proved to be suboptimal and caused a number of change requests from the community members and JSG operations team.

Namely:

• [USERSNAP] Forum: No distinct visual marker for different actions on "forum activities" #2429
• [USERSNAP] Forum: Category + subcategory appearance needs improvement #2426
• [USERSNAP] Drop forum overview #2951
• [USERSNAP] Reorg forum tab structure #2952
• [USERSNAP] Forum: Viewing a thread there are no post numbers alongside posts #2437
• [USERSNAP] Forum: breadcrumb for threads is in incorrect position (IMHO) #2428
• [USERSNAP] Forum: Moderated post does not have any indication it was moderated, it disappears #2438
• [USERSNAP] Forum post readability #2734
• [USERSNAP] Forum: Make title stays visible #2785

This ticket is aimed on surfacing all underlying use cases and optimising the forum UX experience for New users and Experienced users, including Forum WG Lead.

Design

Link to Figma

Scope

No qa required:

• Thread Card #3183
• Category Card #3184
• Forum UX Upd: duplicated component #3651
• Moderated posts #3165

To-test:

• Forum: Landing Page - Main Tab - Latest Threads #3151
• Forum - My threads Tab #3152
• Forum Category Page #3153
• Forum Thread Page #3154
• Forum Landing Page - Main Tab - categories #3157
• Forum Activity Drawer #3155
• Forum: Watchlist Threads #3162
• Forum: Tx progress on post/ thread updating  #3224
• Caching and Polling: Forum module #3352
• Forum:Clicking Replied post which is located on the Same Page loads Pioneer again #2440
• Forum: Reply to thread in a modal #3163

Out of scope ⛔ :

• Title stays sticky #3187

┆Issue is synchronized with this Asana task by Unito

[MattAugustynowicz]

Based on tests with several users, familiarization with the activities of other services having forums, our discussions, and knowledge, we come up with a proposal of forum solutions. 

Let's start with what the user sees at the very beginning.

The main page of the forum

👉 Figma link here

People using the forum have indicated that recent posts are one of the most interesting information, so I propose that we put this at the top in the form of tiles on the carousel. Each will contain the time of publication, the author, the category in which it was added, the headline, part of the description, and a counter with replies. 

Underneath, we will show categories as the central "hub" for moving around the forum - next to recent publications, it is the next most searched section. I suggest we drop the showing of the last thread and the popular thread inside the category tile. It wasn't the most visible and didn't work very well, and by splitting the categories into two columns, we wouldn't be using a massive amount of space as we currently do. Users were utterly unable to see the subcategory links, so it would be good to show them in a different, more visible form. I suggested that they could appear after hovering over a given category as pills, which would replace the current category description.

Additional information shown here is the number of topics in a given category. I proposed to use only the icon and the number next to it.

The last thing we have on the list is "my threads & watchlist." Of course, I remember the remarks that we want to put this information into "my profile," but before we jump in there, I suggest for "safety," we leave it at the end of the list in the same form so that we don't spend a lot of time developing it. This module is functionality that some users use, so they will intuitively look for it on the forum. When "my profile" is ready, we can simply hide the module and add a small note where the information is now. 

The search has been moved directly under the header to keep it consistent with other pages on the platform.

The final change is to display "forum activities" as a cta at the top right of the screen. Forum activities function is an essential point for moderators, so they can quickly see recent posts and replies that have occurred. However, it is not very important for the rest of the users, so it would be good to show this as an additional side drawer. 




Category page

👉 Figma link here

We also move the search box right under the header. Additionally, I suggest that we show the most popular threads that have appeared within it on this page at the top. Below that, we could show the subcategories, which change similarly to the previous page into a two-column layout. Below that, we see our threads - unchanged.

Thread page




As for the direct entry subpage, improving its readability is described in detail here 👉 #2734



👉 Figma link here




While introducing sticky headers is described here 👉 #2785



👉 Figma link here

Moderated post




👉 Figma link here





The last change is showing comments which have been moderated. At the moment, the replies in the thread are simply hidden. In my opinion, we should show this post in some info-alert frame, with information that the post has been moderated, information about who moderated that, and the reasoning behind it. I would, of course, leave the option to see the original post. By default, the original post could be hidden. When expanded, you can see the entire reply, including the possibility to collapse.





💸 Awesome people to whom we should give $30 for helping with the tests (discord handles):

• secret_girl
• adovrn

[traumschule]

Just a little feedback, might be alone with this.

I propose that we put this at the top in the form of tiles on the carousel.

• The carousel slows navigation due to loading delay after every click. Load all ahead if you can.
• Three columns are too busy and not useful in case of YOUR WATCHLIST You don't have any watchlis - just hide.
• FORUM ACTIVITIES takes too much space for old info - limit to three days and hide rest, unless user clicks see all. Could be expandable right sidebar that collapses after some seconds / per default.