Maker Faire 2018!

An interactive kiosk for the Design for Diversity student initiative!

Screenshot of our Kiosk index page!

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.

Professor Katia Vega signing us in on Day 1 of the Faire.

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.

Left-to-Right: A visual explanation of merge conflicts. | Planning the layout of the Kiosk. | CJ tests out paper sizes for the descriptive placemats. | Planning the kiosk’s motion elements.

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.

Our UC Davis table, sponsored by CITRIS, with the kiosk displaying the Design for Diversity homepage

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.

Site map. All 10 projects were linked from and could return to the index page without use of the browser’s back button.

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.

The kiosk, displaying the Solace project, as well as several descriptive placemats and students’ work.

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.

When it’s 2am the design students get a little goofy.

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.

Setting up and stressing out.

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!)

Our uncooperative Pi hiding out behind the monitor.

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!

A panorama of stills from a Snapchat video post about our assembled booth. Yes, I learned the hard way. Remember to take horizontal photos!

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!

This menu might appear a little different if you have any extensions installed.

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?