Interactive web Walkthrough

Designing an interactive walkthrough of LEED buildings for the University of Miami Office of Sustainability.

COMPANY

Univeristy
of Miami

ROLE

Interface Designer

EXPERTISE

UI Design

DURATION

January 2023 - July 2023

Project description

The objective of this project was to craft an immersive and informative virtual tour of the Student Service Building at the Univeristy of Miami. This had to be done while using UMiami's already-established LEED building walkthroughs as my guidelines. By leveraging these templates, I aimed to create an engaging user experience that educated visitors about the sustainable features and benefits of those structures.

Timeline

From explorations to final designs in 6 months while working with multiple projects at the same time. The University of Miami took pauses to recollect feedback.

Role Specifics

Sketching/Wireframing
Prototyping with Adobe XD
Revising the product
Communicating with the photographer for the walkthrough photos

My Design Proccess: Human-Centered Design

This category details the step-by-step approach used. I used the Human-Centered Design (HCD) process in this project.

Inspiration

The inspiration phase involved empathetic research to comprehend user needs, behaviors, and motivations. The University of Miami provided me with research insights, previous content, and goals to achieve by the end of this project.

Ideation

Ideation saw the generation of diverse ideas for the walkthrough, including wireframe sketches, low fidelity, and high fidelity concepts that were consistently reviewed by the University of Miami as I explored my options

Implementation

After defining my target audience and creating a working proof of concept, the final phase is where I introduced our solution to the marketplace, while still in a constant feedback loop.

Immersion Exploration

By immersing guests in the experience, they are granted a greater understanding of the architectural and sustainable elements, as the design aims to transport users there in person.

Educational Experience

Providing detailed information about the sustainable features and design principles should transform the virtual tour into an educational tool.

Sustainable Advocacy

Designing the virtual tour must align with advocating for sustainable practices, emphasizing the eco-friendly architecture of LEED buildings.

Field Research 🤔

Project Key Goals

Paper wireframes

While there was a glitch during export, here are my chicken scratch concepts!

Field Research 🤔

Project Key Goals

Immersion Exploration

By immersing guests in the experience, they are granted a greater understanding of the architectural and sustainable elements, as the design aims to transport users there in person.

Educational Experience

Providing detailed information about the sustainable features and design principles should transform the virtual tour into an educational tool.

Sustainable Advocacy

Designing the virtual tour must align with advocating for sustainable practices, emphasizing the eco-friendly architecture of LEED buildings.

Project Key Goals

Field Research 🤔

Immersion Exploration

By immersing guests in the experience, they are granted a greater understanding of the architectural and sustainable elements, as the design aims to transport users there in person.

Educational Experience

Providing detailed information about the sustainable features and design principles should transform the virtual tour into an educational tool.

Sustainable Advocacy

Designing the virtual tour must align with advocating for sustainable practices, emphasizing the eco-friendly architecture of LEED buildings.

Solution

The resulting web walkthrough offers a seamless interface, allowing individuals to explore the Student Service Building and learn about its eco-friendly amenities.

Immersion Exploration

The user can interact with all levels of the Student Service building—even the exterior and the bathrooms— to click on pop up info buttons and learn about how specific aspects of the building are LEED compliant.

Educational Experience

While clicking the pop ups, the user has a detailed insight to how a specific aspect of the building is LEED compliant. This content was fully written by a certified LEED Green associate at the university. There is also an "About the Building" section to learn more about the Student Service Building.

Sustsainable Advocacy

With call to actions and tips in tricks on how to be more sustainable, the user is given ways that they can make the little actions that matter when it comes to sustainability.

Paper wireframes
While there was a glitch during export, here are my chicken scratch concepts!
Low fidelity wireframes
At this stage, I starting planning out the layout.
High fidelity Prototyping
The gray textboxes were soon to be filled with information about different points conservation options and living lifestyles of LEED buildings to be implemented by UMiami copywriters.
Example of walkthrough
Here's an exterior componet of the walkthrough! when hovered, objects and directions of interest are highlighted. One feedback point is that users needed an arrow to know where they can advance to the next section, and it's currently being built out now!
Example of clicked pop up
An example of what a user sees once they click a pop-up button.
Paper wireframes
While there was a glitch during export, here are my chicken scratch concepts!
Low fidelity wireframes
At this stage, I starting planning out the layout.
High fidelity Prototyping
The gray textboxes were soon to be filled with information about different points conservation options and living lifestyles of LEED buildings to be implemented by UMiami copywriters.
Example of walkthrough
Here's an exterior componet of the walkthrough! when hovered, objects and directions of interest are highlighted. One feedback point is that users needed an arrow to know where they can advance to the next section, and it's currently being built out now!
Example of clicked pop up
An example of what a user sees once they click a pop-up button.
Paper wireframes
While there was a glitch during export, here are my chicken scratch concepts!
Low fidelity wireframes
At this stage, I starting planning out the layout.
High fidelity Prototyping
The gray textboxes were soon to be filled with information about different points conservation options and living lifestyles of LEED buildings to be implemented by UMiami copywriters.
Example of walkthrough
Here's an exterior componet of the walkthrough! when hovered, objects and directions of interest are highlighted. One feedback point is that users needed an arrow to know where they can advance to the next section, and it's currently being built out now!
Example of clicked pop up
An example of what a user sees once they click a pop-up button.
Paper wireframes
While there was a glitch during export, here are my chicken scratch concepts!
Low fidelity wireframes
At this stage, I starting planning out the layout.
High fidelity Prototyping
The gray textboxes were soon to be filled with information about different points conservation options and living lifestyles of LEED buildings to be implemented by UMiami copywriters.
Example of walkthrough
Here's an exterior componet of the walkthrough! when hovered, objects and directions of interest are highlighted. One feedback point is that users needed an arrow to know where they can advance to the next section, and it's currently being built out now!
Example of clicked pop up
An example of what a user sees once they click a pop-up button.

Low Fidelity wireframes

At this stage, I starting planning out the layout.

High fidelity Prototyping

The gray textboxes were soon to be filled with information about different points conservation options and living lifestyles of LEED buildings to be implemented by UMiami copywriters.

example of home page

From there, users can pick which part of the building to start on. You can circle around the building in this prototype as well—this is just a starting point.

Example of walkthrough

Here's an exterior componet of the walkthrough! when hovered, objects and directions of interest are highlighted. One feedback point is that users needed an arrow to know where they can advance to the next section, and it's currently being built out now!