Collectibles and Figurines
How Archeology and Theatre Collide
Early this semester, I along with three other group members, were tasked to build a mobile version of the Fox Theatre desktop website for mobile. The twist was that we were not developing for a wide audience. Instead, we were making the mobile version specifically for archeologists who are in Atlanta for the weekend that are attending a workshop on radiocarbon dating.
Using the skills and techniques that we had learned in class, my group and I felt proud and accomplished with the work and final product that we demoed in class in early February. You may notice that it is no longer February though and many classes have occurred between then and now.
This creates a unique opportunity to reflect on my previous work with the new skills, heuristics, and techniques that I have learned since then, including this first group project. To further increase the effectiveness of this exercise, we have been given two challenges.
- Re-design your initial mobile prototype after an evaluation
- Extend your prototype using some sort of physical medium & evaluate it
With the challenges defined, we could then evaluate, design, and prototype both digital and physical objects.
Mobile Site Evalulation
Before we could even start thinking about what our next design would be or what paper prototypes we would create, we had to tackle a user evaluation of our initial design. Our evaluation would allow us to ask and answer some simple, but extremely important questions: what worked well in our original design and what didn’t work?
To answer said questions, we created an extensive Google form to get feedback and statistics from our users. In total, we had 14 respondents fill out the form. Our Google form asks users a variety of questions in three distinct categories.
The first set of evaluation questions are all about the time, difficulty, and expectations while completing actions on the website. We are aiming for the user to quickly and easily navigate our website, so we expect user reported times and difficulty levels to both be low. We also want user reports to show that things would be located in areas that they expected on the website.
To test the time that it took to complete actions on the website, we asked them a variety of navigation questions, such as: book an event at the Grand Salon and Terrace, buy tickets for Peppa Pig’s Adventure, and find a place to eat near Fox theatre.
We were really happy with the feedback in this section. Only one question did any user take more than 30 seconds to complete any task and even then it was only 1 out of 14 users. In addition, the median difficulty level was reported to be between a 1 and a 2 out of 5. Things were looking great for our site’s difficulty and ease of use.
A misstep, however, was managing user expectations. Sometimes, elements and things that we asked users to look for were not in the places that they expected. Even though they were able to find it quickly, the fact that it wasn’t in the spot they thought it would be signals we need to reconsider where we place things in our re-design.
The second part of our evaluation was the form of the website. Questions like “I can easily tell which screen of the website I am currently viewing” and “My grandma could easily use this site” can give us a clearer view of what high-level parts of our site are working well and what needs improvement. The answer style was a ranking from “Strongly Agree” to “Strongly Disagree” and we asked users who disagreed to elaborate their thoughts at the end.
Again, the feedback was mostly positive. There were many more “Strongly Agree” and “Agree” than “Disagree” and “Strongly Disagree”, but we still want to know why they aren’t all “Strongly Agree”.
The main bits of feedback that were written boiled down to, “this is great for desktop, but not optimized for mobile.” Larger typefaces, larger buttons, and a persistent navbar were the predominant bits of feedback. This was super helpful to hear since working in Figma can easily give a false sense of ease of use since we are editing entirely on a desktop instead of using a phone. The buttons felt big enough to use with a mouse, but in actuality were too small for a user’s finger on a phone.
The last portion of our survey was about the user persona. Who are the types of folks responding? Do they have an HCI background? How old are they? Beyond one joke age of “Jake”, they are as follows:
While this certainly has a bias towards younger folks and men, the feedback given was still valid and essential for us to think about as we marched towards creating our re-design.
To start our re-design, we had to address all of this feedback. We couldn’t do so by immediately redoing our Figma mid-fi prototype, so we started like always have in this course: making paper prototypes.
With our evaluations in mind, we started to make some paper prototypes. We aimed to address the feedback that we were given, namely the placement of components, larger font sizes, and a persistent menu.
We all agreed that keeping the navbar as we had it would not work with this re-design. To make the text bigger with our old design would be impossible, so we had to think outside of the box. We went with a very popular way of mitigating this issue which is a hamburger menu (the three lines in the corner of each of our designs).
We also sketched the content blocks to be larger in both paper prototypes to help match the feedback that was given in our evaluation. We also knew, however, that paper prototyping would not be enough. We would have to make it in Figma to get a better idea of what worked and what didn’t in order to best match our own goals and the feedback from our users. That meant we need to dive into creating our re-design.
Based on our paper prototypes, we set out to make them a reality in Figma. The main things that we focused on adding were:
- Larger text
- Larger buttons
- A persistent menu
- Keeping user expectations
Thankfully, this meant we could continue our project reusing assets and typefaces from our initial design. We reused images, the Monserrat typeface, and interactions principles like having images be clickable. We also chose to not include some features from our initial design like back buttons on the website itself since they were too small and it's better for the user to just use the built-in back buttons on the browser or go through the hamburger menu anyway.
While it is convenient to have a navbar like a traditional desktop website, a hamburger menu allows us to address all three sticking points for our new design.
Larger text and larger buttons were the first issues that the hamburger menu addressed since the text are the buttons! This gave us two distinct advantages. The first is that the hamburger icon is small, much smaller than our previous design.
It also allowed us to create an overlay that took up the focus of the user while leaving a sliver of the screen to the right so the user could still tell where they were. In this overlay, we could use nearly the entirety of the screen real estate to have large text buttons that the user can click on to navigate throughout the website.
The other benefit that we found was that the overlay was easily expandable. For instance, the Visit Us page had three distinct sub-pages of “Directions”, “Dining”, and “Hotel”. We didn’t want to put another menu on the “Visit Us” page itself, so it made the most sense to place them within the hamburger menu itself. Therefore, we have two different versions of the overlay. One where we have the sub-menus of “Visit Us” hidden and the other where they are all available.
The other big feature change we made for this re-design was based on a preliminary evaluation where we had friends and Professors alike try our design. A major theme was potentially getting lost and wanting to be able to navigate to the menu faster. The easiest way to do so is to make the menu persistent: glued to the top of the screen. This does reduce the total amount of screen real-estate, but it is more than made up for by the rest of our elements being larger.
The rest of the website’s re-design was spent addressing user feedback by meeting their expectations as listed in the Google form. For us, this meant reducing previous clutter that we had on web pages and clearly labeling things in the hamburger menu as mentioned before.
With that concluding our first project’s re-design, we could move on to the second challenge of this project: making a physical extension.
With the re-design of our mobile sign complete, we then began to ideate how we might incorporate something physical into our mobile design.
For this portion of the project, we decided to think about the Fox Theatre experience itself and how we might attract archeologists as that was the user group that we’re targeting.
We went back to our mood board to gather inspiration and understanding of our user group. We asked ourselves, what is the intersection between archeologists and theatres? If there is none, what potential intersection could we create using the new physical modality?
After thinking about the problem and just talking out loud between group members, we found the perfect way to bring archeologists to the Fox Theatre. Not only can we incentive the archeologists to come during their weekend in Atlanta by showing relevant screenings and events, but we can also use physical objects to further increase the allure. What physical objects? Figurines!
We decided that since we know this weekend particular weekend the archeologists will be attending, why not show a re-screen of a movie that portrays the world's most famous archeologist: Indiana Jones. With this screening being advertised at the top of the mobile site, we can double down for the archeologists by creating something that matches what they do during their work: collecting artifacts.
These figurines (artifacts), can be customized for each movie and franchise, making them collectibles. For Indiana Jones, we created decided on three iconic figures: the Ark from Raiders of the Lost Ark, the skull from Kingdom of the Crystal Skull, and the Holy Grail from the Last Crusade.
We want these figurines to always be associated with the Fox Theatre, so how can we integrate these figurines with the mobile website? Each figurine will have an NFC tag in it or on it so the user can take the figurine and tap it on their phone to learn more about the movie. For figurines that are larger, like the Ark, it can also support a QR code for phones that don’t have an NFC chip.
With the idea in hand, we could start making our concept a reality.
With the idea in hand, we then had to think about how we were going to make it. We had a few options available to us at Emory’s Hatchery, a maker space, which were clay and 3D printing. We decided to start with clay since it would be very easy to make initial prototypes and then use the 3D printer to make our mid-fi prototypes for the demo. We also got NFC tags to be able to actually use our figures as intended instead of just pretending that a link would work (thanks Professor Wall!).
We started with something that we could easily do in clay as a proof of concept: the grail from the Last Crusade. We also decided to paint it to get some practice doing so and to make it more authentic compared to the neon yellow the clay started as. After drying, we placed an NFC chip under it and placed it on top of our phones to load up a link. Success! We really liked how it felt and we were confident in moving forward with the project.
The next step for us was creating/finding models to be able to 3D print. None of us had any modeling experience (or even 3D printed before) so we knew this was going to be a challenge. Thankfully, websites like Thingiverse have community-made models that you can download and print. Through Thingiverse, we found ark, grail, and skull models.
Using the 3D printer did require a learning curve that none of us expected. We started by loading our models into a program called “DREMEL DigiLab 3D Slicer”, which codes the .stl files from Thingiverse into something that can be read by the DigiLab 3D printer. It also adds additional support for things like overhangs automatically so the printer can actually print the model that we want.
What we didn’t notice the first time was the scale. When we used the above slice to print the grail on our first attempt, we ended up making it a little larger than we originally intended.
After that overnight mistake, we always made sure to adjust the scale of our prints to make them an appropriate size.
Soon enough, we had all of our models printed. We then took the time to paint them appropriate colors, except for the skull since the white opaque filament already looked pretty close to how the Crystal Skull is portrayed in the film.
Our final step required two things to be done at once: write the links to the NFC tags and attach said tags to our figures. We started by making the group page. We used the same process and assets as the rest of the website and filled the content of the page like a program you would receive if you went to a play or musical. This format is super versatile so not only could you make figures for each specific show, but you could also make programs for every show using the same format.
With this subpage of the Figma created, we could then set a flow to start from here to generate a link. With a working link, we could then write onto the NFC tags. Following that, we could glue them onto our figures and have our idea fully realized.
With our figures finished, we could then put them to the test and evaluate them.
With the website and physical prototypes created, we could move on to the final phase of our project: a preliminary user evaluation. How would users react and use the collectibles we created?
Since this was a preliminary evaluation, we decided to let classmates try our physical prototypes during class. We gave them each a short intro on the project and why we have some 3D printed collectibles. We then asked them to interact and use the collectible to view the Indiana Jones program.
We encountered a hurdle that we didn’t fully consider very early: very few people knew that their phones had NFC readers, let alone knowing how to use them. Once they were shown how to use the NFC tags with their phones, they were able to do it within seconds and were really impressed with the speed of reading (which was around 1 second). They found the QR code portion of the project easy to understand and use, so our backup solution for phones that didn’t have NFC readers also worked for those that didn’t know how to use NFC on their phones too.
With this feedback, we are also informed on how might we improve the prototype if we were to put it into production. An easy fix would be to have signage and graphics to show where the NFC tag is located in the collectible & where to tap on your phone to activate it. Words wouldn’t even be needed for this strategy would work since you could visually show that it's just placing two things next to each other. The QR code could also be displayed in a large format with the signage too for those that don’t have NFC readers or don’t want to keep a collectible.
To see how our physical prototypes perform, take a look at our demo video!
If you want to take a look at our redesigned website in its entirety, you can view it here. If you want to see our Last Crusade program as if you had one of our physical prototypes, you can do so by clicking here.
Over the course of this project, our group used concepts that we learned all throughout this course. Paper prototyping, user personas, evaluation strategies like heuristics, lo-fi prototypes, mid-fi prototypes, and much more. Who knew that making a plastic cup and a mockup of a fictional website could spur so much creativity and passion to make something great? I’m immensely proud of the work that my group and I did and I hope you can see the thought and care that went into creating each aspect of this project.