Streamlining the Green Buildings Website Experience
GreenU, the University of Miami’s sustainability office, tasked our team with redesigning the Green Building section of their website which is one of the office’s eleven key sustainability initiatives.
Role:
Team:
UX designer
2 other designers
Duration:
Tools:
6 weeks (2025)
Figma
Overview
The What:
Green Buildings is a section under the University of Miami’s Sustainability website. It highlights LEED-certified campus buildings, featuring a virtual tour, sustainability dashboards, design policies, and key green features.
The Why:
With the university’s Sustainable Operations Plan 2035 underway, more buildings are being added. Despite currently showcasing only five buildings (soon to be six), the section already suffers from poor structure, inconsistency, and limited scalability.
The How:
To address these issues, we conducted a comprehensive UX audit across desktop and mobile, identifying key pain points in navigation and content structure. We analyzed best practices from peer institutions like Harvard and MIT to inform our approach. The redesign introduced a clean, mobile-friendly layout, improved content hierarchy, and an interactive virtual tour of Centennial Village. I also developed a UI kit to ensure visual consistency and scalability as more buildings are added.
A Visit with More Questions Than Answers
Imagine you’re a prospective student passionate about sustainability and exploring schools that align with your values. You visit the University of Miami’s website, expecting to learn how sustainability shows up on campus.
This is what happens instead:
While navigating the University of Miami's site, you're interested in discovering the 'Green Buildings'.
You're confused by the navigation and inconsistent layouts, making your exploration tiring.
With a disjointed experience, you lose interest before learning anything and decide to give up.
For a student looking for signs of commitment to sustainability, this lack of consistency sends the wrong message. And with more buildings about to be added, the problem is not just what exists now. Each new update risks adding to the confusion. Before the site could grow, its foundation needed to be fixed.
Getting to the Root Cause
To fix the problem, we knew we couldn’t just patch up a few pages; we had to step back and look at the entire site. We ran a full audit of the Green Buildings section, and the issues quickly revealed themselves.
Inconsistent Layout & Visual Hierarchy
Low Content Scannability
Missing Page Structure Elements
Unfriendly Expandables
Unintuitive Navigation
Disjointed User Flow
All of these issues added up to one thing; a broken user journey. That's why I decided to redesign the sitemap keeping in mind the pain points and the need for future growth.
Sitemap before:
Hard to navigate, with key pages buried under inconsistent sections.
Sitemap after:
In the new architecture, everything begins with the Green Buildings section under Initiatives. From there, users can easily branch off into three core areas:
LEED Buildings, now organized by certification level—Platinum, Gold, and Silver
LEED Building Policy, for understanding the standards behind the structures
Building Dashboard, for live performance and sustainability metrics
This layout not only makes it easier for prospective students to explore the university’s sustainability commitment, but it also sets a scalable framework that can grow with future additions.
Designing the Solution, One Step at a Time
With a clearer sitemap in place, the next step was to bring that structure to life on the page. As the UX lead, I began sketching layout concepts that would reflect the new information hierarchy while addressing usability pain points. I started with quick layouts in sketch.
I then refined them into mid-fidelity wireframes. During this stage, I also rewrote and reorganized much of the site’s existing text; clarifying labels, simplifying language, and ensuring content aligned with user needs. Every layout decision, from spacing to typography, was made with user clarity in mind. The goal was to create a foundation that not only looked clean, but helped users find what they needed faster and with less effort.
Breaking Down the Redesign
Easy Navigation
I proposed reducing the navigation from five categories to three to cut down on confusion and repeated content. With a single horizontal menu, users can now easily switch between sections without cognitive overload. This streamlined structure made the experience more intuitive and future-proof.
Smarter Content Structure
Content is now organized by certification type, making it easier for users to understand how buildings are categorized. Instead of using expandable toggles, users can click directly on building images to explore more; creating a more intuitive and visually engaging experience.
A New Feature to Encourage Discovery
Content is now organized by certification type, making it easier for users to understand how buildings are categorized. Instead of using expandable toggles, users can click directly on building images to explore more—creating a more intuitive and visually engaging experience.
How it All Comes Together
What This Project Taught Me
This project challenged me to think beyond the screen. Collaborating with another designer meant bouncing ideas, challenging assumptions, and refining every decision together. It wasn’t just about making something look better—it was about building something smarter, more intuitive, and truly usable.
Shared vision, stronger outcome.
Collaborating taught me the value of clear communication and open-mindedness. Different perspectives led to smarter choices, all while staying focused on what the user truly needed.
Building for the long term.
Planning for future updates made me realize that fixing what's broken isn’t enough; a design has to hold up as new content keeps coming. It was a reminder that good design isn’t static. It grows, adapts, and stays clear even when more layers are added over time.
Details really do add up.
Whether it was making sure labels matched across pages or keeping consistent spacing and hierarchy, those subtle details shaped how easy or confusing the experience felt. It's easy to overlook them when you're focused on the bigger picture, but in UX, those little decisions stack up fast.