VISIBLE
Resurrecting Henry “Box” Brown’s Moving Panorama
Resurrecting Henry “Box” Brown’s Moving Panorama
VISIBLE uses mobile augmented reality (mobile AR), artificial intelligence (AI), motion-capture, and physical performance to resurrect and remediate the Victorian-era moving panorama, “Mirror of Slavery.”
Context
Context
Sole designer on a digital media academic research project.
Sole designer on a digital media academic research project.
Timeline
Timeline
December 2024 to March 2025
December 2024 to March 2025
Team
Team
Yannic Dosenbach, Mentor
Elizabeth Hunter, Faculty researcher
WashU Digital Transformation Team
WashU DevSTAC
Yannic Dosenbach, Mentor
Elizabeth Hunter, Faculty researcher
WashU Digital Transformation Team
WashU DevSTAC
Skills
Skills
User Personas, AR, AI,
Question-storming
User Personas, AR, AI,
Question-storming
Background
What happens when the design process itself becomes the subject of research?
What happens when the design process itself becomes the subject of research?
As a designer in the Skandalaris Design Agency, I was commissioned for a research project under WashU’s Theatre + New Media Lab. In conjunction with WashU’s Digital Intelligence & Innovation Accelerator (DI2), we have been collaborating towards an NSF-STF grant for her current book project, In the Story: Enactive Spectatorship from Amphitheatre to Augmented Reality.
VISIBLE uses mobile AR to recreate the moving panorama as a digital canvas users can launch in any location.
As a designer in the Skandalaris Design Agency, I was commissioned for a research project under WashU’s Theatre + New Media Lab. In conjunction with WashU’s Digital Intelligence & Innovation Accelerator (DI2), we have been collaborating towards an NSF-STF grant for her current book project, In the Story: Enactive Spectatorship from Amphitheatre to Augmented Reality.
VISIBLE uses mobile AR to recreate the moving panorama as a digital canvas users can launch in any location.
To create the content depicted on the canvas, images are generated by an AI trained on:
Samples of visual styles from the era
Descriptions of Brown’s moving panorama canvas gleaned from scholarship and archival materials
The user’s geographic location, recent events, or other variables
To create the content depicted on the canvas, images are generated by an AI trained on:
Samples of visual styles from the era
Descriptions of Brown’s moving panorama canvas gleaned from scholarship and archival materials
The user’s geographic location, recent events, or other variables
The integration of these three components yields different visuals each time the app is launched. Through observing my process of understanding and thinking through the design of an augmented panorama, the buildout of the VISIBLE app serves as a praxis for Dr. Hunter’s scholarship.
The integration of these three components yields different visuals each time the app is launched. Through observing my process of understanding and thinking through the design of an augmented panorama, the buildout of the VISIBLE app serves as a praxis for Dr. Hunter’s scholarship.
Defining the Problem
Establishing my role as designer by asking questions and taking ownership.
Establishing my role as designer by asking questions and taking ownership.
As the sole designer and student onboarded onto this project, I initiated and led a number of design syncs to ensure I understood VISIBLE’s concept, Dr. Hunter’s research goals, and the development team’s technical constraints. After the initial design syncs, I mapped out the following high-level and granular goals:
As the sole designer and student onboarded onto this project, I initiated and led a number of design syncs to ensure I understood VISIBLE’s concept, Dr. Hunter’s research goals, and the development team’s technical constraints. After the initial design syncs, I mapped out the following high-level and granular goals:
After defining my goals, I set to conducting background research on the moving panorama and augmented reality apps. For the moving panorama and Henry “Box” Brown’s story, I read excerpts from Miller’s “Panorama” and Daphne Brooks’ “The Escape Artist,” and collected images to better understand the mechanics of moving panoramas.
After defining my goals, I set to conducting background research on the moving panorama and augmented reality apps. For the moving panorama and Henry “Box” Brown’s story, I read excerpts from Miller’s “Panorama” and Daphne Brooks’ “The Escape Artist,” and collected images to better understand the mechanics of moving panoramas.
I also downloaded several existing AR apps, including the Google Arts & Culture app to build understanding and empathy towards users of the VISIBLE app.
I also downloaded several existing AR apps, including the Google Arts & Culture app to build understanding and empathy towards users of the VISIBLE app.
User Research
Empathizing with subsets of stakeholders and potential users.
Empathizing with subsets of stakeholders and potential users.
I created three user personas to represent the range of people who might interact with VISIBLE.
I created three user personas to represent the range of people who might interact with VISIBLE.
I made a user flow diagram to ensure I correctly understood VISIBLE. Because of the project’s highly flexible and layered approach, this helped me map out all of the possible interactions a user could take within the app.
I made a user flow diagram to ensure I correctly understood VISIBLE. Because of the project’s highly flexible and layered approach, this helped me map out all of the possible interactions a user could take within the app.
Design
How can design facilitate immersive experiences?
How can design facilitate immersive experiences?
Hand sketching allowed me to communicate design considerations quickly and easily. Through this sketches, I played with different level of fidelity for the panorama (skeumorphism vs. minimalism), integration styles with the background, and the AR placement process.
Hand sketching allowed me to communicate design considerations quickly and easily. Through this sketches, I played with different level of fidelity for the panorama (skeumorphism vs. minimalism), integration styles with the background, and the AR placement process.
Moving into Figma, I developed lo-fi wireframes to visualize the process of scanning the surroundings, placing the panorama, and exploring the scene post-placement. I brought these screens into a mid-point check-in with the rest of the team to align on direction and technical feasibility.
Moving into Figma, I developed lo-fi wireframes to visualize the process of scanning the surroundings, placing the panorama, and exploring the scene post-placement. I brought these screens into a mid-point check-in with the rest of the team to align on direction and technical feasibility.
Alignment
Aligning on design direction during the midpoint check-in.
Aligning on design direction during the midpoint check-in.
The mid-point check-in was invaluable in aligning with the research and development team on content architecture and technical feasibility of the app. We worked on creating the following component architecture diagram, describing how we would be feeding the Getty AI LLM for panorama image generation.
The mid-point check-in was invaluable in aligning with the research and development team on content architecture and technical feasibility of the app. We worked on creating the following component architecture diagram, describing how we would be feeding the Getty AI LLM for panorama image generation.
Following the mid-point check-in, we decided to prioritize on the design end:
Designing a seamless onboarding experience that guides the user through background information and AR phone preparation.
Developing a cohesive design style that augments the 1850s aesthetic of the panorama while remaining unobtrusive.
User test, especially in regards to the AR functionality.
We also decided to move forward in a horizontal orientation due to the panorama’s landscape form.
Following the mid-point check-in, we decided to prioritize on the design end:
Designing a seamless onboarding experience that guides the user through background information and AR phone preparation.
Developing a cohesive design style that augments the 1850s aesthetic of the panorama while remaining unobtrusive.
User test, especially in regards to the AR functionality.
We also decided to move forward in a horizontal orientation due to the panorama’s landscape form.
Reflection and next steps
Ensuring a seamless handoff for the next designer(s).
Ensuring a seamless handoff for the next designer(s).
Visible is a work in progress, serving as praxis for Dr. Hunter’s academic research on the use and implications of immersive technology to resurrect history. We are experimenting with a fluid model of collaboration between design and development, in which design is brought into the conversation early and often.
Although my time working on the VISIBLE project was cut short by graduation, I wanted to ensure that the next student designers would have robust documentation moving forward. I compiled a Knowledge Transfer document of everything I had learned, from a summary of the project from my perspective, to key design considerations, to communication channels used within the team.
Visible is a work in progress, serving as praxis for Dr. Hunter’s academic research on the use and implications of immersive technology to resurrect history. We are experimenting with a fluid model of collaboration between design and development, in which design is brought into the conversation early and often.
Although my time working on the VISIBLE project was cut short by graduation, I wanted to ensure that the next student designers would have robust documentation moving forward. I compiled a Knowledge Transfer document of everything I had learned, from a summary of the project from my perspective, to key design considerations, to communication channels used within the team.
Other Projects
Don’t be a stranger 🌱 Find me at wentingyu.dyw@gmail.com or linkedin.com/in/wentingy
Other Projects
Don’t be a stranger 🌱 Find me at wentingyu.dyw@gmail.com or linkedin.com/in/wentingy