iDMAa

International Digital Media and Arts Association

Job Postings »

V9N1: Teaching Mobile App Design + Development

By Dene Grigar | June 20, 2013

teaching 1with John Barber, Will Luers, Michael Rabby, Aaron May, and Brett Oppegaard; at the Creative Media and Digital Culture Program; Washington State University, Vancouver.

About 350,000 mobile apps have been released since May 2011, and more than 77% of the people in the world now have mobile devices. About 5 billion dollars are projected to be spent on mobile advertising during the next five years. Those statistic are among the many to suggest that just as web design emerged as the territory to explore in the mid 1990s, app design constitutes the one to study today. Yet because of the newness of the field and the fact that much of app development has generated from commercial and a “DIY” sensibility, teaching app design and development is not yet common in academic institutions.

This growth in mobile media and the dearth of pedagogical models prompted the faculty of The Creative Media + Digital Culture Program at Washington State University Vancouver to work together to find ways to integrate the teaching of app design and development into its curriculum. This move led them to create the Mobile Tech Research Institute (MTRI), a summer program that provided both undergraduates and faculty an opportunity to learn together how to work in the mobile medium but also gave faculty the imperative to build curriculum, pedagogies, and methodologies for teaching app design and development from the ground up. What we learned from that experience may be of interest to other digital media scholars and artists. Thus, this essay provides information about curriculum design, class projects and activities, technical requirements, teaching resources, and partnerships.

Part 1

Getting Started: Conceptualizing a Program in App Design and Development

At the outset, we envisioned the MTRI project as a twoyear initiative that would involve a partnership between the university and the Southwest Washington region. In that regard, we imagined that if we could begin a systematic teaching of mobile media in our program and provide support for students with good ideas for app development, we could, in effect, help to rebuild the region’s poor economy through this new, creative, green industry (See Fig. 1). To facilitate this vision, MTRI was originally conceptualized to contain four components: 1) a “Research Forum” that would bring in seven scholars and industry professionals in the area of mobile technology to work with community and students to develop local industry and projects, respectively; 2) “Coursework” in mobile app design and development for top undergraduates leading to the production of an app that would be used by regional non-profits and government; 3) “Training” in an 51 Entrepreneur Incubator program that would provide support for students to create and market their own individual app projects; and 4) “Collaboration” with a Mathematics Engineering Science Achievement (MESA) program where participants in an Entrepreneur Incubator would mentor and inspire K–12 students to pursue STEM-based careers. Because The CMDC Program has a strong community outreach tradition, the faculty developed the project so that the research questions we would seek to answer in the design and development of our app would be those needed by the larger Southwest Washington community. Thus, the 2011 Research Question was, “In what ways can mobile apps be created to improve services relating to health, education, culture, and art? What would such a tool look like?” The app we imagined building for that focus would have been one created for the county health office, the local school district, or a large arts organization. The 2012 Research Question asked, “In what ways can mobile apps be created to make government more responsive to constituents? What would such a tool look like?” This app would have been produced for our city or county, both of which did not yet have this kind of technology available for its constituents.

teaching 2

Figure 1.
The MTRI Plan

As a faculty without a graduate program, we were also looking for ways to interact with others undertaking research in this area, so that we could stretch our knowledge and understanding and share information we have about multimedia design and development. Some of us were already working on mobile projects. For example, Brett Oppegaard had begun the Fort Vancouver Mobile project in 2010 and had co-authored, with Dene Grigar, the National Endowment for the Digital Humanities Start-Up grant funded a few months later. Will Luers taught webbased app development in his web coding course. John Barber taught usability and interface design in his class and had been working with student groups to develop an app for the CMDC Program. What we needed, though, was a formal gathering, a research forum, that would provide us the opportunity to explore effective ways to integrate app technologies into culture and to examine what it meant to do so. Thus the “Research Forum” aimed to bring a combination of national thought leaders and local community leaders to campus to meet these two needs. We imagined that such a forum would inform the second step in our plan: “Coursework,” a cohesive approach to teaching of app design and development. We imagined that the courses would take place during the summer during the two six-week sessions and knew we needed to select top students with strong coding and designing skills in order for the plan to be successful. The students taking these courses would, then, create a mobile app based on the “Research Topic” identified for that year. “Research Forum” fellows were envisioned as mentoring students during the week-long forum and evaluating the proof-ofconcept version of the project at the end Summer Session I; we also imagined that the Research Forum fellows would continue to guide students during the “Entrepreneur Incubator” period in readying individual projects for market. We also realized that if we were, indeed, going to build an entrepreneur culture in the region, we would have to provide an incubator component to provide the initial infrastructure needed to be successful. Thus, we sought out and found collaborators in the College of Business who agreed to oversee this component of the project. We also invited MESA (Mathematics Engineering Science Achievement), an organization that promotes STEM (Science, Technology, Engineering, Mathematics) education to underrepresented students in grades K-12, to work with us so that our students would themselves become mentors and, ultimately, seed future participants in MTRI. Finally, we imagined an Equity Participation approach to the overall structure, meaning that projects generating from Entrepreneur Incubator would contribute a percentage of profit to MTRI to aid the program in becoming self-sustaining. With this structure in mind, we began to shop the project to potential funders. All in all, we conceptualized MTRI as a broad, collaborative, visionary initiative that would require a lot of support.

Unfortunately, fall 2010 was a difficult time to raise money in our region. Few businesses or individuals had extra funds to donate to nonprofits since they themselves were fighting for survival. Clark County, where the university is located, lost approximately 3,600 jobs in 2010, and the unemployment rate rose two percentage points, taking the rate to a high of 14.8 percent (“We’re Still Hurting”). Median income dropped six percent during the economic downturn (“Median Household Income”). At the same time, tuition at state institutions was rising as the economy was falling. Tuition for WSU students had gone up a total of 26 percent in two years, making it even more challenging for our students to attend school and more necessary for us to find scholarships for them. From October 2010 to March 2011, we spoke to community and government leaders about funding but to no avail. Hearing about our idea through our tech support manager, Aaron May, however, the owners of Dick Hannah Dealerships stepped in and donated close to $68,000 for the “Coursework” component of the MTRI project. This donation provided 10 students with the opportunity to become “MTRI Fellows” and to receive tuition funding for a full summer, amounting to over $6,000 per student. The donation also covered the cost of students’ books, course fees, and field trips associated with the MTRI project. Faculty decided that students would make two apps during the project: the first would be a free customer care app for the Dick Hannah company; the second would be an app for a local nonprofit arts organization. Faculty continued to look for funding for the other three areas of our plan, but by April we realized that we would have to concentrate solely on teaching app design and development, leaving the research questions for us to wrestle with among ourselves and the incubation of future app development businesses to our program to nurture.

As faculty were developing a large-scale vision of the MTRI plan, it also was working to develop the intellectual infrastructure needed to implement it –– that is, the curriculum to include in the project, faculty to teach the curriculum, and students able to meet the challenges that advanced design and development brings. Because creating apps entails front end design, back-end coding, testing, and content development, it was obvious at the outset that it would not be one course needed to teach mobile app design and development but four. Luckily, our program has these courses already in inventory, and faculty able to teach them each semester. But in order to teach students how to create mobile apps, even with these courses already available to us, we faced two challenges: First, we knew that it would be hard, if not impossible, to put these four courses together in a special cluster of intensive study, and then ask faculty to commit an entire summer of teaching and learning, and require students to take a full load of classes during both summer sessions; second, our courses had been originally conceptualized for desktop web environments and, so, some of us had never taught mobile app design and development and did not know exactly what resources were available or how to do it.

The courses we identified as the four to teach in a mobile app design and development cluster were: DTC 336 “Design and Composition,” DTC 478 “Usability and Interface Design,” DTC 477 “Advanced Multimedia Authoring,” and DTC 338 “Special Topics in Digital Technology & Culture.” None of these courses are found in the required core for the major but, instead, are electives students can choose to take as part of the B.A in Digital Technology & Culture. The fact that these courses function as options for students gave us freedom to reconceptualize them so that they would provide a good understanding of theories and methods of design techniques, testing, special multimedia features, and the various languages needed for both Apple and Android apps. Additionally, DTC 477 and DTC 478 require the prerequisite course, DTC 355 “Multimedia Authoring,” meaning that students involved in the MTRI project and taking this course cluster would have already learned HTML5 and CSS3 and had already produced multimedia content for the web. The DTC 338 “Special Topics” designation allows us to teach a variety of subject matter and made it possible to orient the class toward “The Development of Apps for iPhones and Androids” for the summer cluster.

We grouped the courses in two pairs, one for each summer session. This meant that each half of the project would last six weeks and that we had exactly 12 weeks to teach how to make apps and actually make two of them. It seemed to us that the first summer session should focus on design and the second on development. Pragmatically, we envisioned students learning about design requirements, including app aesthetics and Apple and Android design protocols, as well as content planning, so that at the end of the first summer session, students would complete a prototype and wireframe and produce a design standard for their apps. The second session would see these same students continue with the project by coding the apps and adding content to them. Faculty weighed in on the course curriculum and course schedule, developing the program into a cohesive summer study that involved this structure:

Screen Shot 2013-06-20 at 9.27.06 AM

Faculty understood that the commitment to teach in MTRI assumed with it a commitment to retool ourselves, essentially becoming learners alongside our students. The challenge, however, was not an interest in expanding our knowledge into the mobile medium and learning all aspects of creating for the mobile medium; rather, as mentioned previously, it was undertaking such an exploration during an entire summer when we normally would be working on individual research projects. But we recognized quickly the benefits that MTRI could offer us. It is worth mentioning at this juncture that, as a faculty, we have adopted “action research,” as one of our main research methods. Action research is a “systematic enquiry conducted though the medium of practical action, calculated to devise or test new, or newly imported, information, ideas, forms, or procedures and to generate communicable knowledge.” It offers three different approaches (Research into/about Design, Research for Design, and Research through Design) and suggests “that practice and research [can] establish an effective liaison under specific circumstances” (Vannotti 51-60). Put simply, action research allows us to put design at the center of our research and suggests that mobile apps are not merely things we study but rather the reason for our exploration. Our work with MTRI has led to an invitation for all of us to teach at a Digital Humanities Summer Institute in Victoria, Canada in 2012 and publish articles and give presentations on methodology, pedagogy, and development in academic journals and conferences, respectively.

But while faculty were in agreement that MTRI would be worthwhile to pursue for both our research and teaching, we still needed to develop an incentive for convincing students, who generally need to work full-time in the summer in order to attend the university in the fall and spring, that spending the summer going to school all day every day for 12 weeks would be beneficial to them. Scholarships helped to make our case.

As mentioned previously, Dick Hannah Dealerships donated close to $68,000 for the “Coursework” component of the MTRI project, enough money for 10 students to receive funding for full summer tuition, books, course fees, and field trips. The faculty organized the project so that we would grant this funding to 10 top students in the program and, thereby, provide summer “fellowships” to these students. They would, in effect, become “MTRI Fellows,” and the fellowship would serve as an honor as well as an incentive. It is important to emphasize that even in the best economic times, Southwest Washington is not a wealthy area, and a high percentage of our students are first-generation college students. This understanding means that all students are “needs-based students” and, so, “excellence” figured as the main criteria faculty used for selecting students for MTRI. We drew from our courses those students who produced the best work in multimedia design, coding, content development, and project management/ teamwork. Out of the 175 undergraduates in our program, faculty issued invitations to 10 to join MTRI. All accepted. We also decided to invite a faculty member on leave from the University of Southern California to join us as a post-doctoral fellow, and a staff member to assist as well as a post-baccalaureate, as a way of stimulating deep discussions of mobile theory and developing potential new instructors and consultants within our program. Other staff members and additional faculty joined us, too, due to the high interest in learning about mobile media. The incentive to learn mobile app design and development, to be chosen for a select group from among peers, and/or to receive full funding for an entire semester of coursework resulted in a dynamic learning community.

Figure 2.  MTRI Fellows and Faculty

Figure 2.
MTRI Fellows and Faculty

In the fall of 2010, when we began planning for MTRI, no textbooks existed that directly addressed the mobile medium. More than a year later, the first few academic books on this subject emerged, including Jason Farman’s Mobile Interface Theory, and Jo Groebel, Eli Noam, and Valerie Feldmann’s Mobile Media: Content and Services for Wireless Communication. What source material faculty did have access to while planning for MTRI, though, were non-academic resources on mobile app design and development that offered a commercial perspective. Our literature review turned up books such as Robert Hoekman’s Designing the Obvious, Ken Yarmosh’s App Savvy, Steve Krug’s Don’t Make Me Think, Cameron Moll’s Mobile Web Design, Jonathan Stark’s iPhone Apps, Vandad Nahavandipoor’s iOS4 Programming Cookbook, and Josh Clark’s Tapworthy. We adopted these and included others that we had used in our courses, such as Dan Cederholm’s CSS3 for Designers, Jeremy Keith’s HTML for Designers, and James Bennett’s Design Fundamentals for New Media. But knowledge gaps still existed not even addressed in articles and essays that we found.

One illustrative example of such a gap that Grigar confronted in DTC 336 “Design and Composition” focused on app aesthetics. The truth of the matter is that there is really not much in the way of good material to use for teaching aesthetics for web-based multimedia design and development, so it was not surprising to any of us that nothing yet existed on this subject for apps. Commercial publications center primarily on usability— how apps work for users, how users navigate information, and how they interact physically with the interface or computing device. Missing are discussions of the ways in which color functions in mobile environments, the fact that texture is essentially useless in environments where such little real estate is available, and that shape provides a strong focus for getting across concepts, style, and message. Put simply, Grigar had to figure out for herself that, despite what may seem a direct parallel, apps are not miniature works of art but, rather, something else. And the aesthetic underlying that “something else” had to be learned by thinking about the affordances and constraints of the mobile environment and getting her hands dirty making apps. To do this, she had to realize that her course material was essentially provisional (thus, be willing to make mistakes in class, since learning about apps was taking place while she was teaching it). These experiences mirrored earlier design and redesign efforts on the Fort Vancouver Mobile project she and Oppegaard were involved in, in which best-practice benchmarks were first established in the workshop but, then were improved and refined through implementation and testing in the field as a generative and iterative process.

Part 2

What We Taught (and Learned Along the Way)

Teaching app development requires bringing together a set of tools and practices that are still in evolution. Every few months, new software arrives to challenge existing methodologies. Undoubtedly, by the time these words are published, certain obstacles will have been overcome by upgrades to existing software, or a new software package, such as Apple’s “iBook Author,” will alter the current market of interactive products. The challenge for educators is to find functional tools that students can learn relatively quickly so that the work in the class can go directly into the conceptual, practical, and collaborative aspects of app design.

As mentioned, the courses in the MTRI project were organized into two summer sessions with design as the main theme of the first, and development of the second. Thus, DTC 336 “Design and Composition” and DTC 478 “Usability and Interface Design” were followed by DTC 477 “Advanced Multimedia Authoring” and DTC 338 “Special Topics: App Development for iPhones and Androids.”

DTC 336 “Design and Composition,” according to the uni- 55 versity catalog, teaches “design practices and processes for composition for a multimedia environment, including color, pattern, and shape.” This broad view lends itself well for designing for mobile environments. Because all courses in the CMDC Program combine both theory and practice, students in DTC 336 read about concepts underlying design and composition for multimedia digital environments and produce work using Adobe PhotoShop, Illustrator, GarageBand, Audacity, iMovie, and Final Cut. The MTRI project built upon this established approach and asked students to produce the prototype for a mobile app, including its wireframe, which would be developed with content and coded during summer II, so that it would be ready for delivery in mid-August. Assessment was based on four activities: The design and composition of the App Prototype, which was worth 50 percent of the overall grade for the course; a Design Report, that explains the approaches and processes used to produce their prototype, worth 20 percent of the overall grade; an Oral Presentation to the client (Dick Hannah company stakeholders), an activity worth 20 percent of the overall grade; and a Reflection Paper, that asked students to think about the work they undertook in the course and write about what they learned about design and composition and themselves as multimedia designers, an activity worth 10 percent of the overall grade.

We used three books for the course: App Savvy by Ken Yarmosh, Designing the Obvious by Robert Hoekman, and Design Fundamentals for New Media by James Gordon Bennett. The first two address approaches students need to know for multimedia design: user-centered design, iterative design, and rapid-prototyping; thus, they were helpful in providing a general notion of creating apps and design, respectively. The third, Design Fundamentals for New Media by James Gordon Bennett, provided students with basic information about multimedia design based on desktop environments. As mentioned previously, no text to date focuses on app aesthetics. So, we also read essays and chapters on web and app design by Lyndon Cerejo, Jurgen Schieble, Bill Moggridge, and Abhijit Kadle. Guest speakers involved in app development in the Portland- Vancouver metropolitan area included Frank Mungeam from the KGW news agency and Reed Rotondo from Pixel River, a local design firm. Mungeam remained with us as a consultant on the MTRI project since he had experience with taking apps to market. Students researched apps in the iTunes App Store and in the Android Market to get a handle on best practices and read reviews about apps on various online sites.

All activities in the course centered on teaching students to think through design principles that correlate to mobile apps and, then, to apply those principles for creating the prototype and wireframe. This approach meant that we had to consult the development guidelines for Apple (and later Android) to understand the requirements from the launcher icon and common screens, such as the splash and landing screens; know what kind of information is allowable on menu and navigation bars; and develop an appreciation for producing images, texts, videos, and slide shows for small screens. Students found Illustrator helpful for prototyping because it allowed them to scale images to the sizes they needed easily, and they used PhotoShop for producing the wireframe.

Figure 3.  Wireframe for the Dick Hannah App

Figure 3.
Wireframe for the Dick Hannah App

As the class came to a close, faculty developed a list of qualities for app design that they knew can be applied to future courses, and students had produced the prototype and wireframe for their app. (See Fig. 3).

DTC 478 “Usability and Interface Design” focuses on the overlay of design, content, users, and situation in order to promote efficient and effective utilization of desktop and mobile interfaces for various media objects. In this course, interfaces are seen as portals between a variety of users in a similar situation and collections of digital data or information. Students in this course conceptualize, critique, analyze, evaluate, and produce usable interfaces for various digital media devices. Because usability and interface design is the study of how we design, build, and then actually use digital interfaces, the desired outcome is the smooth and easy use of such interfaces. It is about assuring that what we build works as intended and in the situation in which it is utilized. So, the nature and extent of situation-centered design, and of usability built into interfaces, derives from the understanding why someone will use an interface and for what purpose. This approach provides the course direction, follows the “learn, think, build” focus of The CMDC Program, and addresses specific research questions for this course.

As noted previously, because much of app development has evolved from commercial and “DIY” sensibility, teaching app design and development, and by extension usability and interface design, is not yet common or standardized in academic institutions. We felt the need to develop, for the MTRI project, an approach that sought best practices of unique app affordances, interface usability, and user experience. Using our course texts, Robert Hoekman’s Designing the Obvious, Ken Yarmosh’s App Savvy, Steve Krug’s Don’t Make Me Think, and Cameron Moll’s Mobile Web Design, we set goals for our endeavor:

We achieved these goals as follows. First, we meet with Dick Hannah stakeholders in order to determine their desires and considerations for the desired app, along with their thoughts regarding the purpose for its creation and utilization. Our focus in this first meeting was “WHY build this app?” The answer came in several guises: provide customer-dealer contact, promote customer-dealer relationship, augment existing customer services, provide new level of services, provide information management, and provide customer resources. The common theme among these reasons was information and its flow between Dick Hannah Dealerships and its customers. Discovering this theme allowed us to think about how to organize information in convenient and logical groupings, or, as we called them, “information buckets,” in order to enhance its usability. This information organization would, we felt, surely change as the project evolved, but from the start we would have a sense of the app’s underlying information architecture and how this might drive navigation.

Next, we considered the question, “How will this app accomplish its purpose?” The answers included a number of suggested resources, which, after preliminary scaling, changes, and combinations, produced a manageable toplevel directory of the resources offered by the app. From this point, we were able to conceive an interface that was smaller, more concise, while affording room for resource expansion under each of these top-level headings. These resource headings might, we felt, translate into navigation buttons at the top level of the interface. Selecting specific buttons would allow users to interact and relate with the app in a number of significant and important ways. For example, selecting the “Service” button might provide users the ability to schedule an appointment, to read recall information or service messages, to connect with the Collision Center, or the Parts Department. Understanding the potential organizational structure for information resources afforded by our proposed app, we began planning for its implementation. We did this through rapid iteration using wireframes and prototypes.

Wireframes are quick visualizations of individual screens. They show only the potential placement and organization of elements, not the visual design, content, or interactivity of the app. We created wireframes on a whiteboard, each member of the team augmenting or changing what someone else had produced. Multiple iterations were, thus, easily created in immediate response to ongoing discussions between the design and development teams, and sometimes with other project stakeholders. At the end of each session, we captured our work photographically. Using these photographs, we created more robust and detailed wireframes which became the genesis of our next session discussions. The photographs were preserved in our project archives.

Once the wireframes were stabilized, we moved to the rapid iteration of prototypes, or visualizations of all the screens associated with the mobile app. Prototypes can show not only placement of elements, as do wireframes, but the type (text, image, etc.) and extent of each element, what interactivity it affords, and which screen is the result of any action. Again, we began with collaboration at the whiteboard, moving from there to paper prototypes produced by individuals or teams taking ownership of specific aspects of the proposed app. Using paper prototypes, we could develop task scenarios for usability testing. This approach to usability, we felt, provided increased opportunities for the pervasive examination of our project to identify problems and/or errors. It was easier, and less expensive, we reasoned, to fix problems on paper than it would be once we started coding the app.

In agreement as to the information architecture, and the navigation structure that provided the best support and access, we were ready to code and develop the app. The robust wireframes and prototypes developed through the collaborative efforts that took place in both courses in the first summer session served as blueprints for the building, ultimately saving time and effort. By working to achieve usability first and foremost, we were able to determine what features and affordances were necessary, and which were desirable, even “cool,” but not necessary to the functionality of the app and its achievement of a specific purpose. When it came time to turn the project over to the coders and developers, we knew exactly what to build, what features and affordances were required, and how the various parts of the app were designed to work together. Like the developers, the visual designers also had a blueprint, complete with style guides, color palettes, and content strategies. Team members not designing or developing worked to provide the necessary content. Again, they had a clear set of directions to follow. No time was wasted determining what content to procure or produce. We had answered these questions during our rapid iterations sessions. Each member of our team knew what needed to be done, and why, in order to assure the most satisfactory user experience, and the highest level of usability. For all these reasons, our return on investment was far more rewarding than if we had begun straight away with building of the app.

DTC 477 “Advanced Multimedia Authoring” focused on teaching students how to utilize HTML5 and CSS3 for the production of native apps. At the time of this writing, the most common method of creating a native mobile app was to use the particular mobile device’s own development tools. The free iOS and Android SDKs (software development kits) include simulator tools for target devices and contain extensive support resources. However, the programming languages for each SDK are unique. Apple uses Objective C, and Android uses Java. These are not widely used coding languages and require a steep learning curve, especially for students with little background in programming trying to learn to make apps in 12 weeks.

Another method, and the one adopted for MTRI, was to use standard web tools (HTML5, CSS3 and Javascript) to build a web-app with mobile-like navigation and, then, package the files into a native app for distribution. PhoneGap, an open-source mobile app framework with an active community of developers, works with a variety of SDKs to package native apps written as web files. PhoneGap can access unique device APIs, such as the camera and geolocation hardware functions, and it also fits the requirements for distribution to either the Apple or Android markets, following their distinct specifications.

As mentioned previously, MTRI students had all taken the introductory class DTC 355 “Multimedia Authoring,” in which they learned the basics of HTML, CSS and Javascript as well as Photoshop and Illustrator. In the first classes of DTC 477 “Advanced Multimedia Authoring,” selected as one of the courses in the MTRI cluster, some time was spent introducing new features of HTML5 and CSS3, especially focusing on how these features work with Javascript. For example, they learned to use “media queries” to change CSS layout between landscape and portrait modes, accessing Javascript and jQuery plugins for controlling touch navigation, and using the Google Maps API for acquiring the user’s geolocation.

The first assignment in DTC 477 was to build a one-page web-app (a mobile website) that was responsive to different device orientations and widths. In the assignment, called Place Portrait, students compiled information––text, interactive maps, images, video and/or audio––about a favorite place anywhere in the world. Students, then, were given a template that demonstrated the new HTML5 features for mobile design and were allowed to play at arranging layouts of media elements while becoming conscious of the particular constraints of mobile design. This activity was intended to provide students the opportunity to explore technologies and concepts needed for the larger project that loomed.

We chose to develop the MTRI app using a comprehensive mobile framework that worked well with the specifications of the client. Although there was initial resistance to this approach (it was perceived to be too limited), students came to appreciate the flexibility and ease with which they could build pages that share common styles and behaviors. The jQuery Mobile Framework made formatting, touch events, and transitions quite intuitive, but it still required a basic understanding of Javascript and jQuery. To introduce principles of programming and computational thinking, students built simple games using free online software from MIT. Scratch, for example, is a graphically based game-creator in which one makes objects animate and respond to user interactivity. The software is easy to learn but quickly demonstrates that programming is a thinking process. For non-programmers, an important principle to understand is that good programming begins as a way of thinking — not the mastery of a particular computer language.

After being introduced to the principles of programming in a play environment, students were immersed in the basic syntax of Javascript and Javascript libraries, specifically jQuery. They could, then, see the familiar graphic code blocks in Scratch translated as lines of computer code. Through short practical exercises, students developed an understanding of Javascript and how it works with elements on a web page. Of course, some students picked up the programming skills more quickly than others and could take on more challenges, but all students were required to attain a certain proficiency so they could think about the app they were making with the proper depth. After learning the basic syntax of Javascript and jQuery, students were introduced to the jQuery Mobile Framework. Flexible and functional, the framework allowed students to immediately apply touch events, pagination, and transitions without needing to write code. It helped that they understood how it all worked, especially when it became necessary to alter the template. Writing code for certain app functions, such as showing geolocation on a map, or capturing and storing form inputs, was left to those students who showed an aptitude and desire to jump into programming at a deeper level.

Once the HTML5 pages were tested and working with the various Javascript and jQuery libraries, all files were imported into Apple’s SDK: Xcode. In its first stage of development, the Dick Hannah Customer Care app was tested using Xcode and its iPhone simulator. When version 1.0 was ready, students and faculty discovered Apple’s process of licencing, testing and submission was more complicated than anticipated. Submitting updates to Apple, however, was quite simple. An Android version was also submitted later without much difficulty.

DTC 338 “Special Topics: App Development for iPhones and Androids,” as noted earlier, allowed us to package and teach specific subject matter and orient the class toward a specific goal: successful completion of the app. In this course, the emphasis was on programming necessary for successful app development and deployment and so we felt it most productive to link this class closely with the concurrent DTC 477 “Advanced Multimedia Authoring” course. Essentially, DTC 338 became a laboratory for DTC 477, a context in which students could, following our guiding principles of action research, learn to build by putting into practice a developing body of knowledge and ability. Most of these class sessions were devoted to collaborative problem solving and/or focused development research. As discussed below, this course was co-taught by a recent CMDC graduate with professional-level programming skills, thus allowing faculty and students the opportunity to learn from theoretical as well as practical, applied perspectives.

Part 3

Theory, Practice, and the Real-World Experience

We designed our pedagogy for teaching mobile app development to include practical and applied perspectives, not because theoretical pickings on this subject are thin but rather because directing students to focus on situated material and particular practices of particular people in particular places, in the “here and now,” constitutes a dynamic action-research ethic. That ethic aims to demonstrate that deep understanding comes from clear awareness of social and educational practices in situ. Such a focus means the emphasis for student interpretations are drawn from the product of the specific material, social, and historical circumstances that produced the practices, and by which, they are reproduced regularly through social interaction in the particular setting (Kemmis & McTaggart, 2005, pp. 277-279).

Action research meanwhile incorporates both qualitative and quantitative approaches, based on the needs of the particular research situations, because qualitative data is due to change when circumstances change, and quantitative data serves only as a crude approximation of the ways in which participants understand themselves. Action researchers, from this viewpoint, therefore try to understand practice from its individual and social aspects, as well as objectively and subjectively, and as constructed and reconstructed historically both in the terms of the discourses and in terms of those constructed actions and consequences. If open to construction, then these research methods must also be open to reconstruction, and extend beyond the realm of preformed solutions, including the potential for borrowing and remixing, such as applying and adjusting established desktop computing ideals to mobile environments, in an effort to bring new light to the nature, processes, and consequences of the particular object of study (pp. 290-293). The action research mantra established by Orlando Fals Borda (1979), then, is to: “investigate reality in order to transform it” and transform reality in order to investigate it (qtd. in Kemmis, 2006, p. 470). This interpretive perspective, from which action research generates, acknowledges the researcher as an insider, as a part of the fabric of the inquiry, and an indivisible element of the environment within which people, including the researcher, are interacting (McNiff + Whitehead, 2006, p. 10).

Researchers traditionally tend to try to distance themselves from their work, as if such separation somehow distinguishes the results as “more plausible, credible, perhaps even more ‘scientific’” (Burnaford, Fischer, et al., 2001, p. 7). Kurt Lewin (1948), though, contends that the person stands at the center of his or her life space and that an understanding of that life only can be accomplished by beginning with the perspective of that individual. Put into a research context, that the researcher starts exactly where he or she is, and then tries to do something. Knowledge, in turn, can be created from problem solving in real-life situations (Herr & Anderson, 2005, p. 11). Such a personal emphasis on knowledge building was reinforced by Jean Piaget, Howard Gardner, and John Dewey, who wrote (1985, p. 39): “The discovery is never made; it is always making” (qtd. in Burnaford, 2001, p. 8-11).

Students in the MTRI program, as in all CMDC courses, consistently combined talk about theory and abstract conceptualizations with complementary hands-on application of those ideas and experimentation that exposed numerous gaps in the scholarly knowledge about mobile app design. While supporting creative freedom and innovation in research, such an action-based approach also builds practical skills and valuable project-management experiences. In the process of reading about—and theorizing about—building mobile apps, our students also made practical gains in skills related to writing, editing, design, photography, videography, collaboration, team coordination, public relations, marketing, and technical manipulations of various computer and Internet technologies. Core action research goals, therefore, include improving practice and developing individuals but also transforming practice as well as participants (Herr & Anderson, 2005, p. 9). As Thomas and Brown point out, “When we build, we do more than create content” …we also create context by building within a particular environment, often providing links or creating connections and juxtapositions to give meaning to content.” They add, “By participating in the making of meaning, we also learn how to judge and evaluate it, giving special sensitivity to the ways information can be shaped, positively as well as negatively” (2011, p. 94-6). During such a process, the creator transcends “from experience to embodiment, where the personal investment in technology and digital media changes the focus from social agency to personal agency. When that happens, technology and digital media begin to be viewed as an extension of oneself” (p. 103). Learning, therefore, becomes an integrated part of humanity, rather than just something a person happens to do at school.

Part 4

Needed Resources

The site of this extension between technology and our human selves (i.e. the primary learning environment for MTRI students and faculty) was The CMDC Program’s multimedia lab. This space is equipped with 25 Apple iMacs and six Mac Pros. The students’ iMacs are arranged in six pods of four to encourage group work and peer assistance. All of the iMacs are set up with identical hardware (21.5”, Mid-2010, 32.Ghz Intel Core i3 processor, 8GB Ram, 1TB HD) and software packages to ensure students have the flexibility to work on their apps at any machine.

Figure 4. The CMDC Program’s classroom layout, and its use for collaborating

Figure 4.
The CMDC Program’s classroom layout, and its use for collaborating

Figure 4. The CMDC Program’s classroom layout, and its use for collaborating

Figure 4.
The CMDC Program’s classroom layout, and its use for collaborating

 

 

 

 

 

 

 

Our lab already owned some of the programs needed for MTRI, including image editors, web browsers, and text editors. However, it was necessary to install new software items for the purposes of app development and testing. It should be noted that installing software requires administrative access to the destination computers and may require the assistance of one’s IT department’s personnel.

To prepare the lab, we first made sure we were using the current version of the Mac operating system, which at the time was OS X v10.6 “Snow Leopard.” Then, we installed the Apple iOS Developer Tools, including the Xcode application. For Android app development, we installed the Eclipse developer environment and Android SDK. Then, we set up the Android Development Tools (ADT) Plugin for Eclipse, which provides easy access to the Android SDK. Finally, we installed the PhoneGap mobile framework, which allowed us to wrap HTML5 web apps in platformspecific containers for distribution to the Apple App Store and Android Market. All of these programs have associated websites with clear instructions on how to download, install, and configure the software.

Figure 5.  App Development Programs Used in MTRI

Figure 5.
App Development Programs Used in MTRI

The Apple iPhone was first released in 2007 and has undergone four major revisions since that time; therefore, it is important to stay abreast of software and hardware upgrades and to test on every iteration of the phone available. This means that faculty interested in teaching app design and development should have access to a selection of mobile devices for prototype testing. Although the developer tools do include simulators for iPhone, Android, and iPad screen sizes, there is nothing quite like being able to view, touch, swipe, and pinch your budding app on the actual devices your audience will be using. An app may run smoothly on a new iPhone 4S, but it may not perform on an older 3G model. It may look fine on a phone-sized screen, but not layout effectively on a tablet. The MTRI program, understanding the need for access to these tools, purchased two iPads for the project with the MTRI donation. Faculty and students also personally owned a wide variety of devices, which allowed most of us to have access to testing our apps.

Part 5

Faculty as Learners

Most of the faculty who participated in the MTRI attended other classes in the sequence throughout the summer. This gave us a unique perspective as observers/learners as well as participants, and a few of these observations are worth noting here.

First, having faculty attend the classes sends a powerful message to the students in the program. When a professor stops the routine of their research time in the summer to extend their skill sets, s/he leads by example. Since MTRI is an interdisciplinary program, having faculty involved in this capacity helped to reinforce the respect that each have for one another and their respective areas of study. This sensibility adds to the culture of innovation––that is, learning does not stop at pre-determined boundaries. With every class having at least one other professor attending, faculty embodied the phrase that has peppered many teaching philosophies over the past few decades: lifetime learning. Students see professors sitting in classes learning for the sake of learning, rather than as a necessary step to an endpoint. This also helps to establish a culture in which students value the opportunity to learn. For example, following MTRI we offered several short series of workshops on technologies such as PHP, MYSql, and WordPress that did not count for credit but filled up quickly, nonetheless.

Second, it required a different set of expectations for teaching. Every faculty member in the four-course sequence taught a subject he or she had long taught but had to revamp it for the mobile environment. The syllabi served more as guides, and less as contracts, and faculty adjusted expectations and assignments as needed. Coupled with the summer-long app project, this approach entailed a certain vulnerability—the teachers did not always know everything in the mobile environment, and they did not hide this fact from the students. Here, the culture of “everyone as learners” fostered a positive climate. Rather than giving answers, the approach involved peeling back the curtain. Students were brought into the world of learning and discovery alongside faculty. Students learned how to find further information through DIY and crowd-sourcing methods and were given the tools to research answers, much in the way faculty teach themselves. Once the opening lecture material was presented, learning became viral. Within each class, as students completed activities, they roamed the room helping both fellow students and faculty who had missed something in the code, or were otherwise having some trouble successfully completing the activity. This approach spread until everyone had completed the assignment; it worked more efficiently than one faculty member roaming around trying to help a roomful of students at once. One salient example of the success of this approach focuses on one of the MTRI Fellows who was selected for her project management and content specialist skills. Though she had never taken well to coding in her previous courses, she became competent in Objective C and revelled in her ability to assist other students who considered themselves great coders. She emerged as the natural teacher among the MTRI Fellows, and because all students were potentially vulnerable, no one person felt outside the parameters to learn.

One course, DTC 338 “Special Topics: App Development for iPhones and Androids,” was co-taught by a recent graduate with professional-level programming skills. Involving an alum, as we did in MTRI, allowed students to learn and, then, return to share their knowledge with us. Perhaps not every professor would feel comfortable doing this, but in keeping with crowd-sourcing and participatory learning models that The CMDC Program embraces, we found it to be a remarkably satisfying experience to attend a class taught by a former undergraduate who had been in our classes just the previous year. Given that the current generation of students is, perhaps, the first to teach its own parents life skills generated by new technologies (Tapscott), this mode of learning makes sense to explore in our college classrooms.

Finally, two other factors helped make this sequence and project successful. Beyond the faculty having a certain level of comfort with ambiguity, the project needed students who could handle this environment. Having the opportunity to select students for the classes enabled us to cull a strong cohort. Simply put, the project would have failed had the students not been up for the challenge. Their willingness to put in the necessary work to learn, think, and ultimately build (an app in this case) entailed the most crucial aspect of the project. Like the faculty, they needed to be flexible and committed. Although these two qualities are vital for the post-college world, many college courses are so tightly controlled that students’ problem solving skills become secondary, or they simply exist within the confines of a paper. A group of students with the focus of “exactly what do we have to do to get an A” would not have worked.

The summer school format allowed for intensive sessions and gave students the opportunity to focus on one project. We did detect at the start of the second summer session a bit of fatigue in the students, having gone straight in from the spring to summer semester without a break. Interestingly, though, the fatigue quickly dissipated once the coding started and they began to see the fruits of their labor in an app that worked.

Conclusion

The end result of the MTRI project was the design and development of two apps, with the main focus on the Dick Hannah Customer Care app now found in the Apple App Store and the Android Market. Our story, of course, does not end with the success we had with making apps in MTRI; rather, as we have intimated throughout this essay, it constitutes a new beginning: CMDC 2.0, so to speak. While we were not able to undertake the whole of our vision for the MTRI project, we did train a cohort of talented students to make apps. The faculty did retool ourselves so that we now teach app design and development in all of our courses. We did help to provide funding for 10 students to attend classes during the summer and, so, be fast-tracked through their degree. We did develop a close partnership with a local business interested in investing in education. Following MTRI, we matriculated students into good jobs and graduate programs where they can utilize what they have learned because of these endeavors. Finally, we are still working with some of these students on another challenging project funded, again, by Dick Hannah Dealerships: an interactive, augmented reality installation, entitled “Autovation,” for the Oregon Museum for Science and Industry. So, at the time of this writing, six of the MTRI Fellows who have not yet graduated from our program, along with four new students selected for this honor, are now engaged in the design and development of this project, and sitting at the heart of it are the very technologies we all had to learn for app design and development.

Screen capture from the mobile app game Proppa by Prof. Joseph Linhoff, DePaul University, Chicago.

Screen capture from the mobile app game Proppa by Prof. Joseph Linhoff, DePaul University, Chicago.

References:

Burnaford, G. E., J. Fischer, et al. (2001). Teachers doing research: The power of action through inquiry. Mahwah, NJ, Lawrence Erlbaum Associates.

Clark, J. (2010). Tapworthy: Designing great iPhone Apps. Sebastapol, CA, O’Reilly.

Dewey, J. and J. A. Boydston (1985). The later works, 1925-1953. Carbondale, IL, Southern Illinois University Press.

Herr, K. and G. L. Anderson (2005). The action research dissertation: A guide for students and faculty. Thousand Oaks, CA, Sage Publications, Inc.

Hoekman, R. (2011). Designing the obvious: A common sense approach to web & mobile application design. 2nd edition. Berkeley, CA, New Riders.

Kemmis, S. and R. McTaggart (2005). “Communicative action and the public sphere.” The Sage handbook of Qualitative Research. 3rd Edition. London, Sage.

Kemmis, S. (2006). “Participatory action research and the public sphere.” Educational Action Research 14(4): 459-476.

Krug, S. (2006). Don’t make me think: A common sense approach to web usability. 2nd edition. Berkeley, CA, New Riders.

Lewin, K. and G. W. Lewin (1948). Resolving social conflicts: selected papers on group dynamics [1935-1946], New York, Harper.

McNiff, J. and J. Whitehead (2006). All you need to know about action research. Thousand Oaks, CA, SAGE Publications Ltd.

“Median Household Income Estimates by County: 1989 to 2010 and Projection for 2011.” Office of Financial Management. State of Washington. http://www.ofm.wa.gov/economy/hhinc/medinc.pdf. Retrieved on 15 Feb. 2012.

Moll, C. Mobile web design: A web standards approach for delivering content to mobile devices. (2007). Salt Lake City, UT, Cameron Moll.

Tapscott, Don. 2009. “Net generation and the family” in Grown up digital: how the net generation is changing your world. New York: McGraw-Hill, 219-241. Thomas, D. and J. Brown (2011). A new culture of learning. Cultivating the imagination for a world in constant change. Lexington, KY, CreateSpace.

“We’re Still Hurting in Southwest Washington.” Olympia Business Watch. 26 Apr. 2010. http://www.olympiabusinesswatch. com/2010/04/were-still-hurting-in-southwest-washington.htmlRetrieved on 15 Feb. 2012.

Vannotti, Stefano M. “Let Us Do What We Do Best: But How Can We Produce Knowledge by Designing Interfaces?” In Interface Cultures: Artistic Aspects of Interaction. Christa Sommerer, Laurent Mignonneau, and Dorothée King. Transaction Publishers: New Brunswick, NJ, 2008. 51-60.

Yarmosh, K. (2011). App savvy: Turning ideas into iPad & iPhone apps customers really want. Sebastopol, CA, O’Reilly.

teaching 9

Article Authors

Dene Grigar

Dene Grigar is an Associate Professor and Director of The Creative Media & Digital Culture Program at Washington State University Vancouver. She works in the area of electronic literature, emergent technology and cognition, and ephemera. She is the author of various net artworks, including Fallow Field: A Story in Two Parts, and The Jungfrau Tapes: A Conversation with Diana Slattery about The Glide Project, both of which have appeared in The Iowa Review Web; as well as the multimedia performance and installation When Ghosts Will Die (with Canadian multimedia artist Steve Gibson), a piece that experiments with motion tracking technology to produce networked multimedia narratives. Her most recent projects include Fort Vancouver Mobile (location-aware nonfiction content for mobile phones to be used at the Fort Vancouver National Historic Site, funded by a 2011 NEH Start Up Grant), and The Grand Emporium of the West, funded by a 2012 “We the People” Grant. She is also Associate Editor of Leonardo Reviews and Vice President of the Electronic Literature Organization. Grigar has established herself as a curator of digital media, curating eight exhibits since 2005, including those for the Planetary Colleguim, the ELO 2008 and ELO 2012, and MLA 2012 and MLA 2013. Upcoming curatorial projects include the April 3–5, 2013 Electronic Literature Showcase at the Library of Congress; a showcase at the 2013 Digital Humanities Summer Institute at the University of Victoria; and an exhibit at Illuminations, the gallery for the School of English, Media, and Theatre Studies at the National University of Ireland Maynooth in March 2014. She is the Founding Director of the CMDC Program-associated Nouspace Gallery & Media Lounge, located in downtown Vancouver.