BuildingGreen Website

Conducting a competitive analysis with the marketing department was a priority, both to understand how the website was positioned in the market and to identify the target users. Statistical analysis revealed that mobile and desktop usage were roughly evenly split, with target users most likely to be subscribers accessing the website from desktop computers at work, while relying on the mobile version when reading outside the workplace or away from their desks.

Collaborating with customer support was another key part of the research, helping surface areas where the workflow and existing features needed improvement. Internal meetings with teams from other departments were equally important to the research, design, and development of the website’s user interface gathering feedback from outside the design team offered valuable perspective and helped validate design decisions against real user and business needs.

The priorities that emerged from this process were clear: apply the brand identity consistently across all components and sections, reimagine the user workflow for a more intuitive experience, and adopt a mobile-first approach. On the interface design side, this meant rethinking the color palette, visual style, and iconography. Ultimately, the project’s goal was to refresh the interface with a new color scheme while maintaining a strong sense of continuity with the brand.

Some of the critical aspects of the interface:

User Profile

The User Profile is a section used for both the BuildingGreen and LEEDuser website. The colors used belong to both palettes, creating a common ground for the two websites which share some of the main brand identity colors. Some of the main issues with the previous user profile were:

Use of sidebar for navigation and subscriptions management. On the mobile version, the sidebar disappeared and a button “account options” was displayed to access the sidebar where the navigation was represented as a simple list.
Use of large tables such as the “Order History” were managed with a horizontal scroll for mobile. There was no differentiation for the header of tables and their alignment.
Visibility for call to actions such as “Edit”, “Delete”, “Set as Default”, furthermore, no clear distinction of the saved addresses and credit cards currently in use
Management of tabs on mobile for sections with a lot of content such as tables with multiple columns
Management of “Team Subscriptions” in the sidebar
“Team Member” was not evidenced in its section

Throughout the design process, responsive design was always considered one of the primary aspects. Taking the first design problem into consideration, different solutions were considered before moving on with a final design. The subscription management section, which was then used to also promote the forum, was moved to the top to enhance its visibility. On mobile, it was still displayed at the top, minimizing the space available. All navigation was available on the sidebar, while at smaller screen sizes, a burger menu managed the primary menu. “Manage My Account” was a secondary menu that allowed access to the same options as the sidebar on desktop.

Checkout

For the checkout phase, some of the crucial aspects were the “Continue to next step” button placed under the form, the use of space within the form, and the right sidebar used for a disclaimer and quotes. The new design was approached by considering the information users expected to see first and the workflow needed to complete checkout. Titles defined the section the user was currently in. The subscription price, total, and button to proceed to the next step were placed at the top of the sidebar. During checkout, users could also clearly see the price difference between monthly and annual plans in terms of savings. The disclaimer and quotes were displayed below the form, which was divided into two columns to maximize space. On smaller screens, the call to action remained visible at the bottom to prevent users from losing their place while scrolling through the form. The disclaimer and quote changed color to remain more visible while scrolling.

Article Template

Components that were redesigned:

Slideshow incorporating both text and images
Comments available only at the bottom of the page, as well as the “Send by Email” widget
“Sidebar” widget available in the artcile taking space in the page while reading
Correlated links to other topics
Modals for images
Paywalls with options for monthly and annual subscriptions
Citations dropdown
Videos

Each component of the article template was reconsidered. For instance, the slideshow previously opened as a modal with images and text overlapping vertically, and the arrows for the previous and next slide were only displayed on hover, making the component unusable on mobile. The new component was divided into two columns: text appeared on the left with a light background to improve readability, while a vertical image was displayed on the right. The arrows sat on a light background with enough contrast against the image to remain visible. Clicking the image still opened a modal with a description and credits underneath. On mobile, the same component was composed of the image followed by the text below it.

Homepage

On the homepage, some of the main issues were the messaging, the arrangement of recent content, and the use of space for the blocks. Looking closely at the “Recent Content” section, news items were displayed with background images, which often created readability issues. There was also no clear distinction between the month’s featured articles and the rest of the news, aside from a label. The redesign was approached by keeping the structure similar to ease the transition to the new website, so users could still navigate the homepage in a similar way. Only specific reports and feature articles were highlighted, while other news items carried a category label in a subtle color, making it easier to identify the most important items at first glance.

Checkbox Toggle Buttons to Filter Results

Sections such as “Recent” and “Continuing Education” used a sidebar with checkboxes to filter results, displayed in the right column. On mobile, these filters appeared at the top of the page, before any results. This made usability difficult, as it required scrolling up and down repeatedly to view results and adjust filters. In rethinking its usability, the focus shifted to where filters should be displayed and what should be prioritized in terms of visibility. Using checkbox toggle buttons helped preserve the same functionality and behavior for users, aligning options in a single row while also saving vertical space to surface the first results sooner.

Fixed Menu

“Sections with more content and specific subsections, such as “Consulting” and “Knowledge Base,” used anchor links to content further down the page. This sometimes made it easy for users to lose their place while scrolling down and back up. A fixed menu at the top helped keep navigation visible at all times. From this navigation bar, users could switch to another subsection or scroll back to the top of the page, all while remaining aware they were still on the BuildingGreen website.