2017 IEEE 17th International Conference on Advanced Learning Technologies

Design thinking in App inventor game design and development: A case study
Peng CHEN1,2 Ronghuai HUANG2*
1 2
Department of Educational Technology Smart Learning Institute
Capital Normal University Beijing Normal University
Beijing, China Beijing, China
[email protected] [email protected]

Abstract—Design thinking is considered as a creative, human- programming languages such as Scratch[12], Toontalk[13],
centred, participative, exploratory and problem-solving process that and Alice[14], etc. MIT App Inventor is currently one of the
values different perspectives of a problem. In this study, we bring most popular block based programming environments.
the design thinking in a curriculum framework of K-12 game Researchers have used App Inventor in summer camps and
creation by App Inventor which is currently popular block based
programming environments for fostering Computational Thinking.
other outreach activities for K12 students for several years
In a case study on a middle-school students game creation course in now[15][16][17][18][19]. Meanwhile, App Inventor has also
Beijing, the students’ creative thinking process and computational been effectively used for professional development
thinking skill are investigated in order to understand perceptions of workshops for K12 teachers[20][21], as well as introductory
App Inventor and physics cognitive knowledge involved in the computing courses at the college level [22][23][24].
game creation. The future work is to construct a framework of
integrating the Design Thinking for cultivating K-12 students' C. Research Purpose
computational thinking. This study aims to describe how to design effective
framework for the App Inventor game creation course by
Keywords-Design Thinking; App Inventor; Game Creation; combining the physics knowledge.
Computational Thinking
II. THEORETICAL FRAMEWORK
I. INTRODUCTION
A. Key Elements for Design Thinking
A. Emergence of Design Thinking
Design thinking is considered emergent, to define and
In recent years, innovation has become a buzz-word that means different things to different people [25]. Approaches to
has spread into various areas of politics and business. Design delivering design thinking also vary in terminology and
thinking can be considered as a creative, human-centred, phases of execution. Three basic phases of the design
participative, exploratory and problem-solving process that described by[26][27][28][29] are analysis, synthesis, and
values different perspectives of a problem[1][2][3]. Its origins evaluation.
have been traced back to the 1960s design methods
movement, that shifted from a scientific investigative B. Connected design thinking Encompassing the Entire
approach of ‘what is’, to a more creative exploration of ‘what In our research, we adopted the Standford d.school[30]
ought to be’ [4]. Although design thinking has become an process of design thinking which including empathize, define,
integral part of the design and engineering fields as well as ideate, prototype, and test. The design action plan is an
business, it can also have a positive influence on 21st-century iterative process, and each action phase should achieve some
education across disciplines because it involves creative deliverable outcomes. In our research, students learn to adopt
thinking in generating solutions for problems. the design process for their product.
Table 1 The process of Design Thinking
B. Programming for K-12
Activities deliverables
Computational thinking (CT) is a term coined by Wing[5] Empathiz User intereview Empathy map, list of
to describe a set of thinking skills, habits, and approaches that (understand Observation user feedback, problems
are integral to solving complex problems using a computer our users) Immersion identified
and widely applicable in the information society. There is Define Workshops Design brief,
growing consensus[6] that computational thinking is a (define clear Stakeholder Meetings stakeholder map,
fundamental skill that everyone needs to succeed in our project context map, customer
complex and technological culture. Computer programming objectives) map, opportunity map
Ideate(explo Ideation activities, Ideas/concepts,
is an excellent way to develop computational thinking re ideas and brainstorming, sketches, prioritisation
skills[7], because it involves the use of computer science solutions) mindmaps, map, affinity map, idea
concepts such as abstraction, debugging, remixing and sketching/drawing evaluation
iteration to solve problems[8][9][10]. In computer Prototye(bui Space prototyping, Physical prototypes,
programming field, programming for K-12 can be traced to ld and physical prototyping, wireframes, storyboards
the 1960s when Logo programming was first introduced as a visualise paper construction,
potential framework for teaching mathematics[11]. Nowadays, ideas and wireframe building,
this s fuelled by the availability of easy-to-use visual solutions) storyboards, role-
plays

2161-377X/17 $31.00 © 2017 IEEE 139

DOI 10.1109/ICALT.2017.161
Test(review Test List of user feedback, classroom observations, survey and individual student
and decide) observatiom, evaluation interviews.
1) Pre & Post-test: All participants were required to
C. Game creation independently complete the cognitive knowledge test of
Game creation is suggested to provide greater student physics before and after the class.
engagement and learning than game play [31], in supporting a 2) Artifacts: Students designed and developed their
constructivist approach in which the students learn how to games and the teacher collected their screencasts and
synthesize information and express it, in the authoring of an documents. Games were played for general functionality and
original game. In a case study with grade 5 students using user interface, and were played and reviewed with each of the
Scratch software, researchers found that the students could students.
design games within a constructionist framework and that 3) Observations: The observation was recorded and
programming skill increase with increased design focused on students’ behaviors, relationship dynamics in
experience[32]. In our study, learners complete a digital game
groups, student conversations, and other notable moments
design and development by App Inventor.
related to students’ learning.
III. MOTHODOLOGY 4) Survey: In the final lesson of the course, all the group
presented their game in the mobile, and take a questionair
A. Setting and participants which include the course satisfaction, the interesting on
The case setting was grade eight in a middle school of programming, the understaning of game design and the self-
Beijing and there are 25 students which divided into five efficacy.
groups. Students worked in a project-based setting by 5) Interview: The interviews contained open-ended
researching physical topics and creating thematic games in questions in which students and the instructor were asked
collaboration with other students. The class was conducted in about their game creation experience, opinions about the
computer classroom that everyone has a computer. Students design process and course. Students were asked to tell about
were allowed to use mobile devices, including laptop, tablet
their experience with questions: How do you feel about
computer and mobile phone in the classroom, and the
designing games? How do you think designing games help
wireless network works in the classroom.
you learn? How do you feel that combine the physical
B. Course structure and activities knowledge to produce a game through the App Inventor?
The Course consisted of four modules, lasting 1 week What is something new or creative that you have learned
each. Partcipants were expected to expend 4 hours of effort about designing games? In designing and creating unique
in each module. games, how does the process feel like?
Module 1: Introduction to the Game creation and App
Inventor. Designed to help participants learn about the IV. FINDINGS
potential of mobile apps in education, share one’s favorite A. Game creation and class engagement
game in the field of physics and discuss the key points and Each group creates a game with the combination of
steps in game design. This module introduced participants to physical knowledge, and these games are very creative and
the five steps of the design action plan, and participants interesting. Students take the physics knowledge as the basic
discuss the topic in groups. theory foundation of their games. Generally, the students
Module 2: Game design. Participants empathize, define worked on game creation and fully engaged in the game
and ideate the topic through the design action plan. They need constructions. And the class is very lively and interesting.
to do some activities, complete deliverable outcome, and
draw the sketches of their game. B. Reflections on the course
Module 3: Hands-on with App Inventor. Participants Student interviews offered details on the creative work in
learned about basic components for building apps and built the game design and development environment. The
practice apps. During the process, the instructor provided student’s words offer the insight into understanding how the
suggestions and facilitated discussion on block programming. student, in the creation of games, perceives the creative
Module 4: Design with App Inventor. Participants built thinking process, “I learn to make simple mobile phone
one practice app, proposed an app of their own and built a software; AI let me open the door to the game creation, and
working prototype or completed app. it also improves logical thinking, problem-solving
In addition, participants continuously engaged in active competency; It is a meaningful thing that applying what I
app review–feedback process similar to that in module 2. learn to solve problems in the APP design; The combination
C. Data collection and analysis of AI and physics making the game looks true and feel fresh”.
This study adopted a mixed-method approach to collect C. Course Satisfaction
and analyze the following data: student digital artifacts, Items of the survey are about attitude on the instructional
method and software application. It is found that most of the

140
students (more than 87%) strongly like the design thinking [11] Feurzeig, W., & Papert, S. A. Programming-languages as a conceptual
framework for teaching mathematics. Interactive Learning Environments,
integrated into the course, and more than 67% to 80%
19(5), 487–501, 2011.
strongly agree the learning strategies learned in the class [12] Burke, Q. The markings of a new pencil: Introducing programming-
would help them to learn better. Students suggested to design aswriting in the middle school classroom. Journal of Media Literacy
more interactive activities involved, and they are tired of the Education, 4(2), 121–135, 2012.
[13] Kahn, K., Sendova, E., Sacristán, A. I., & Noss, R. Young students
didactic-style teaching.
exploring cardinality by constructing infinite processes. Technology,
Knowledge and Learning, 16(1), 3–34, 2011.
V. CONCLUSION [14] Graczyn ´ ska, E. ALICE as a tool for programming at schools.
The current research employed design thinking to develop Natural Science, 2(2), 124–129, 2010.
[15] S. AlHumoud, H. S. Al-Khalifa, M. Al-Razgan, and A. Alfaries,
a framework of the App Inventor curriculum for game “Using app inventor and lego mindstorm nxt in a summer camp to attract
creation combining physical knowledge. The main high school girls to computing fields,” in Global Engineering Education
contribution of the current research is multifold. First, the Conference (EDUCON), 2014 IEEE, pp. 173–177, 2014.
conceptual framework for effective teaching and learning for [16] M. H. Dabney, B. C. Dean, and T. Rogers, “No sensor left behind:
enriching computing education with mobile devices,” in Proceeding of the
the App Inventor game creation curriculum. The teaching 44th ACM technical symposium on Computer science education. ACM,
according to the conceptual framework improves the 2013, pp. 627–632.
knowledge learning performance. Second, the class helps [17] B. Ericson and T. McKlin, “Effective and sustainable computing
students feel connected, make learning more immersive, summer camps,” in Proceedings of the 43rd ACM technical symposium on
Computer Science Education. ACM, 2012, pp. 289–294.
engaging, and relevant experience. Third, the game project [18] K. Roy, “App inventor for android: report from a summer camp,” in
with design thinking improves the students’ learner Proceedings of the 43rd ACM technical symposium on Computer Science
experience and learning performance. The limitation of this Education. ACM, 2012, pp. 283–288.
study is that it comprises the physical course, cannot draw on [19] A. Wagner, J. Gray, J. Corley, and D. Wolber, “Using app inventor in
a k-12 summer camp,” in Proceeding of the 44th ACM technical
the full computational thinking context. symposium on Computer science education. ACM, 2013, pp. 621–626
In the future, we may construct a framework of integrating [20] J. Gray, H. Abelson, D. Wolber, and M. Friend, “Teaching cs
the Design Thinking for cultivating K-12 students' principles with app inventor,” in Proceedings of the 50th Annual Southeast
computational thinking. There are a number of future Regional Conference. ACM, 2012, pp. 405–406.
[21] J. Liu, C.-H. Lin, P. Potter, E. P. Hasson, Z. D. Barnett, and M.
research tasks being considered in the agenda of this study. Singleton, “Going mobile with app inventor for android: a one-week
First, design and implement a K-12 programming curriculum computing workshop for k-12 teachers,” in Proceeding of the 44th ACM
constructed based on the framework. Second, design technical symposium on Computer science education. ACM, 2013, pp.
instruments to assess CT knowledge, skills, and perspectives 433–438.
[22] H. Abelson, R. Morelli, S. Kakavouli, E. Mustafaraj, and F. Turbak,
of learners in the programming curriculum. Third, evaluate “Teaching cs0 with mobile apps using app inventor for android,” Journal
the design thinking framework is effective by evaluating the of Computing Sciences in Colleges, vol. 27, no. 6, pp. 16–18, 2012.
progression of learning outcomes of CT knowledge, skills, [23] E. Spertus, M. L. Chang, P. Gestwicki, and D. Wolber, “Novel
and perspectives which include computational identity and approaches to cs 0 with app inventor for android,” in Proceedings of the
41st ACM technical symposium on Computer science education. ACM,
digital empowerment. 2010, pp. 325–326.
[24] D. Wolber, “App inventor and real-world motivation,” in Proceedings
REFERENCES of the 42nd ACM technical symposium on Computer science education.
[1] Brown, T. “Design thinking”. Harvard Business Review, 86(6), 84–92, ACM, 2011, pp. 601–606.
2008. [25] Johansson-Skoldberg, U., Woodilla, J. and Cetinkaya, M. ‘Design
[2] Dunne, D. and Martin, R. “Design thinking and how it will change thinking: Past, present and possible futures’. Creativity and Innovation
management education: An interview and discussion”. Academy of Management, 22(2), 121–146, 2013.
Management Learning & Education, 5(4), 512–523, 2006. [26] R. D. Coyne, M. A. Rosenman, A. D. Radford, M. Balachandran, and
[3] Melles, G. and Misic, V. “Introducing design thinking to undergraduate J.S. Gero, Knowledge-Based Design Systems. Reading, MA:
students at Swinburn university”. Japanese Society for the Science of Design, AddisonWesley, 1990.
18(1) (69) 4–9, 2011. [27] W. Asimow, in Emerging Methods in Environment Design and
[4] Simon, H. The Sciences of the Artifcial. London: MIT, 1969. Planning,G. T. Moore, Ed. Cambridge. MA: MIT Press, pp. 285–307,
[5] J. M. Wing, “Computational thinking,” Communications of the ACM, vol. 1962.
49, no. 3, pp. 33–35, 2006. [28] J. C. Jones, “A method of systematic design,” in Conf. Design
[6] A. Bundy, “Computational thinking is pervasive,” Journal of Scientifc Methods,J. C. Jones and D. Thornley, Eds. Oxford, U.K.: Pergamon,
and Practical Computing, vol. 1, no. 2, pp. 67–69, 2007. 1963,pp. 10–31. Reprinted in Development in Design Methodology, N.
[7] G. Orr, “Computational thinking through programming and algorithmic Cross,Ed. New York: Wiley, 1984.
art,” in Proceedings of the SIGGRAPH 2009: Talks (SIGGRAPH ’09), vol. [29] J. Luckman, Oper. Res. Quart., vol. 18, no. 4, pp. 345–358, 1967.
1, p. 1, ACM, 2009. [30] d.school (2015). Available at:
[8] Brennan, K., & Resnick, M. New frameworks for studying and assessing http://dschool.stanford.edu/redesigningtheater/the-design-thinking-
the development of computational thinking. In Annual American [31] Vos, N., van der Meijden, H., & Denessen, E. Effects of constructing
Educational Research Association meeting, Vancouver, BC, Canada, 2012. versus playing an educational game on student motivation and deep
[9] Ioannidou, A., Bennett, V., Repenning, A., Koh, K. H., & Basawapatna, learning strategy use. Computers & Education, 56(1), 127–137, 2011.
A. Computational thinking pattern. In Annual American Educational [32] Baytak, A., & Land, S. An investigation of the artifacts and process of
Research Association meeting. New Orleans, Louisiana, United States, 2011. constructing computers games about environmental science in a fifth grade
[10] Wing, J. M. Computational thinking and thinking about computing. classroom. Educational Technology Research & Development, 59(6), 765–
Philosophical Transactions of the Royal Society A – Mathematical Physical 782, 2011.
and Engineering Sciences, 366(1881), 3717–3725, 2008.

141