Redesign and Extend: Physicalizing User Experiences with the Atlanta History Center
Redesigning a previous digital interface design as a physical prototype for Morehouse College students
Introduction
For my Human-Computer Interaction (HCI) course at Emory University, my group and I were tasked with re-designing a previous digital design in which we re-designed the official Atlanta History Center desktop website for mobile. Now, we are re-designing our mobile design as a physical product: a wearable technology and interface. A lot of re-design components were involved in this project, emphasizing the necessary iterative approaches applied in design. We continued and extended our previous metaphor of a game-ified, arcade-like experience by intersecting the physical and digital worlds. Through our wearable prototype — a pair of augmented reality (AR) glasses — our Morehouse College audience can interact with the physical museum environment digitally, improving quality of life through navigation and text summaries and modernizing user experiences with archaic exhibitions. In this post, I discuss our design process, including evaluation, user testing, and prototyping. Readers can check out our demo below.
Motivation
Given our target audience’s highly technical background in computer science and business, our previous design aimed at game-ifying the user experience through an arcade-like metaphor. We attempted to connect and intersect the physical museum environment with our modernized digital world. Naturally, we aimed at extending this game-ified experience using virtual reality (VR) and augmented reality (AR) — tools that are being used now to digitize physical experiences.
Anecdotally, I visited the High Museum of Atlanta with Jasmin and found that all of the exhibits had long captions and descriptions. Although the more information the merrier, we found that we wanted to get the gist of a piece or an exhibit and move on to the countless others.
As college students are always learning on limited time, we wanted to emphasize museum visits as fun, engaging, and informative without applying the same pressure to meticulously study and learn every detail. We wanted a wearable that did not have the same tedious set up as a typical VR headset to streamline the come-and-go, take-on-take-off museum experience. Maximizing the learnability and convenience of the wearable itself and of the exhibits are our primary goals.
Design Process
Our team was composed of four members: Randy, Jasmin, Zhenke, and Ruochen. Jasmin and Randy worked mostly on the physical prototypes, Zhenke worked mostly on evaluation and user testing, and Ruochen worked mostly on the digital interfaces using Figma.
I. Re-evaluation
Zhenke proposed the following evaluation method:
- Focusing on learnability and memorability as our goals, we carried out quantitative and qualitative usability testings in which we present and inquire about our design to college students on these goals. Our sample size (n=15) consisted of fifteen college students.
- First to test learnability, we enumerated through each screen of our mobile design and had the participants count the number of useful functions.
- Second, we asked the participants about their familiarity with each function. Participants were measured by their success rate and time required in completing tasks involved with the mobile design.
- The participants were given opportunities to share feedback throughout the process.
- Next, we tested memorability. We had participants interact with and try to understand our arcade metaphor according to the interface design and the available features.
- The participants’ qualitative and quantitative feedbacks were recorded and applied to next iterations of the design.
Reflecting on our previous mobile design, Zhenke collected the following user feedback on learnability, memorability, accessibility, and interactivity:
- Learnability: users found learnability is good but can be improved. The filter options on the Events page is too small and can be easily missed. The interface buttons are too small and the selection of colors is hard to read. Larger text is needed.
- Memorability: users found memorability is good but can be improved. The Exhibits page only shows information about wars but should broaden the scope of topics. Users may think the Atlanta History Center is only about wars when it is not.
- Accessibility: users found accessibility is good but can be improved. The text size could be enlarged as mobile displays are already small, thus small text size disrespects users with visual impairments or contributes to visual strain. The colors could also be improved to better distinguish on-screen entities.
- Interactivity: users desired more interactive elements. Current design only includes social media sharing and tapping modules; users desired adding pins and comments to events. One suggestion to add to the Exhibits screen, users could have more background context to figure out which exhibits are interesting to them.
II. Ideas and Brainstorming
Some of the ideas we brainstormed followed the proposed questions:
- How can users better share our independent, individual introspections of the exhibits with those in our social environment? (e.g. college students are likely to go to a museum or exhibit with friends but separate to inspect different pieces)
- How can users acquire more/less information about the exhibits?
- How can we accelerate a users’ ability to understand and digest exhibits?
From our discussions on these questions, we decided on a few ideas:
- collectible tokens that encourage exploring all exhibits and rewarding users with museum merchandise; emphasizes a game-ified experience and transforms the experience as a real world board game
- tactile tracker that vibrates based on geolocation and exhibits the user already experienced
- bringing the museum to the users instead of the users going to the museum; a physical interactive map
- an individual shower curtain structure that isolates users from the crowded environment and allows users to channel independent reflection and introspection about an exhibit
- a wearable headset or glasses that augments and enhances visual details; being able to navigate the large space and be guided to the next exhibit, magnify details since users cannot get too close to e.g. a sculpture, or visualizing “do not touch” boundaries
We ended up going with the last idea of a wearable headset as a large component of a museum experience is using the eyes and looking. Sometimes a user may want to quickly look over an exhibit, or preview an exhibit from afar before taking the extra steps.
III. Initial Prototype
Physical: for our physical wearable, we used cardboard as the main material as it was cost efficient and readily available. The cardboard prototype was inspired by parametric designs as the prototype could be easily constructed and deconstructed for transportation. Through a parametric design, the headset would also be more lightweight, less bulky, and more aerated given the use of empty/negative space. Each cardboard slice has indents in which other slices can be hatched and attached without the use of glue or tape. The following images show some of the prototyping process.
Digital: for the associated digital interfaces with the physical wearable, Ruochen illustrated user interactions with the physical exhibits in Figma. Some initial features include revealing digital maps, guiding users through the museum, sharing to social media, displaying more information about exhibits, and showing “do not touch/pass” boundaries. The following gifs show the interactions in action.
We tested these prototypes in the next section.
IV. Usability Testing and User Feedback
Through Zhenke’s evaluation and user testing, we found that the form of the prototype headset can be improved to be less bulky and more minimal — perhaps aligning better with conventional eyeglass sizes. Additionally, some users did not have much experience with VR, so ways to incorporate better learnability was needed.
During testing, users suggested additional features: audiovisual explanations of exhibits, a filtering function for desired exhibits, and social media comment integration to see how other visitors and users have engaged with the exhibit. This feedback is important as college students try to learn about topics from a various range of perspectives.
V. Iterated Prototype
Physical: following previous feedback, we found our cardboard prototype was too bulky and confusing to use, thus we decided to re-iterate our design and 3D print glasses using files from FRAME Open Source Eyewear. In this design, the glasses are more lightweight and convenient to use. The form factor is also memorable and learnable since they follow conventional eyeglass forms. The design incorporates a shader (black flaps on the eye sockets) component that mimics a VR headset’s casing to better illuminate the display. This also mimics detachable sunglass shades that current glasses can have to turn regular glasses into sunglasses, thus emphasizing the flexibility and convenience of the glasses — users can easily take on and take off the glasses given the small form factor, or turn on and turn off the AR feature by removing or lifting the shaded displays. On the side is a googly eye, representing the camera sensor to recognize the user’s surrounding environment and present AR information as necessary.
Digital: following previous feedback, Ruochen increased the sizing of the icons and the text. Since this was also an issue in the mobile design, we wanted to emphasize this accessibility feature. Through this digital re-design, users can adjust the visibility of the display features to their liking.
VII. Future Work and Limitations
Since a lot of effort, time, and resources were allocated for prototyping and user studying, we did not make the aesthetic for our user group the most salient. We focused first on functionality before aesthetic. For the future, we intend on making the headset the same colors as Morehouse College and embedding their logo on the glasses.
One limitation to this design is we assume that we have advanced computer vision, gesture recognition technologies embedded into a thin display shaped as eye glass lenses through which users can see. This design approach is more speculative, and we do not know if our ideas can be made in our current reality.
Demo
Figma 1 (mobile): https://www.figma.com/file/mX7e8Jsz4J5R40WhU8W6mH/CS-485%2F584?node-id=8%3A32
Figma 2 (physical): https://www.figma.com/file/JupklnStiPsRY63tAmNkWS/HCI---ReDesign?node-id=0%3A1
Video demo: https://web.microsoftstream.com/video/5bd64421-ae28-4048-b7fd-1282ea155abd
Conclusion
In the context of Morehouse College students and the Atlanta History Center, our design effectively bridges the digital and physical environments in a way that encourages users to interact with archaic history in a modern lens. Users can wear lightweight AR-equipped glasses to increase or decrease information overload at exhibits, improve quality of life through guided navigation, and maintain respect for the boundaries around the museum.
This project truly emphasized and reinforced iterative design. Our first project focused on re-designing the mobile experience from a desktop site for our audience: Morehouse College students. Then we re-designed the mobile, digital experience as a physical, wearable experience. Through each step, we iterated designs and collected user feedback, thus motivating further design iterations. User testing is necessary and important for designing a good product. Programmers, designers, and researchers cannot let their biases and personal judgements about a topic or group of people motivate a design because in the end it may not accurately reflect the use cases or experiences of the target group. Additionally, the product should be relevant and meaningful to the target audience. We found that some features from the digital design and experience did not translate to the physical experience, thus we had to adjust accordingly.
The re-design project reinforced my understanding of user testing, evaluation methods, and low-fidelity and mid-fidelity rapid prototyping.
Acknowledgements
I would like to thank my group members, Jasmin, Zhenke, and Ruochen, for contributing to this project.
