Redesign and Extend: Physicalizing User Experiences with the Atlanta History Center

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.

Photo by Uriel Soberanes on Unsplash

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:

  1. 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.
  2. First to test learnability, we enumerated through each screen of our mobile design and had the participants count the number of useful functions.
  3. 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.
  4. The participants were given opportunities to share feedback throughout the process.
  5. 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.
  6. 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.
Screenshot of the mobile design screens from Design Sprint 1

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
Image of our idea and brainstorming board

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.

Image of Randy sketching out cardboard slices
Image of cardboard prototype fully built
Image of cardboard prototype fully built

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.

Gif showing the AR interaction for guiding users through museum and displaying map
Gif showing the AR interaction for guiding users through museum
Gif showing the AR interaction for revealing more information, providing audiovisual explanations, and sharing social media information
Gif showing the AR interaction for “do not pass” boundaries if the user gets too close to the exhibit

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.

Image of the glasses prototype with camera sensor, angle 1
Image of the glasses prototype with camera sensor, angle 2
Image of the glasses prototype with camera sensor, angle 3

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.

Gif showing the AR interaction for increasing the font and icon sizes

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.

--

--

--

A human at the intersection of visual arts, computer science, and data science.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Rethinking Facebook’s Buy or Sell Group Pages

Redesigning the UNIQLO APP

Tips for T-shirts part 5

How Digital Learning will Catch Up

Old/New — Famous Designer Lamps

A letter to all design students out there

Wireframing UberEats

Technical Behavioral Questions — Part IX

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Randy Truong

Randy Truong

A human at the intersection of visual arts, computer science, and data science.

More from Medium

CS371p & CS373 Spring 2022: Aimery Methena

The project is a virtual universe consisting of era-themed metaverses on the blockchain.

VaynerMissions Are Shared Each Year Because Storygiving Was Built To Be ‘Played’ Forever

Sadaat Hasan Manto.