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

Role:

UX designer

Team:

2 other designers

Duration:

6 weeks (2025)

Tools:

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'.

With a disjointed experience, you lose interest before learning anything and decide to give up.

You're confused by the navigation and inconsistent layouts, making your exploration tiring.

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.

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.

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.

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

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.

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.

Details really do add up.

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.

Streamlining the Green Buildings Website Experience

Streamlining the Green Buildings Website Experience

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.

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.

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:

Role:

Team:

Team:

UX designer

UX designer

2 other designers

2 other designers

Duration:

Duration:

Tools:

Tools:

6 weeks (2025)

6 weeks (2025)

Figma

Figma

Role:

UX designer

Team:

2 other designers

Duration:

6 weeks (2025)

Tools:

Figma

Overview

Overview

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:

A Visit with More Questions Than Answers

A Visit with More Questions Than Answers

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:

This is what happens instead:

This is what happens instead:

Getting to the Root Cause

Getting to the Root Cause

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.

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.

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:

Sitemap before:

Sitemap before:

Hard to navigate, with key pages buried under inconsistent sections.

Sitemap after:

Sitemap after:

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.

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.

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

Designing the Solution, One Step at a Time

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.

Breaking Down the Redesign

Breaking Down the Redesign

Breaking Down the Redesign