Design Currency

A Necessary Shift: Embracing Research and Front-End Coding for Experience-Centered Graphic Design

Graphic design practitioners are increasingly called upon to develop outcomes that facilitate experiences. A shift from print-based media into experience-focused design means that thinking, knowledge, and skills in interaction design, design research, and service design are often necessary. With this shift in design practice, design education must also change. This paper reports a curricular approach to experience-centered design where a “useful, usable, desirable” framework has informed the implementation of skills like front-end coding and research into the Graphic Design program at Miami University. Evaluation of this shift is based on data collected via interviews, observations, and student work samples. Recommendations for future curricular development are made in order to inform the shape of design education as it embraces issues of usability and function alongside the teaching of aesthetic that facilitates engaging user experiences.

In current graphic design practice, projects that start with a detailed brief and end with the delivery of a static, substrate-bound outcome are no longer the norm. Aided by the proliferation of screen-based media, a shift has taken place toward experience-centered design. With this shift comes a need for design education to evolve—teaching the thinking, knowledge, and skills necessary for this different way of designing.

As with any new endeavor, the groundwork for how to proceed is largely undefined. Based on the results I have seen from my own teaching experience, I propose that a valid framework for experience-centered design education can be built on what Liz Sanders termed “useful, usable, and desirable” design.1 In an effort to challenge design learners to address problems beyond the aesthetic, I have implemented this “useful, usable, and desirable” (UUD) framework into a range of learning experiences and courses in graphic and experience design at Miami University in Oxford, Ohio. Over the course of this paper I will explore the value of UUD and what I have discovered by implementing it into the ways I facilitate learning.

UUD: A Framework for Advancing Design Education

At the core of the UUD framework is an ideological and practical shift away from aesthetic primacy. The “desirable” of UUD has long been a quality of graphic design, representing the craft excellence designers espouse in creating persuasive and functional visual design outcomes. The importance of conceptually engaging, clearly communicative, and visually pleasing design is not being debated in this review of a UUD framework for design education.

A survey of literature in graphic design reveals that the importance of its “useful” and “usable” qualities have not been widely addressed. Jorge Frascara’s 1988 article Graphic Design: Fine Art or Social Science? called the impact of graphic design on society to the fore.2 In this article, Frascara challenged design education to teach graphic design in ways beyond style:

…teaching should represent all levels of the activity, that is, the emotional and the rational, the communicative, the technological, and the awareness of the social context. p.27

Frascara’s own work echoes this stance. Much of his research has been on the topic of design and healthcare, supporting his statement that designers should be socially responsible with their work. Don Norman’s November 2010 post “Why Design Education Must Change” at core77.com suggests that design education had still not satisfactorily heeded Frascara’s advice 22 years prior:3

In the early days of industrial design, the work was primarily focused upon physical products. Today, however, designers work on organizational structure and social problems, on interaction, service, and experience design. Many problems involve complex social and political issues. As a result, designers have become applied behavioral scientists, but they are woefully undereducated for the task. Designers often fail to understand the complexity of the issues and the depth of knowledge already known.

Norman addresses the “desirable” of design in his post, noting that “the need for styling will never go away” but he chastises design education for eschewing the teaching of human behavior, cognition, complex social systems and rigorous research methods in design curricula.

In 2014 a cadre of prominent design researchers, calling themselves “The Design Collaborative,” produced a statement titled: “DesignX: A Future Path for Design.”4 This statement was a charge for design to address social issues in designerly ways as well as ways of thinking and doing that are not as native to design:

DesignX aims to enhance the tools required to assist people, organizations, and societies in developing systems and procedures that address major human and societal needs. DesignX builds upon the design profession’s emphasis of thinking by doing, thinking by drawing, sketching, testing, and making coupled with intensive observational techniques, deep analyses of the entire system, and repeated, iterative testing, reflection and modification.

Based on the positions shared in these three articles, it seems that graphic design education has been reluctant or at the very worst, incapable of advancing with the social and technological challenges of the last 27 years. In each of these articles, the “desirable” quality of design has not been in question, but the thinking, knowledge, and rigorous attention to usefulness and usability has been identified as inadequate.

As a design researcher working in areas where design and human behavior, perception and action intersect, I agree with the stances made in the aforementioned articles. My professional experience in interaction and experience design have supported the stance that design education should address content in learning experiences that has not typically been addressed by design. Experience-centered design activates many of the skills and thinking processes involved in the production of print-based design. However, it also encompasses thinking, knowledge, and skills that extend beyond substrate-limited design.

Thinking and Skills for Experience-Centered Design

Interaction design includes the development, design, and testing of websites, web applications, smartphone apps, and other digital interfaces. In order to craft these final outcomes, a range of coding languages, computing equipment, and usability testing is involved. My teaching in interaction design includes the development, use, and application of:

  • HTML (markup language: page structure)
  • CSS (style sheet language: page styling)
  • JavaScript (programming language: triggered interactions)
  • SASS (scripting language: efficient page styling pre-processing)
  • Content Management Systems (CMS) (easy-to-use website backend, e.g. WordPress)
  • PHP (server-side scripting and programming language for customizing CMS-powered site structure)
  • Responsive Web Design (device-agnostic design to improve usability across multiple screen sizes)
  • Web typography (custom typefaces) This list is not intended to be inclusive, and doesn’t begin to address the tools and skills involved in the production of outcomes outside of web design

Experience design includes a broad swath of outcomes, including services, systems, and products. Because people perceive and interact with these very differently based on their worldview and situation, experience design is most often operated as an activity-centered approach to designing involving the study of human behavior, actions, and perception.5 An activity-centered approach to design allows designers to determine how to design outcomes that endeavor to be culturally relevant to the people for whom they are created. Experience designers employ a wide range of thinking, skills, and knowledge:

  • Design research skills, including ethnographic and qualitative methods
  • User experience testing
  • Heightened awareness of ethical and cultural concerns
  • Knowledge of the time-based ramifications of design decisions
  • Systems design thinking
  • Multi-sensory awareness
  • Knowledge of materials
  • Systemic approaches to design

Prototyping skills and iterative process are part of experience-centered design much like they are in print-based design. However, experience-centered design development utilizes linear and non-linear means of development that are not part of substrate-limited design. Prototyping for interaction design is most often done by coding HTML, CSS, and JavaScript6 and testing is conducted on a range of devices with users. Experience design development can include exploring intangible components like sound and lighting, developing affinity maps experience maps (often referred to as customer experience maps.7

Designing experiences requires learners to deepen their thinking, develop experience-centered design skills, and grow their knowledge. In response, design education must shift to teach these emerging sets of skills and focus thinking and knowledge generation toward human behavior. Based on my experience using a UUD framework for developing and operating learning experiences in graphic and experience design at Miami University in Oxford, Ohio, I have found it to be an effective means for facilitating learning necessary for experience centered design.

Program Context

Graphic design and experience design at Miami University is situated in the Department of Art in the College of Creative Arts. Courses in graphic design focus on visual and interaction design and students graduate with a Bachelor of Fine Arts in Graphic Design. At any one time, about 60 students are enrolled in the graphic design program as a whole, and each class is composed of about 20 students.

In fall 2014, a Master of Fine Arts in experience design was launched at Miami University. The MFA is a collaboration between the Interactive Media Studies program and Graphic Design. The first group of students consisted of five individuals whose professional experiences included computer science and graphic design. The MFA program is comprised of courses that address activity-centered design research, user experience testing, human factors, marketing, computer programming, visual design, and innovation studies.

UUD In Action

I have operated UUD in two different ways at Miami University. The most common approach has been the development of specific learning experiences for undergraduate design courses. However, in two interaction design courses, it has served as a semester-long method of inquiry. In these courses, interaction design has been approached as a “usable” focused activity where the design of websites has started with coding languages. In total, learning experiences that are based on the UUD framework have been facilitated 12 times over a period of two and a half years at the undergraduate and graduate level. In order to share the results of this work, I will separate these learning experiences into the useful based and usable based components.

Useful

Questions of usefulness are “meaning” questions. In order to determine what to design, answering questions of what matters to target audiences is essential. As design becomes increasingly experience-focused, it is important that designers become adept at asking and answering questions of what is meaningful to people, in order to reveal opportunities for the development of innovative outcomes. In order to reach these answers, it is important for learners to develop the thinking, skills, and knowledge that will allow them to observe and study human behavior as they seek what matters to people.

“Usefulness” is at the fuzzy front end of the design process. Often, problems become clearer as questions are raised and design outcomes are developed.8 A “usefulness” approach to designing can introduce unfamiliar ways of thinking and doing for learners. In an effort to address these, I have developed and operated learning experiences that challenge learners to broaden their perspective on design.

The People-Driven Design Sequence In fall semesters, learners complete the People-Driven Design Sequence in my Applied Interaction Design course. This project is a set of two studio assignments designed to challenge learners to develop and design outcomes by starting with people first. Learners are not given an assigned outcome, rather they must base the outcomes they design on what they learn and extrapolate about a constructed persona.

During the first class period for this assignment, each student builds a randomized, unique persona by blindly selecting slips of paper from piles that are organized by persona aspects. These include:

  • Age
  • Gender
  • A year when the person lived
  • A place where the person lived
  • An interest or hobby

Because these piles could render 75,287,520 possible combinations, it is highly unlikely learners will receive the same persona that someone else has created in the past. The results of this experience have created personas like:

  • A 30 year-old woman living in Montpelier, Vermont in 1865, interested in carriages
  • A 9 year-old boy who likes baseball and lives in Provo, Utah in the year 1880
  • A 21 year-old male in 2015 living in Las Vegas, Nevada who is interested in perfumes

Learners research each aspect of their assembled persona. Based on this research, learners determine what kind of design outcome would help enhance or improve the life of their fictitious person. This process has prompted discussion where questions arise like:

What would a boy who liked baseball in 1880 in the west really enjoy?

How could a young man enjoy both the Las Vegas experience and perfume at the same time?

What would a 70 year-old woman need to keep quilting in her older age?

Questions of meaning became the center of studio discussions for weeks, growing learners’ abilities to think deeply on meaning.

In response to the process of questioning, thinking, and discussion, learners develop and design physical products, environmental design, branding, and an array of other outcomes, all driven by the needs of a fictitious person. No outcomes are pre-defined, so learners decide on outcomes and present rationales for them based on the aspects of their persona. Some examples of outcomes include:

  • A series of United States Civil War posters that could be put up in carriages to show support for the Union army
  • A deck of baseball cards that featured outlaws of the western United States in the 1880’s

For the second phase of The People-Driven Design Sequence, learners hand their design work and persona over to another student in the class. For this step, a second design learner designs a web site and smartphone app that extends the initial design outcome into the digital space. One product of this process included a United States Civil War tracking app that allowed people to check in on and support Union troops during the war.

The People-Driven Design Sequence has proven to be successful for sparking studio conversations on meaning, human perception, and behavior. The work learners produced was aesthetically desirable and usable and they responded favorably to the assignment, with most of the class sharing that it was their favorite project of the semester. But the project’s greatest strength has been how it challenged learners to conduct research, decide on an ideal outcome, and support that outcome with rationales that reveal the depth of their thinking.

Pet Peeves Project

This project is operated in Highwire Brand Studio, an interdisciplinary course comprised of marketing and graphic design students, co-taught by design and marketing faculty. Over the course of the two-week long Pet Peeves Project, learners develop field research skills and learn how research informs the design of outcomes. Learners work together in groups of three or four to identify and select a pet peeve that serves as the subject for their project. Each group is allowed to address any pet peeve they wish, from personal nuisances to offensive or dangerous behaviors. Examples of past pet peeves includes:

  • People in weight circuit rooms who check their cellphones too much and impede others’ workouts
  • People who are inconsiderate and block other pedestrians on walking paths during class changes
  • People who do not empty the lint tray in clothes dryers and as a result cause a fire hazard

Each group researches their selected pet peeves using qualitative and quantitative research methods. Learners are required to take a human centered approach to design, observing the interactions, environments, and workings of each of their pet peeves including the perceptions, and attitudes of the people involved. Groups present their findings to the class at each meeting and are required to support their claims with evidence. These sessions are an opportunity for instructors to highlight when learners lean on their own assumptions or personal feelings instead of remaining objective.

As learners become more familiar with the complexity of their problems via research, they start to determine potential solutions. These solutions are repeatedly reviewed through a lens of usefulness, by comparing them to the identified pet peeve. Gathered evidence reveals what “useful” would mean for the people being studied, and the evaluation of solutions includes a review of their success at considering the needs of the affected people. At the culmination of the two weeks, learners work iteratively to produce a proof-of-concept solution for their selected pet peeve. Learners present their solutions, with special attention to justifying its efficacy and usefulness based on the evidence they gathered via primary research.

By the conclusion of the project, learners become accustomed to presenting their solutions using statements like “we recommend this solution because of what we found through our observations…” These habits continued through the semester. When working on the main project for the course, several learners felt comfortable shifting solution directions because the evidence they gathered disproved their own assumptions. Also, learners have shown to consider usefulness as a criterion throughout their semester work when before Pet Peeves Project it was not voluntarily considered. Based on the project’s success in meeting its learning objectives, Pet Peeves Project has become a permanent component of the Highwire Brand Studio course.

Usable

The concept of usability is native to experience-centered design because one of its essential properties is interaction with people. Regardless of the media, be it digital, product, or service design, interactive design decisions promote or inhibit usage at many levels. The fact that the design of an experience-centered outcome can possibly block access and frustrate users means that designers should be as mindful of the usability of an outcome as they are its desirability. Different scenarios of use and different abilities of users means that determining the usability of a design can be very difficult to anticipate.

When learners are mindful of factors that affect usability and they learn to test high-fidelity prototypes, they are more likely to make design decisions that will promote usability. In interaction design, high-fidelity prototypes take the form of fully coded interaction design work. Paper prototypes and wireframes are valuable in interaction design; however, functioning sites allow usability to be tested natively, across a wide array of devices. This type of testing allows questions like “does it work, and how well?” to take place—challenging learners to inspect their designs critically.

I have adopted a high-fidelity prototype model for teaching interaction design, not only so outcomes can be tested, but more importantly so design learners can understand how website elements behave and the “nuts and bolts” of front end code. This allows learners to develop visual interface designs that are based on the constraints of the medium while equipping them to communicate with programmers using a common code language.

Interaction Design Coding

Since 2013, I have been teaching interaction design with front end coding languages like HTML, CSS, and JavaScript being the primary tools for design. In order for design learners to develop complex, fluid, high fidelity websites that enable usability testing, knowledge of coding languages is necessary. Websites and web applications are kinetic—their boundaries change significantly depending on the context in which they are viewed. In order to more clearly understand usability, fully functioning sites are necessary.

This approach has effectively demonstrated the importance of usability in my courses. During the semesters I have taught interaction design this way, students have shared positive feedback about their learning experiences. Some students have demonstrated empathy for the people who would someday use their interaction design outcomes. One student critiqued their own interface design in class and realized they had limited users from navigating their site freely. Their reflection on this fact included the statement:

“…the user might want to go directly to another page and they should have that option.”

Students have also demonstrated an ability to anticipate website design behaviors, thanks to their deep knowledge in front-end coding. I once overheard a learner critiquing the structure of another’s site, inquiring how the site would behave on mobile device screens:

“looks good…but what’s it going to do when you go responsive?”

Over the course of the semester, learners go from designing a web page that says “Hello World” to a multi-page, fully responsive portfolio website that includes interactive elements. They have shown they are familiar enough with code that they can review others’ work, dissect it, and typically know where to look to diagnose problems. This approach has grown learners’ ability to think critically. Learners make small changes to code and correlate these changes to how they affect the visual interface. They also encounter usability issues when testing sites across multiple devices, and work to resolve these issues systematically.

Even if learners no longer write front-end code in their careers, they are more familiar with the “physics” of interaction design. They learn “how gravity works” in web design which means the visual interface thumbnails or comps they create are based on a real, working model of what will work when coded. These designers are also able to communicate with front-end coders and programmers more easily thanks to a shared knowledge of front-end-coding. This reduces barriers between members of interaction design teams, encouraging collaboration.

Each time I facilitate interaction design learning that incorporates front-end coding, I learn more about what level of instruction is needed for this approach. One example of this was a decision to implement SASS (Syntactically Awesome Style Sheets) into my teaching. Basically, SASS is an extension of CSS that introduces tools for writing visual styling that mimic the formatting styles and global colour swatches in Adobe InDesign and Illustrator software. I teach SCSS, which is a syntax like SASS that allows CSS and SASS formatting to be written the same file. While implementing SCSS adds complexity to the process of teaching and writing visual styling, it adds functionality that supports the production of highly complex interaction design outcomes like those learners will be expected to work with during their careers. Initially, I implemented SCSS late in the semester, but found its complexity was not as much an issue as I expected so I moved its introduction to early in the semester to allow more time for application and experimentation. In order to lower barriers for learners when developing custom WordPress themes using PHP, I developed a starter theme called QuickTheme that reduces time spent learning complex PHP and enables students to quickly implement working, template-based websites. After operating several semesters of this approach I have reduced complexity expectations in some ways in order to enable learners to excel at more significant aspects of learning code. In all, learners practicing and exploring a usability perspective when designing has been a benefit of this approach and it stands as a chief rationale for continuing teaching front-end coding in interaction design.

UX in the Wild: Shopping User Experience 

Experience-centered design employs physical space and product design that are best experienced in person. In order to provide an opportunity for learners to engage with experience-centered design and also practice observation skills, I operate a one day field trip where students observe shoppers in two very unique shopping experiences in the Cincinnati, Ohio area: Jungle Jim’s International Market, and IKEA. UX in the Wild: Shopping

User Experience posits that retail stores are like user interfaces in websites. Design decisions made in stores and websites block or inhibit flow through space, they present a manifestation of a brand, and they invite interaction between humans and interface (where shelves often serve as the interface of a store). This field research trip was first operated in the spring 2014 semester with first year graphic design students enrolled in the Fundamentals of Interaction Design course and takes place every year.

Between 9 a.m. and noon on a Saturday, our group visits Jungle Jim’s International Market and IKEA. Comparing Jungle Jim’s and IKEA reveals a stark contrast between the stores product offering, environmental signage design, store layout, and entrance design. This presents opportunities for class discussion on how design affects student and shopper decision-making. At the conclusion of the field trip, the class meets to share observations and insights that come from the experience.

Jungle Jim’s is a warehouse-like store that spans 200,000 square feet in size. The store features grocery items, fresh produce, meats, fish, and bakery goods from around the world. Food items are grouped by nationality and store decorations reflect each nation’s cultural heritage. Pricing signs are bright yellow and are hand-written. The front entrance of Jungle Jim’s can be difficult to identify as there are multiple entrances and none takes visual prominence over the others. The store feels like an amusement park, with animatronics in different sections that move and make sounds to liven up the areas they feature.

IKEA is a furniture designer, manufacturer, and retailer founded in Sweden in 1943 and is known for stylish, affordable design.9 IKEA stores have very clear design aesthetic and layout that privileges a limited colour palette. Item labeling and signage throughout the store is consistent, utilizing the Verdana typeface, and a rigid store design guides shoppers through the store in an orderly fashion. The front entrance of IKEA features a dominant blue facade where a large bank of doors and letters spelling “entrance” in red focus users’ eyes on where to enter, visible from the parking lots that surround the store.

A sheet of discussion prompts is given to learners before UX in the Wild: Shopping User Experience to guide their thinking about different aspects of the stores. These prompts highlight physical space design as well as human behavior. During the discussion that follows the store visits, learners have shared observations of how other shoppers behaved in each store, making connections between observed behaviors and conclusions based on evidence. Participants have learned to broaden their perspectives, identifying physical and non-physical aspects of each store as being factors that affect shopping experiences. These have included aisle width, the size of signage typography, employee uniforms, music, and lighting.

The details and discoveries shared after the store visits have revealed that the experience is effective in encouraging students to make correlations between design decisions and their effects. As I have been revising experience-centered design curricula, I have seen an opportunity to apply the learning from this experience more directly into other assignments in later classes, shedding new light on usability. I believe doing so will help to cement the lessons learned during it and can continue to challenge learners to consider the agency of intangible components in experience-centered design.

Adaptable People

As designers are increasingly called upon to design interactions, services, and experiences, the development of curricula that equips learners to thrive and to lead this design evolution is important work. The useful, usable, desirable framework has served as a set of guiding principles that have helped to keep learning objectives in balance. It has focused the way I facilitate learning for the development of learners’ thinking, skills, and knowledge. This does not replace high quality aesthetic in design; instead it honors the visual by increasing the levels of thinking that go into producing design outcomes. In short, design is more rigorous when it has multiple dimensions.

Training designers to be primarily aesthetic or focused on only one dimension of design locks them into one way of thinking and doing. This approach impedes their ability to be adaptable.10 The UUD framework challenges learners to develop the kinds of thinking, skills, and knowledge that comprise the growing area of experience-centered design. As design continues to evolve, design educators have a responsibility to empower learners to thrive, and approaches like the useful, usable, desirable framework are worth our attention in this changing space.

Notes

  1. Elizabeth B. Sanders, “Converging Perspectives: Product Development Research for the 1990s.” Design Management Journal 3, no. 4 (1992): 49–54
  2. Jorge Frascara, “Graphic Design: Fine Art or Social Science?” Design Issues 5, no. 1 (Fall 1988): 18–29
  3. Donald Norman, “Why Design Education Must Change.” November 26, 2010. Accessed October 2, 2011. http://www.core77.com/posts/17993/whydesign-education-must-change-17993
  4. Ken Friedman, Yongqi Lou, Donald Norman, Pieter Jan Stappers, Ena Voûte, and Patrick Whitney, “Design X: A Future Path for Design.” November 2014. Accessed August 20, 2015, http://www.jnd.org/dn.mss/designx_a_future_pa.html
  5. R/GA. “Experience Design.” Accessed September 9, 2015. http://www.rga.com/about/departments/experience-design/
  6. Khoi Vinh, “The Tools Designers Are Using Today.” September 10, 2015
  7. Chris Risdon, “The Anatomy of an Experience Map.” November 20, 2011. Accessed September 11, 2015. http://adaptivepath.org/ideas/the-anatomy-of-an-experience-map/
  8. Stefan Wiltschnig, Bo T. Christensen, and Linden J. Ball. “Collaborative Problem–solution Co-Evolution in Creative Design.” Design Studies 34 (September 2013): 515–42
  9. B.V., Inter IKEA Systems. “History—Ikea.” 2014. Accessed June 6, 2014. http://www.ikea.com/ms/en_AU/about_ikea/the_ikea_way/history/
  10. Gunnar Swanson, “Graphic Design Education as a Liberal Art: Design and Knowledge in the University and the ‘Real World’,” In The Education of a Graphic Designer, edited by Steven Heller, 22–32. New York: Allworth Press, 2005

Originally published in GDC Journal #7, 2018

Dennis Cheatham

Dennis is an Assistant Professor of Graphic Design at Miami University in Oxford, Ohio where he serves as a Graduate Director of the xdMFA program in Experience Design. His research explores how design thinking, processes, and outcomes affect, and are influenced by human perception and behavior on a systemic level. Prior to his academic appointment, he practiced design professionally for fifteen years as a creative director, graphic, interaction, and experience designer across a wide range of contexts in the Dallas/Fort Worth area.

—

Looking to contribute to the national conversation and elevate the Canadian design communications profession? Submit your article to our editorial team: designcurrency@descan.ca