Visual Design
UI Design
2 months
Jan - Feb  2024
UI Designer
Class project for the Visual Design Course under Prof. Jason Aston
This project was done as a part of the course 703 - Visual Design, as part of my Human Computer Interaction studies at UMD. Use the floating hamburger button on the left to quickly jump to the prototype!
Introduction and Motivation
My Smithsonian Experience
Reflecting on my Smithsonian visit, where the overwhelming amount of information sparked my quest for improved visualizations.
Information Overload: Recognizing the Need for Better Visualization.
Identifying the gap in museum displays: The need for enhanced, intuitive visual storytelling.
The Hope Diamond: A Beacon of Inspiration
Discovering the Hope Diamond: A pivotal moment inspiring the vision for this project.
Design Audit
Initial Tableau Dashboard
Key Highlights from the Audit
  • To much focus on data
  • No Visual Hierarchy
  • To much presented to the user in one go
  • Not designed for spacial presentation
Core Design Strategy
Optimize legibility, enhance interactivity, and ensure technical adaptability for a seamless mixed reality experience
Design Exploration
Choosing Typeface
Futura PT for Title and display, Proxima Nova for Body. These fonts were chosen to maintain a sleek and modern feel in the design
Exploring Layout
For the layout grid, a 10pt grid with 20 Margin was chosen, primarily to give creative freedom towards utilizing the available space
Design Decisions
Glassmorphism was employed to create an immersive visual experience, leveraging depth and translucency to enhance the mixed reality environment.

To ensure optimal legibility, the design incorporates larger and thicker fonts, carefully selected for clarity and ease of reading across diverse museum extended reality setups.

Further refining user interaction, enhanced contrast was employed, particularly in buttons, in response to the critique received.
High Fidelity Prototype
Welcome to the experience
The initial splash screen presents the user with two unique methods in which the system can be experienced.

The explore mode enables the user to look around the area, while the system intelligently picks up artifacts that show up in the frame.

The direct artifact mode is a list mode where all artifacts are listed
Explore Mode
In Explore Mode, users are given the autonomy to wander through the museum space, discovering artifacts at their own pace.

This mode leverages spatial recognition to highlight artifacts as they come into the user's view, creating an immersive, interactive experience.
All Artifact Mode
All Artifact Mode offers users a comprehensive list of the museum's artifacts at their fingertips.

Designed for accessibility and efficiency, this mode allows visitors to quickly locate specific artifacts or browse the collection at leisure.

This mode addresses the needs of those who prefer a more structured approach to museum visits, enabling direct access to information on any piece of interest.
Main artifact data dashboard
The Main Artifact Data Dashboard is a central feature, showcasing a rich array of information about the selected artifact.

For instance, using the Hope Diamond as the default case, users can explore a 3D model of the diamond through different time periods, learn about its various owners, view significant details, and trace its locations over the years.
Enlarged Map View
The Enlarged Map View expands the map from the Main Artifact Data Dashboard, offering users a more detailed and immersive exploration of the artifact's history.

The panoramic mode, a feature introduced following design critique, wraps the map around the user for a 360-degree view, providing a sense of being in the artifact's historical locations.

Additionally, a 3D globe visualization was included as an alternative, addressing the need for diverse perspectives in understanding global artifact histories. This design decision was motivated by the goal of enhancing user engagement through interactive visualizations, offering multiple ways to connect with the artifact's story.
Original Visualisation
Alternate Visualisation
Enlarged Artifact View
In the Enlarged Artifact View, users can engage with a 3D model of the artifact within the mixed reality space.

This mode allows for an interactive experience, where users can closely examine the artifact's details, textures, and any inscriptions.
Interactive Prototype
Here is an Interactive Prototype to try. Enable fullscreen by clicking the fullscreen button on the top right of the prototype window below.

Press "R" to restart prototype at any moment.
Next Steps
Under Development
As part of a web programming course, the prototype is under development as a website/web-app, employing javascript frameworks like A-Frame. Stay tuned for updates soon! :)