Maker Faire 2018!
An interactive kiosk for the Design for Diversity student initiative!
Project Overview
Goal: Our classmates had created some gorgeous websites around varying concepts of Diversity, including economic, racial, gender, health, and other lived experiences. We wanted to present their work in a fun and accessible manner to people who stopped by the UC Davis booth at Maker Faire 2018 in San Mateo.
Team: Violet Elder and I met while taking the Interactive Media II course taught by professor Glenda Drew at UC Davis. Violet and I collaborated on choosing a color scheme, planning the layout of the site, and split our coding work between creating the index page (mostly Violet) and modifying the 10 student projects so that they could be accessed from the index, and the index access from each of their pages (mostly me). In addition, I recruited fellow design student CJ Paghasian to create info placecards for the various items on display at our booth and provided art direction over his work.
Methods: The kiosk was displayed on a 1020 x 1080 touchscreen, with the computing power coming from a Raspberry Pi. Our site was intentionally built not to be responsive because of the fixed screen size of its intended viewing destination.
The index page relied on a fun and bright branding style that grabbed the visual attention of people walking past our booth and helped to counterbalance the sometimes somber or difficult stories of individuals’ experiences with diversity. It also included a touch of interactive motion to catch the user’s attention.
I wrote a small script to launch the kiosk index automatically upon boot up, so that if the Raspberry Pi needed to be restarted for any reason without Violet and me there, the other student volunteers would not need to do any setup. Finally, because some of the sites displayed via the kiosk utilized text input, we also included a keyboard.
Challenges: Violet and I were already both juggling other design projects and school research when we took on the kiosk project. We had just a few weeks to plan the visual design of the kiosk, track down all of the students who had submitted projects, get them to update their sites to fit the aspect ratio of our destination screen and then code the kiosk elements from scratch. Meanwhile, we were teaching ourselves how to use GitHub to collaborate on the site remotely — something not covered in our classes and usually explained from the perspective of an experienced developer in online tutorials. The night before the Faire we all stayed up late crunching code and pushing pixels, CJ and I in Glenda Drew’s office, Violet working remotely from home.
I have to admit, it was a stressful project. But finally, it was time to pack up everything, so we got some sleep, woke up early, and set off to Maker Faire 2018! We were so excited to set up our booth and meet and see everyone and see everything! Then… our Raspberry Pi couldn’t seem to find a WiFi network. Any network.
Through a trail of inquiries, I met Ralph, the man in charge of all network infrastructure at the Faire. He discovered that our older generation Pi couldn’t understand the AdaTo11G network the Faire was using. Ralph made a special exception for our issue and set up a second network using AdaTo11B that our poor old tech could connect to. Finally, it worked. (Thank you, Ralph!)
Results: While we had some trouble with the Pi on the first morning of the Faire, by immediately jumping into troubleshooting mode and hunting down the cool people of Maker Faire I got our kiosk back up and running shortly after the gates opened to visitors, so barely anyone noticed. Guests at our booth had a lot of fun playing with the ten student sites, especially the ones that included AR features. The descriptive labels CJ had created matched our booth banner wonderfully and helped pull together the branding for this first-year-ever UC Davis Design Maker Faire attendance!
Reflections: Being part of an independent design & code project like this was really fun! I loved being inspired by Violet’s unique visual style and it was great to incorporate some of her preference for saturated color schemes into our site. It was a healthy challenge to my sense of perfectionism to work on a project incorporating so many people’s work — I believe we were able to present their work together in an effective manner, and I hope that to be back at Maker Faire 2019 next year!
Yes! You can check out the live site here! But, do use your browser’s developer tools to view it at the correct 1020 x 1080 size! In Chrome, this means going to View > Developer > Developer Tools. In FireFox it’s Tools > Web Developer > Inspector. Or just right click and select “Inspect” near the bottom of the popup menu that appears!
You’ve reached the end, thanks for reading! Want to head back to my portfolio?
