LEEDuser
LEEDuser is a tool for companies developing sustainable design projects and seeking information about LEED credits. The LEED credits selector is one of the website’s main features, alongside the forum and related sections. The LEEDuser website was purposefully designed with a layout that maintains continuity with BuildingGreen, while still preserving its own identity through a distinct color palette.
Credits Selection
The credits selector was one of the essential tools on the homepage, as well as on other pages of the website. On the homepage, this widget was aligned to the left, taking up space without highlighting its importance. The first section of the page seemed more focused on emphasizing the introduction to the website. On mobile, the search bar was placed below the menu, taking the full width of the page.
The solution to these challenges was to maintain the promotional content at the top while reducing the vertical space used for the selector. The form within the selector was extended horizontally to full width in the desktop version, gaining more visibility when the page opened. The dark colors were replaced with brand colors to align the website with the branding style guides. On mobile, the form adapted vertically. On pages with more specific content, such as the LEED Credits page, the form was hidden, allowing users to choose to open the tool when needed. This solution was designed to save space and offer certain features as optional.
Forum
The forum in LEEDuser was very similar to the one in Peer Networks Hub, as one of the goals was to maintain a similar structure between the two websites. That said, while the LEEDuser forum had more basic features, there were other challenges related to its structure, such as the options for posting new questions. Clicking “Post a Question” opened a modal with a paywall. When logged in, the modal displayed two options. Option 1 consisted of the credit selector — after selecting all the parameters, a link appeared to move forward to the next step. Option 2 presented a list of links to the forums.
The challenge with this workflow was the use of a modal. The amount of content it contained went well beyond a simple message or button — it required completing several actions, such as selecting fields, which was difficult to do on mobile. While scrolling, it was easy to accidentally click on something else and lose the selection. In the new workflow, clicking “Post a Question” opened a full-screen page with both options available at once, allowing users to focus solely on the choices in front of them. The credits selector retained a structure similar to the one on the homepage, while lighter colors were used to give both options equal visual weight.
LEED Credits
The “LEED Credits” section presented a large amount of information at once. Accordions were displayed in vertical columns depending on the LEED version selected. Selecting a category opened a lengthy list of content within the column, requiring users to scroll far down the page.
In the new prototype, the page contained all the accordions together. When a category was selected, the information was arranged into two columns, allowing users to read more easily without scrolling as far down as before. A second challenge involved the mobile subpage: tabs were managed vertically, and opening one tab made it impossible to see the next one below it. On desktop, tabs were placed in the left column. A more effective approach to responsive design used the same structure for both mobile and desktop, with horizontal scrolling for tabs. As a result, tabs were now aligned at the same level without requiring users to scroll down the page, making it easier and more intuitive to move from one tab to the next.