Katie Davis-Sayles and Eduard Matamoros
Seattle Central College
Experiential Graphic Design as a new discipline is defining itself at the convergence of technology and evolving definitions of public and private space. The traditional line between digital and physical in the built environment is deteriorating as quickly as user reviews and blogs replace Rand McNally as trusted guides through urban landscapes.
This paper examines the processes and outcomes of an educational project designed to explore new ways of thinking about experiential graphic design and interactive design. Through the pedagogical approaches of these two distinct disciplines, undergraduate design students unified user-generated content, social media, and virtualized reality not only as wayfinding and placemaking techniques, but as means to build a hidden, invisible city with its own shifting circulation paths, monuments and narratives weaving through the physical landscape.
This paper is based on a multi-week project in the Graphic Design program of Seattle Central College, combining a course in Environmental Graphics with a course in Advanced Interactive Design. The students situated their designs within a fictionalized extension of Augment, an existing application that allows users to associate a three-dimensional model with any printed graphic, made visible with augmented reality through a mobile device. Working alone or in small groups, students developed interactive systems that demonstrated a) strong conceptual visual design skills rooted in user-centric principles from the Interactive Design coursework, and b) strong understanding of physical environments through maps, narratives, circulation paths and sightlines within an existing environment derived from the Environmental Graphics coursework.
The assignment was rooted in the principles of Project Based Learning, a method of creating educational experiences which allows students to learn by doing and applying ideas while engaging in real world activities that are similar to the activities that adult professionals engage in (Blumenfeld et al. 372).
This project incorporates five key features of Project Based Learning as identified by Savery (12-14).
- The responsibility for learning falls upon the students
- Problems to be solved must be ill-defined
- Learning should be cross-disciplinary
- Activities should have real-world value
- Collaboration is necessary
In the assignment, the students were required to develop a concept for a mobile app that fulfilled key features, but was otherwise undefined. At the time of the assignment, augmented reality stood out as a relatively new technology with a great deal of awe value and few mainstream functional applications. The majority of the students had never experienced augmented reality before the initial demonstration in class, affording them the opportunity to design for an emerging technology with a great deal of potential, but little preconception.
One of the more exciting aspects of this project was the opportunity for cross-disciplinary collaboration via the medium of augmented reality (AR). By definition, “[a]n AR system supplements the real world with virtual (computer-generated) objects that appear to coexist in the same space as the real world” (Azuma 34). While the fundamental assignment and the bulk of the work existed in the realm of Interactive Design, the end product itself existed in a hybrid of computer-generated objects and real-world considerations.
The students’ projects varied widely and included a taste-guided tour through a neighborhood brewery district (see fig. 1), a museum-curated narrative with Pacific Northwest flora and and fauna hidden in embedded floor graphics (see fig. 2), and a fitness application in which a trainer sent the user on a scavenger hunt for their next location (see fig. 3). All of the projects explored a system to incorporate a hidden, three-dimensional object within the physical world, creating a network of narratives and experiences within the given environment.
Figure 1. Mockup and screen excerpt of Crawler
Figure 2. Mockup and screen excerpt of FitNext
Some of the students designed applications to maintain control over the experience. For example, Forage: Date Night Curated is an app in which a final outcome, a recipe, ultimately guides the experience (see fig. 3). The user walks through Pike Place Market looking for graphic clues hidden within predetermined shops, and at each vendor, they purchase one ingredient for their “date night” meal. Halfway through the experience, they are led to a local restaurant for a local, romantic Pacific Northwest cocktail. This allows the chefs, vendors and venues involved to curate experiences for the user.
Figure 3. Screen excerpts from Forage: Date Night Curated
In the spirit of project based learning, the flow of coursework undertaken by the students mirrored a number of the stepwise facets interactive designers undertake when designing for the complexities of user experience. Experience design; more specifically, a user-centered model of experience design, seeks to better understand the goals, actions, and emotions of those using (or intended to use) the product at hand (Forlizzi 262). Students begun by crafting a prototypal user persona, i.e., an archetype of a hypothetical class of users representing the primary audience of the application. Further hypotheses regarding the needs of the persona were generated with various empathy-generating exercises. To better understand similar real-world mobile experiences available to the hypothetical persona, students undertook a series of heuristic analyses of related applications (Nielsen 30). Only when these artifacts of understanding were complete did the iterative process of design begin, instantiated with a series of sketches, evolved through a series of low- and high-fidelity wireframes (Garrett 128), and culminating in the creation of an interactive prototype (see fig. 4).
Figure 4. Screen excerpts from Agues
Concurrently, the students studied and demonstrated the steps that a professional environmental graphics designer would use to develop and communicate a realized project. From their hypotheses based on their user profiles and storyboards, they chose sites in Seattle in which to set their proposed narratives. Once a site was chosen, the students studied the site logic, decision points, circulation paths and the sightlines, further developing the experience based on existing urban conditions (see fig. 5). This functioned as the “Pre-Design” phase of the project, in which the students drew conclusions from the site and developed a plan to move forward, providing industry standard experience in developing a professional environmental graphics design (Calori and Vanden-Eynden 30).
Figure 5. Site maps for sample locations from FitNext
Once the first phase was completed, the students began to work on a “Schematic Design” phase of the project, in which the informational, visual and experiential foundations of the design were solidified (Calori and Vanden-Eynden 30). During this phase, they honed their hypothetical branding project, site logic, and heuristic analysis into visual concepts. The students created informational systems that guided the user from one location to another, communicated the brand of the application and developed a curated physical experience for the user (see fig. 6).
Figure 6. Mockup from Augmuse
The augmented reality portion of the project also provided the opportunity for the students to experiment with three-dimensional modeling tools. As in architecture and interior design, three-dimensional modeling is becoming increasingly essential to the practice of environmental and experiential graphic design. As the majority of the students only had experience with two-dimensional design tools, this assignment provided a practical application in which the students could gain a familiarity with industry related software (see fig 7).
Figure 7. Three dimensional augmented reality graphics from Forage
The students received basic tutorials in Rhinoceros 3D, a NURBS based modeling software. This software has several benefits for this application; the interface is relatively easy for new users to grasp quickly, it easily converts two-dimensional vector files to three-dimensional objects and it exports files easily into the Augment web interface. It also has the ability to export files into software used by professional augmented reality, virtual reality and mixed reality designers and developers, such as Unreal Engine 4, Autodesk Maya 2016 and Unity. While some students had little interest in working with three-dimensional software beyond this project, several of them used the opportunity to create complex models and use Rhinoceros 3D in subsequent projects.
Professional skills and technological applications aside, the largest benefit of this project was purely as an educational tool. Design for the built environment is difficult to teach over the duration of an eleven week quarter to students who primarily think and design in two dimensions. A number of the students struggle to visualize the problems and potential solutions inherent in experiential graphic design. This assignment gave the students the opportunity to develop experience in a site and immediately understand the scale and implications without the time and resources required for full-scale mockups. While augmented reality certainly doesn’t replace a fully developed and realized built design, it did provide an excellent, attainable case study within the parameters of the class.
Contributions to the Field
The assignment provided insights and tools to the field both on the pedagogical level and in practice. Augmented reality at this stage is still novel, amazing readers of the New Yorker (Mouly and Kaneko) and inciting visions of Obi-Wan speaking to all of us from our coffee tables (Lucas). Augmented reality is also working its way into the marketplace, transforming empty rooms into designed spaces, distilling complicated data sets with visualization techniques, and allowing products to float into the imaginations of consumers before any physical fabrication. It is inevitable that experiential graphic design will capitalize on experimental interaction between digital and physical. The field of environmental graphics simultaneously is required to ground itself in the real considerations of site, code, ADA specifications, structure, materiality and the basic laws of physics, all the while maintaining an agility in the face of reprogramming, rebranding, social trends and technologies that advance daily. With augmented reality, experiential graphics designers are given the opportunity to test and build gravity-less systems embedded in the existing architecture and urban environments.
In this tentative freedom from the weight of aluminum and fiberglass, experiential graphics designers have a new collaborator in the user-experience designer. Environmental graphic design has always been a collaborative field, juxtaposing the skills of architects, graphic designers, urban planners, interior designers, industrial designers, lighting designers, and fabricators – a list of disciplines dedicated to physical environments. As delirious as the field may be in its conceptual design, the process is bound by the persistence of the site plan. The user-centered model of experience design, seeks to better understand the goals, actions, and emotions of those using (or intended to use) the product at hand (Forlizzi 262).
User experience designers provide a perspective and design process that is less inhibited by physicality. The design process begins at very human scale, introducing a single user to target an idealized and individualized path to design with detail down to the pixel. As distances are measured in pixels and the site plan spans the palm of the user’s hand, the mobile interaction designer has the flexibility to experiment, iterate, and deliver on the goals, needs, and abilities at a near individualized level. Together we are able to deliver on Hassenzahl and Tractinsky’s perspective on user experience by building systems that transcend the physical, accounts for the motivations and needs of the user, and delivers dynamic, contextually relevant experiences (95).
Implications to Theory and Practice
“The creation of a situation means the creation of a transitory micro-world and – for a single moment in the life of a few – a play of events. It cannot be separated from the creation of a universal, relatively more lasting, environment…” (Debord and Constant 163).
Augmented reality and the methodology of this assignment provide the discipline with the opportunity to adopt a flexibility in both design process and in final product. For one, multiple graphic systems can be embedded into any one physical environment. Each system targets not only the needs of the user in the context of the environment, but adjusts to the emotional and situational needs of the user in addition to their physical requirements. Secondly, the systems that the students developed allow for curated, designed experience by one designer or organization, but they also allow for systems to be developed by other users, creating opportunity for community generated experiential designs.
As our mobile devices act as extensions of our eyes and brains, augmented reality is already tailoring our virtualized environments to our specific needs. GPS trackers nudge us from traffic congestion, restaurant reviews hover over our landscapes and geofences determine our closest happy hours. It is only a matter of time before devices and software can co-opt our views of the entire environment. Perhaps Times Square’s brightests will speak directly to your tastes. Or perhaps the billboards will melt away and Manhattan’s iconic facades will rearrange themselves to suit your moods and gently guide you to the next destination.
If the idea of a shifting advertisement-laden landscape is unsettling, the potential applications aren’t restricted to market applications. The students adeptly designed applications that allowed for experiences curated and applied entirely by other users. As three-dimensional modeling and augmented reality become more accessible and prevalent, the cities-within-cities model allows for scenarios in which guerilla artists hijack public murals, locals designing and share the destinations for their idea of a “perfect Sunday” and virtual installations overtake public gallery artwalks. These are all ideas developed by the students over the course of the quarter.
This project ultimately provided the students with the opportunity to develop industry relevant skills, test concept with an unfamiliar technology, explore physical space, and develop experiences for mobile app users. As virtual social networks continue to influence trends, markets and cultural behavior, this assignment and the idea of the embedded invisible cities provided the students with the opportunity to explore possibilities for the future of the built environment in the blurry domain between virtual and physical cityscapes.
Blumenfeld, Phyllis C., et al. “Motivating project-based learning: Sustaining the Doing, Supporting the Learning.” Educational Psychologist, vol. 26, nos. 3-4, 1991, pp. 369-398.
Calori, Chris and David Vanden-Eynden. Signage and Wayfinding Design. 2nd ed. Hoboken, NJ: John Wiley & Sons, Inc., 2015.
Debord, Guy and Constant. “Situationist Definitions.” Programs and Manifestos on 20th Century Architecture. Cambridge, MA: MIT Press, 1971.
Dull, Evan and David Lohman. “Crawler.” 2015. Adobe PDF file.
Forlizzi, Jodi, and Katja Battarbee. “Understanding Experience in Interactive Systems.” Proceedings of the 5th Conference on Designing Interactive Systems: Processes, Practices, Methods, and Techniques. ACM, 2004.
Garrett, Jesse James. The Elements of User Experience: User-Centered Design for the Web and Beyond. Pearson Education, 2010.
Hassenzahl, Marc, and Noam Tractinsky. “User Experience–A Research Agenda." Behaviour & Information Technology, vol. 25, no. 2, 2006, pp. 91-97.
Holderman, Katie and Megan Fisher. “Forage: Date Night Created.” 2015. Adobe PDF file.
Lambert, Joseph and Pani Fuladvand. “FitNext.” 2015. Adobe PDF file.
Mouly, François and Mina Kaneko. “Cover Story: Christoph Neimann’s ‘On The Go’.” New Yorker, Web, 9 May 2016.
Nielsen, Jakob. "Heuristic Evaluation.” Usability Inspection Methods, 1994, pp. 25-62.
Powell, Kate and Hannah Mintek. “Augmuse.” 2015. Adobe PDF file.
Savery, John R. "Overview of Problem-Based Learning: Definitions and Distinctions." Essential Readings in Problem-Based Learning: Exploring and Extending the Legacy of Howard S. Barrows, 2015, pp. 5-15.
Star Wars. Dir. George Lucas. Lucasfilm, 1977, Film.
Venturi, Robert, Denise Scott Brown, and Steven Izenour. Learning From Las Vegas. Vol. 102. Cambridge, MA: MIT press, 1972.