The Clemente Museum

History, made virtual

Humanely

History, made virtual

🖥️

Desktop

🖥️

Desktop

🧩

Developed in Unity

🧑🏻

Personal project

🧩

Developed in Unity

Roberto Clemente was a Latino and Black athlete and icon from the 1950s, who gave his life in service to others. I partnered with nonprofit Clemente Museum to design a virtual web experience that makes Clemente's life and legacy an example for a new generation.

This was a client project with The Clemente Museum, as part of CMU's MHCI capstone project. With a team, I designed this in Figma and developed this in Unity from February–August 2021.

This was a client project with The Clemente Museum, as part of CMU's MHCI capstone project. With a team, I designed this in Figma and developed this in Unity from February–August 2021.

This was a client project with The Clemente Museum, as part of CMU's MHCI capstone project. With a team, I designed this in Figma and developed this in Unity from February–August 2021.

Problem

Building younger appeal

Problem

Building younger appeal

Problem

Building younger appeal

The Clemente Museum hosts visits by appointment only, and its patrons are primarily original fans of Roberto Clemente, who played in the 1950s to the 1970s. The museum, to expand the demographics it appeals to, is looking to reach younger audiences and people who aren't able or willing to travel to the Pittsburgh-based museum.

⚾️

Who is Roberto Clemente?

I have to confess—I didn't start this project as a baseball fan, but I loved learning about Roberto Clemente's life. He was a Latino and Black MLB player in the 60s and 70s, and he wasn't only a record setter on the field—he was heavily involved in charity work.

He ultimately died in a plane crash at 38, delivering aid to earthquake victims in Nicaragua. His family and the Clemente Museum continue sharing his legacy today.

⚾️

Who is Roberto Clemente?

I have to confess—I didn't start this project as a baseball fan, but I loved learning about Roberto Clemente's life. He was a Latino and Black MLB player in the 60s and 70s, and he wasn't only a record setter on the field—he was heavily involved in charity work.

He ultimately died in a plane crash at 38, delivering aid to earthquake victims in Nicaragua. His family and the Clemente Museum continue sharing his legacy today.

⚾️

Who is Roberto Clemente?

I have to confess—I didn't start this project as a baseball fan, but I loved learning about Roberto Clemente's life. He was a Latino and Black MLB player in the 60s and 70s, and he wasn't only a record setter on the field—he was heavily involved in charity work.

He ultimately died in a plane crash at 38, delivering aid to earthquake victims in Nicaragua. His family and the Clemente Museum continue sharing his legacy today.

Solution

An interactive timeline with 3D scenes

Solution

An interactive timeline with 3D scenes

Solution

An interactive timeline with 3D scenes

Solution

An interactive timeline with 3D scenes

To engage younger audiences, we built an immersive web experience that delivers both rich storytelling and interaction. To ensure the deliverable was compatible with web browsers, which supported our client's request for accessibility, I advocated for lightweight 3D scenes that would be portable from Unity using WebGL.

🏺

3D scenes with virtual artifacts.

Immersive scenes build out Clemente's context by recreating an environment in which he lived or experienced, populated with real photos and virtual artifacts.

I designed and implemented this scene in Unity, as a representation of Clemente's apartment in 1960s Pittsburgh, where he lived with his family.

🏺

3D scenes with virtual artifacts.

Immersive scenes build out Clemente's context by recreating an environment in which he lived or experienced, populated with real photos and virtual artifacts.

I designed and implemented this scene in Unity, as a representation of Clemente's apartment in 1960s Pittsburgh, where he lived with his family.

🏺

3D scenes with virtual artifacts.

Immersive scenes build out Clemente's context by recreating an environment in which he lived or experienced, populated with real photos and virtual artifacts.

I designed and implemented this scene in Unity, as a representation of Clemente's apartment in 1960s Pittsburgh, where he lived with his family.

🏺

3D scenes with virtual artifacts.

Immersive scenes build out Clemente's context by recreating an environment in which he lived or experienced, populated with real photos and virtual artifacts.

I designed and implemented this scene in Unity, as a representation of Clemente's apartment in 1960s Pittsburgh, where he lived with his family.

☝️

Building context through exploration.

Users learn by interacting with real artifacts, even without being in the physical museum. Using photogrammetry, we digitized real museum artifacts and built 3D scenes with annotations for users to explore.

☝️

Building context through exploration.

Users learn by interacting with real artifacts, even without being in the physical museum. Using photogrammetry, we digitized real museum artifacts and built 3D scenes with annotations for users to explore.

☝️

Building context through exploration.

Users learn by interacting with real artifacts, even without being in the physical museum. Using photogrammetry, we digitized real museum artifacts and built 3D scenes with annotations for users to explore.

☝️

Building context through exploration.

Users learn by interacting with real artifacts, even without being in the physical museum. Using photogrammetry, we digitized real museum artifacts and built 3D scenes with annotations for users to explore.

📀

Engaging multimedia.

A visual timeline links to multimedia content than combines text, audio, image, and video to walk through key years in Clemente's life.

📀

Engaging multimedia.

A visual timeline links to multimedia content than combines text, audio, image, and video to walk through key years in Clemente's life.

📀

Engaging multimedia.

A visual timeline links to multimedia content than combines text, audio, image, and video to walk through key years in Clemente's life.

📀

Engaging multimedia.

A visual timeline links to multimedia content than combines text, audio, image, and video to walk through key years in Clemente's life.

Process

How do museums engage audiences?

Process

How do museums engage audiences?

Process

How do museums engage audiences?

Process

How do museums engage audiences?

To envision a virtual experience that captures the life and work of Roberto Clemente, our team knew we needed to understand how his story is told today. What makes the Clemente Museum, and similar experiences, compelling and engaging? We wanted to understand how artifacts live in museums, and how people connect to the stories behind them.

📍

Mapping visitor experiences.

As a designer, I prioritize interacting with users whenever possible. We hosted contextual inquiries with tour groups at The Clemente Museum, and broke down their experiences in a customer journey map that identified key artifacts that drew the most attention.

📍

Mapping visitor experiences.

As a designer, I prioritize interacting with users whenever possible. We hosted contextual inquiries with tour groups at The Clemente Museum, and broke down their experiences in a customer journey map that identified key artifacts that drew the most attention.

📍

Mapping visitor experiences.

As a designer, I prioritize interacting with users whenever possible. We hosted contextual inquiries with tour groups at The Clemente Museum, and broke down their experiences in a customer journey map that identified key artifacts that drew the most attention.

📍

Mapping visitor experiences.

As a designer, I prioritize interacting with users whenever possible. We hosted contextual inquiries with tour groups at The Clemente Museum, and broke down their experiences in a customer journey map that identified key artifacts that drew the most attention.

📝

Learning from subject matter experts.

I interviewed 4 domain experts, including a curator at The Met, over Zoom to understand the current state of physical museums—what are the challenges in expanding a museum's audience? The common pain points?

📝

Learning from subject matter experts.

I interviewed 4 domain experts, including a curator at The Met, over Zoom to understand the current state of physical museums—what are the challenges in expanding a museum's audience? The common pain points?

📝

Learning from subject matter experts.

I interviewed 4 domain experts, including a curator at The Met, over Zoom to understand the current state of physical museums—what are the challenges in expanding a museum's audience? The common pain points?

📝

Learning from subject matter experts.

I interviewed 4 domain experts, including a curator at The Met, over Zoom to understand the current state of physical museums—what are the challenges in expanding a museum's audience? The common pain points?

“Tell the story, either from [Clemente's] perspective or someone else's perspective, so it's more about narrative.”

An approach grounded in storytelling can both engage audiences and foster empathy with historical figures.

“Tell the story, either from [Clemente's] perspective or someone else's perspective, so it's more about narrative.”

An approach grounded in storytelling can both engage audiences and foster empathy with historical figures.

“Tell the story, either from [Clemente's] perspective or someone else's perspective, so it's more about narrative.”

An approach grounded in storytelling can both engage audiences and foster empathy with historical figures.

“Tell the story, either from [Clemente's] perspective or someone else's perspective, so it's more about narrative.”

An approach grounded in storytelling can both engage audiences and foster empathy with historical figures.

“If you have a great story and an amazing character...it’s worth creating a link with the present, especially if you want to connect with youth.”

Establishing how Clemente and the museum's work is relevant today can appeal to younger audiences, and helps build the importance of his legacy.

“If you have a great story and an amazing character...it’s worth creating a link with the present, especially if you want to connect with youth.”

Establishing how Clemente and the museum's work is relevant today can appeal to younger audiences, and helps build the importance of his legacy.

“If you have a great story and an amazing character...it’s worth creating a link with the present, especially if you want to connect with youth.”

Establishing how Clemente and the museum's work is relevant today can appeal to younger audiences, and helps build the importance of his legacy.

“If you have a great story and an amazing character...it’s worth creating a link with the present, especially if you want to connect with youth.”

Establishing how Clemente and the museum's work is relevant today can appeal to younger audiences, and helps build the importance of his legacy.

Process

How are stories told in virtual spaces?

Process

How are stories told in virtual spaces?

Process

How are stories told in virtual spaces?

Process

How are stories told in virtual spaces?

With our primary research, we saw that the most fundamental aspect to our type of museum experience is rich, relatable storytelling and discussion. To quickly observe how people engage with stories in museum-like virtual spaces, our team turned to the popular video game known for its building—Minecraft!

I built this virtual exhibit in Minecraft as a rapid prototype, and observed participants interact with the environment and artifacts to understand behaviors in virtual spaces.

I built this virtual exhibit in Minecraft as a rapid prototype, and observed participants interact with the environment and artifacts to understand behaviors in virtual spaces.

I built this virtual exhibit in Minecraft as a rapid prototype, and observed participants interact with the environment and artifacts to understand behaviors in virtual spaces.

I built this virtual exhibit in Minecraft as a rapid prototype, and observed participants interact with the environment and artifacts to understand behaviors in virtual spaces.

By synthesizing what I had observed in Minecraft using an affinity diagram, I realized that, because it looked like an exhibit, people still brought the social norms and habits of real-world museums into a virtual world.

By synthesizing what I had observed in Minecraft using an affinity diagram, I realized that, because it looked like an exhibit, people still brought the social norms and habits of real-world museums into a virtual world.

By synthesizing what I had observed in Minecraft using an affinity diagram, I realized that, because it looked like an exhibit, people still brought the social norms and habits of real-world museums into a virtual world.

By synthesizing what I had observed in Minecraft using an affinity diagram, I realized that, because it looked like an exhibit, people still brought the social norms and habits of real-world museums into a virtual world.

Process

Prototyping in Unity

Process

Prototyping in Unity

Process

Prototyping in Unity

Process

Prototyping in Unity

To design our virtual experience, I engaged in multiple rounds of rapid ideation. In this example, I timeboxed myself to 3 minutes per idea and sketched rough user flows.

To design our virtual experience, I engaged in multiple rounds of rapid ideation. In this example, I timeboxed myself to 3 minutes per idea and sketched rough user flows.

To design our virtual experience, I engaged in multiple rounds of rapid ideation. In this example, I timeboxed myself to 3 minutes per idea and sketched rough user flows.

To design our virtual experience, I engaged in multiple rounds of rapid ideation. In this example, I timeboxed myself to 3 minutes per idea and sketched rough user flows.

An early prototype was a spatial timeline with an isometric view, where users could click and drag to explore. I designed visual transitions like shown from B&W -> color to signify eras of Clemente's life.

An early prototype was a spatial timeline with an isometric view, where users could click and drag to explore. I designed visual transitions like shown from B&W -> color to signify eras of Clemente's life.

An early prototype was a spatial timeline with an isometric view, where users could click and drag to explore. I designed visual transitions like shown from B&W -> color to signify eras of Clemente's life.

An early prototype was a spatial timeline with an isometric view, where users could click and drag to explore. I designed visual transitions like shown from B&W -> color to signify eras of Clemente's life.

Process

Learnings and takeaways

Process

Learnings and takeaways

Process

Learnings and takeaways

Process

Learnings and takeaways

In regards to feedback—I found getting critique often and early from our client was critical—after some early missteps (featured in the isometric prototype) our team organized weekly meetings to share our progress. I learned I also needed to communicate my designs better, by noticing when stakeholders are giving vague or inactionable feedback and responding with specific questions. Offering prototypes at the right fidelity to elicit the appropriate level of feedback is key, and I gained a sense for that during this project.

In design, I learned the initial sketches and prototypes of the web experience were exciting and ambitious, but didn't offer enough affordances to create intuitive navigation for users. Instead of hiding content behind multiple layers, making artifacts of Clemente's life secondary to the world, the final prototype leverages them to populate the virtual space itself so that users can directly manipulate and explore 3D objects with universal interactions like click and drag or hover.