New Features in WoltLab Suite 6.1: Comparison of Post Versions

One of the important components of any forum is the members list. It is not only a directory of users, but also an important tool for management and interaction within the community. In this article, we look at the process of redesigning the members list and show how thoughtful design decisions can improve the user experience.
The forum’s original members list was functional, but outdated. It essentially consisted of a series of statistics and was therefore visually unappealing. The interaction options were cumbersome to use, especially on mobile devices.
The main goal of the redesign was not only to make the members list more visually appealing, but also to improve its functionality. Special emphasis was placed on two points in particular:
For an appealing look, the new members list uses the familiar “card” layout. In addition to the user's avatar, the cover photo is now also displayed in the members list, which leads to better recognition.
The buttons for interacting with a user, for example for following or blocking, are now directly available and easier to use, especially in the mobile view.
Statistics, such as the number of posts by a user, are now displayed in the form of tiles. This provides a clearer overview and makes it easier to compare the values of different users.
At the same time, we have also carried out some clean-up work on the members list and, in particular, removed text content of variable length from the display, resulting in a much more homogeneous appearance.
Last but not least, we also placed great emphasis on expandability, which is why we created corresponding placeholders in the template for developers to display additional content such as buttons or statistics in the new card layout.
The user popover has also been redesigned and now uses the same display as the display in the member list, resulting in a uniform operating concept.
From a technical point of view, the user popover and the card display in the member list share the same template. This ensures that individual customizations, for example through plugins, are automatically applied in both places alike.