Peer Networks
Peer Networks Hub is the forum section available as an add-on for BuildingGreen members. Multiple forums are accessible to users depending on their membership level. Users are Sustainable Leaders who engage with the platform to ask questions, find resources, and participate in events. The old structure was reconsidered to identify solutions that would advance the user workflow and usability. Blue had already been established in the brand guidelines as a secondary color, also used for Peer Networks.
New Workflow for Mobile
The header represented one of the main challenges. It included the main navigation for the forum, search for both the website and forum, networks, a second layer of navigation managed through tabs, the “Post a Message” call to action, and the forum’s title. The goal was to focus on the features most important to users while accounting for workflow and usability in responsive design.
On smaller screens, three key areas were identified as essential to users: posting a message, the search bar, and sorting options. These were converted into a navigation bar. Clicking the search bar opened a search field to query the archive, which users could then close. Similar to desktop, “Sort By” opened a dropdown menu to select either Most Replies or Most Recent. Just below this section, a promotional banner replaced the visual asset that appeared in the sidebar on desktop.
All navigation was consolidated into a “More Options” menu (a meatball menu), preserving the same hierarchy used on desktop. The “Start a New Topic” call to action was also available here. Functionality for the main website, meanwhile, was managed at the top of the page through a burger menu that included the main menu, search, and login/logout, depending on the user’s login status. The section name appeared directly below the name of the website’s main section. When scrolling down the page, the section name and the “More Options” menu became fixed elements the user could access at any time.
The Navigation
Looking at desktop navigation as well, one notable issue was that all forums and sections were displayed at the same level, with no clear differentiation. For users who belonged to multiple networks, all their forums appeared alongside navigation items such as “Webinars,” “Calendar,” and “Resources,” creating confusion in terms of hierarchy. Additionally, forum names made up of multiple words often took up more space than was available, causing them to overflow onto a second row.
One solution was to use the existing left sidebar to incorporate navigation, now organized into categories. As a result, under “Forums” in the sidebar, users could find the forums available to them based on their membership. Items highlighted in blue indicated the current section in use, and all sections were listed according to their hierarchy. The “Start a New Topic” call to action and the search bar remained in the sidebar, which also hosted promotional digital assets.
The second level of navigation, composed of “Forum” and “Shared Files” for the forum section continued to use tabs, similar to the “Resources” section. These tabs, located at the top of the section, were context-based, meaning their names and content changed depending on the section selected. They supported the main navigation effectively and remained easy to manage even on mobile. Some sections did not use this second level of navigation, meaning those pages had no tabs.”
Sort By and Tables
Another area for improvement was the main section of the forum, composed of a table with “Topic,” “Replies,” and “Recent” columns. When opening the forum, the most recent posts were displayed under “Topic.” Clicking “Replies” sorted the list by the most popular posts, while clicking “Recent” sorted them again by the most recent. On mobile, the two sorting columns disappeared entirely, leaving users with no options.
The solution was to remove the table and display posts as consecutive items within the main section instead. A dropdown aligned at the top right now handled sorting, offering Most Recent or Most Replies as options. This same solution was adapted for mobile by keeping the dropdown in place, allowing users to make sorting decisions independently of the device they were using.
Multiple Filters and Other Sections
Sections with multiple simultaneous filters, such as “Members List,” were particularly difficult to use on mobile screens. Filters for network and region were both managed through lists of radio buttons, which took up significant screen space and made the section awkward to use.
The approach adopted was to replace the radio buttons with the checkbox toggle buttons already used throughout the website. All options were then aligned in a row, taking up less space. On mobile, this section also introduced “Filter By” and “Sort By” options, with a dropdown appearing when users clicked “Filter By,” allowing them to open this optional menu only when needed.
More previews of other sections are included in the video below.