Experiential Learning Through E-waste Constraints

September 19, 2019

Experiential Learning Through E-waste Constraints
By: James Pierce

Abstract

Electronic waste, often referred to as e-waste, is a global issue but is largely unknown to most people. It accounts for around 2% of all the waste in American landfills but represents 70% of all hazardous waste. In order to bring attention to this issue, graphic design students from Belmont University created designs for a large electronic display built from 55 old or partially broken tablet computers. The large display cycles through each of the student’s designs, creating one collective message. Not only do the designs bring awareness to the problem and address potential solutions, but the installation itself also demonstrates how new life can be given to old technology. This encourages the student to think about their role as a designer and the public as consumers of electronic devices in our digital culture.  The project is also designed to create a unique set of design constraints, forcing the student to find creative solutions to the visual problem. 

Methodology 

As designers, we should be conscious of the lifecycle of a project—what we produce and where it ends up once we are done with it. While it is easy to consider the lifecycle for a more traditional print-based graphic design project, we often do not think about the waste created from our electronic devices and digital culture. E-waste represents 2% of America’s trash in landfills, but it equals 70% of overall toxic waste (EPA 2011). As we have more and more electronic devices in our lives, this problem could easily get worse. 

As a part of Belmont University’s undergraduate Design Communication and Experiential Design BFA curriculums, our students are taught that design can be used to bring light to culturally relevant issues. In order to bring awareness to the issue of e-waste, the students were tasked with making public designs to be presented on a large electronic display. However, this display was actually made up of 55 old or partially broken tablet computers of various sizes and manufacturers. These tablets were mounted together to create one unified screen. The students’ e-waste designs were required to be informational, but they were allowed to focus on any aspect that was important to them. The finished installation piece cycles through each of the student’s designs, creating one collective message. Not only do the designs bring awareness to the problem and address potential solutions, but the installation itself also demonstrates how new life can be given to old technology, encouraging the student to think about their role as a designer and the public as consumers of electronic devices in our digital culture.  

The designer Charles Eames stated that “design depends largely on constraints” and one’s willingness to work within these constraints determines the success or failure (“Design Q & A with Charles Eames” 1972). This is in part why educators often apply constraints to projects to help foster creativity and critical thinking from their students. The e-waste project had a unique set of constraints given that the display was made entirely from tablets of different sizes, with various sized bezels, different color clarity, and many with cracked glass. This forced the students to find creative solutions to work around these constraints when creating their designs, with some of the most successful designs embracing these imperfections. 

From my past experiences teaching, I have found that students typically get the most out of a project when they have a personal stake in it—more than just a grade or a portfolio piece, but a sense that they have a say in the direction it takes. In an attempt to give these senior-level undergraduate design students ownership of the project and outcomes, the students were involved in some form during the creation and execution of the physical component of the project—not just their own designs for the screen. Specifically for this project, I wanted the students to feel that they were a part of something new and unique. They participated in planning, arranging, and constructing the wall of screens. Furthermore, I gave regular updates at the beginning of every class regarding the progress and setbacks in the development process of the software required to make the display work. This not only kept me accountable to the students, but I also wanted it to be similar to as if they were a creative agency getting regular updates from developers. Some aspects of the software were intentionally developed while the students were finishing their projects, which allowed their design decisions to influence the software’s functionality.

From a pedagogy standpoint, the project loosely followed the Experiential Learning Model (ELM) developed in part by David Kolb. ELM requires the students to actively participate in the process, reflect on their work, and make continual improvements to the design (Kolb 1984). In my implementation of ELM, after a student created a design concept, he or she should reflect on how it works within the unique parameters of the project, formulate new concepts, test and repeat. While this process is applicable to any design project, it was particularly important with this assignment as the students needed to test new concepts and make continual improvements to their layout after reflecting on the effectiveness within the design constraints. Through this process of testing new concepts, not only did the student designs improve over time, but also new functionality was added to the software powering the wall to serve the student’s collective design goals. 

The Build and Design Process

The first step of the build and design process was to arrange the tablets (fig. 2). The students worked together to place the tablets in a way that was aesthetically pleasing, while also considering how the placement could affect their designs. For example, I encouraged them to group a few of the larger iPads together where a natural focal point might occur, giving them more screen real-estate to work with when compared to areas that used tablets with larger bezels. The students also decided that they did not want the display to have straight edges along the sides so that it was apparent that the display was created from a lot of smaller screens. They also placed one tablet in the bottom right corner that drops down a little lower than the rest of the screens, allowing for a secondary focal point if their designs called for it (and a few students did make use of that tablet for extra information). Additionally, to cut down on the overall width of the tablet bezels, while also allowing for cable management, most of tablets were overlapped along the bezels (fig. 3–4). Once the positions of the tablets were finalized, the backing was cut to shape, holes were drilled for cable management, and the entire thing was painted black (fig. 5–8). 

Since the goal of the e-waste project was to create awareness, the installation was designed to be transported to different locations. In order to accomplish this, the wall portion of the installation piece is self-contained with all of the necessary technology and wiring accessible from the back. This top portion is mounted to a custom steel frame and base (fig. 9), which can be separated for easier transportation. The 120-pound base also counterbalances the otherwise top-heavy display. Portions of this base were made from recycled material. 

To begin the digital design process, students were required to make a template overlay for their designs by photographing the wall and then using Photoshop to mask out the area of the screens. This allowed the students to know where the bezels and gaps exist for this non-standard artboard. The students were allowed to use whichever design program best fit their visual objectives, as long as they kept this template on top (fig. 10–11). During progress critiques, we also used the overlays to evaluate roughly how the design would appear on the wall (fig. 12–14). Some student designs added a time-based element to it by either switching all of the screens between multiple images—similar to the concept of a flipbook—or utilizing animated GIFs on some of the screens. 

The final step of the design process was to export the designs at the proper dimensions determined by the number and arrangement of tablets. For our configuration, this was roughly 9,000 x 4,000 pixel. Students then made final adjustments to the designs as needed to ensure that everything aligned correctly when displayed.  

Contribution to the Field

In order to get one image to be split and synced across multiple devices, custom software was written for this project. One of the goals from the beginning of this project would be to create software that was open source and could be used by others. Therefore, the technology developed needed to be ubiquitous enough to run on the widest range of devices— everything from first-generation iPads, to a variety of Android-based platforms, and more. HTML, CSS, and JavaScript were selected to create this cross-platform solution as every modern tablet supports these web standards. Therefore, the technology requirements for the project would include three main components: a server, the screens (tablets in the case of this project), and a Wi-Fi network.

The server software was written in Node.js so that it could be run on a variety of devices, including an old Raspberry Pi for our project. The server’s primary purpose is to send and receive the socket commands for real-time updating of the screens, keep track of the X and Y position of each device, and to host the media. For easier deployment, the server software does not require a database, but instead the X and Y positions of the devices are stored in a JSON configuration file. The server software also has a few tools to help align each screen in the overall grid and to crop the images for the screens. 

To simplify the setup process, each tablet loads the same URL hosted from the Node.js server, but each device generates a unique token that is stored as a cookie on the device (fig. 15). This allows the server to know where this screen is located within the X/Y grid and handle the media appropriately. This technique is similar in concept to how visitors to a website can get targeted ads specific to the user, even though every user is visiting the same page. 

To create the visual effect of one unified image, each screen can accept a specific color, set by CSS, or an image. Support for audio and HTML canvas was explored but not yet fully implemented. Depending on the configuration, it is also possible to send one large image that is cropped within the web browser or send pre-cropped images to each of the screens respectively. The ability to process the images on the fly within the browser using CSS is useful for a small number of screens as it requires the least amount of work. However, for an installation as large as the one we created, that would require a roughly 36-megapixel image for each design to be sent to each of the 55 screens at once. This would cause unnecessary load on the server and network. Additionally, most of the older tablets do not have enough RAM to crop images this large within a web browser and would crash. In order to mitigate this issue, the server can crop the images ahead of time based on the device’s unique token and the JSON configuration file for the screen positions. When specifying a preprocessed image, the server automatically sends the correct cropping of each image and no additional CSS cropping occurs within the tablet. 

The only part of the project that required a vendor-specific solution was displaying the web page at full-screen on Android devices. The Apple devices could utilize iOS’s mobile web app feature. This allows a web app to function similar to a native app by hiding the user interface components for Safari[1]and is supported by every generation of iPhones and iPads. Unfortunately, not every Android device, including the large number of Amazon tablets that we used, had a full-screen option for browsing websites. Thus a very simple native Android app was written that simply loads a predefined URL in a `WebView` container in a full-screen mode.  For maximum compatibility among different Android vendors and versions, the app should be able to run on any Android-based tablet. 

Since this installation is intended to be displayed in different locations, a dedicated Wi-Fi network is an integral part of it, mounted behind the wall alongside the tablet power cables. This allows the wall to be moved to multiple locations without having to join a new network every time. Additionally, an old wireless router was kept from the landfill and used to create a hidden and password-protected network that is not on the internet. It is not a requirement that the tablets use a dedicated Wi-Fi network for the software, but the isolated network prevents the large number of tablets from potentially slowing down a wireless network used by others for internet connectivity. Being that the network is also hidden and password-protected, it helps prevent individuals from “vandalizing” the public display by loading other content onto the server. 

All of the software specifically developed for this project is freely available as open source code so that other universities, design agencies, and individuals can build their own multi-screen displays—whether it is from old technology that would have otherwise been discarded or newer screens to create a more polished look.

If you plan to build your own wall, there are a few things to consider: 

·     Scale: Start off small. The complexity grows exponentially the more devices you have as there will be more to configure and more that can go wrong—especially if you are working with old or partially broken devices with a variety of different operating systems.

·     Power: If you were to also use 55 tablets, that also means 55 USB cables, adapters, and outlets. In the case of this project, I used a USB power bank that could power 6 to 10 devices at a time. Surprisingly finding used USB cables was challenging and thus for this project and the majority of these cables were purchased new in bulk. 

·     Mounting: This project utilized industrial strength Velcro to mount the tablets to the backing. This proved to be quite useful as it allowed me to easily replace a defective device or access hidden cables behind the tablets. The overall display is attached to a custom welded steel frame by four large lag bolts so that it can be disassembled for transport.

Implications of Theory and Practice

Through the student’s visual designs, they not only brought awareness to e-waste, but the installation itself also demonstrates how new life can be given to old technology. This, in turn, encourages the student to think about their role as a designer creating content for digital devices. The display does not try to hide the fact that it is constructed from several dozen broken devices and hopefully this starts a conversation for anyone viewing it. 

The project will continue to live on within our department as a part of our Experiential Design BFA program. Future projects will build upon the successes and collective knowledge from previous students. The software specifically developed for this project is freely available as open source code on GitHub[2]so that others can build their own multi-screen displays—possibly even from old technology that would have otherwise been discarded. While the content of this particular project focused on e-waste, the technique does not require that the screens are old, damaged or even tablets. Future iterations of this project will add additional interactive functionality to make it more engaging and may also explore different topics in the future. 

Works Cited

“Design Q & A with Charles Eames.” 1972, www.youtube.com/watch?v=bmgxDCujTUw.

EPA, Environmental Protection Agency, 15 Mar. 2011, archive.epa.gov/epapages/newsroom_archive/newsreleases/2b721e26484eb12a85257855006acce5.html.

Kolb, David A. Experiential Learning: Experience as the Source of Learning and Development. Prentice-Hall, Inc., Englewood Cliffs, N.J., 1984.