1. STUDENT : NIKHIL JOSHI
PROGRAMME : Post-Graduate Diploma Programme
DIPLOMA PROJECT
DESIGNING MATH BASED FUN EDUCATIONAL GAMES FOR WEB & TABLETS
Sponsor : Playpower Labs, Gandhinagar
GUIDE : DR. JIGNESH KHAKHAR
COMMUNICATION DESIGN FACULTY ( NEW MEDIA DESIGN)
National Institute of Design
Gandhinagar
2012
3. The Evaluation Jury recommends NIKHIL JOSHI for the
Diploma of the National Institute of Design
COMMUNICATION DESIGN (NEW MEDIA DESIGN)
herewith, for the project titled "DESIGNING MATH BASED FUN EDUCATIONAL GAMES FOR WEB & TABLETS"
on fulfilling the further requirements by *
Chairman
Members :
*Subsequent remarks regarding fulfilling the requirements :
Registrar(Academics)
7. ACKNOWLEDGEMENTS
Dr. Khakhar Jignesh,
Faculty & Project Guide,
Coordinator - New Media Design
National Institute of Design, India.
Lomas Derek,
CEO, Playpower Labs.
Patel Kishan,
COO, Playpower Labs.
Special thanks to my team members at Playpower labs : Ankit Patel, Chandradip Rana, Darsh Shah, Diwas Bisht, Nikhil Poonawala, Nirmal Patel, Part Rao, Priyank Kapadia, Sharan Shodhan, Vivek Fitkariwala for helping and encoraging me.
My parents, family and friends at NID for all the love and support.
9. 9
New Media Design | Diploma Project
TABLE OF CONTENTS
1.
2.
3.
4.
1.1
2.1
3.1
4.1
4.1.1
4.1.2
2.3
3.3
4.3
4.4
4.5
1.2
2.2
3.2
4.2
2.4
Synopsis
The company
Understanding Playpower Labs
Design brief
Secondary reserach
Company motto
Approach
Goals
Understanding Market
Web
Approaching devices
Math fluency
Target user group
Games and play
Casual games
Curriculum Mapping
Playpower Labs
Why?
Challenege and scope
Why Tablets are different?
How does it help?
13
15
17
21
25
25
30
17
21
33
34
34
15
17
21
33
18
10. New Media Design | Diploma Project
10
5.
6.
7.
8.
5.1
6.1
7.1
8.1
5.4
6.4
7.4
7.6
5.2
6.2
7.2
8.2
5.5
5.3
6.3
7.3
7.5
5.6
Primary research
Understanding technologies
Developing Games
First Game
School visits
Games designed for Tablets and
Building framework vs individual
Initial understanding
Literature review reflection in game
Product technical model
Scoring Models
The prototype product
Literature review
What was being Developed?
Understanding MDA framework
Educational Importance of Number line estimation.
How can games accelerate learning?
Research influences
Technical requirements altering
Understanding content development
Different mechanics used
Need of math games?
39
47
53
9
44
50
58
60
39
47
53
9
44
42
49
55
59
45
11. 11
New Media Design | Diploma Project
9.
10.
11.
9.1
10.1
11.1
10.2
11.2
11.3
11.4
8.3
9.4
9.2
8.4
8.5
8.6
9.5
9.3
9.6
9.7
9.8
9.9
Games
Conclusion and learning
Appendix
Refrences
Bubble POP!
Conclusion
Interviews
Learning
Content structure(BSNL)
Website
Video
The game redesign
Jelly Beans
Magnitude comparison
Concept it covers
Final game design
Results & Learning
Place Value
Right Wrong
Angle asteroid/Space coordinate
Clock game
Number jumble
Games conceptualized (Design Documents)
112
71
97
97
100
99
101
107
65
79
75
67
67
69
82
77
86
88
90
92
13. 13
New Media Design | Diploma Project
SYNOPSIS
The project was aimed at designing and developing fun, engaging math based educational games that are backed
by strong scientific research for students in K-7 grades in the US. The need of math games was to address a
core problem in STEM (science, technology, engineering and math) education - Number Sense. Over 30% of
8th graders lack basic proficiency in mathematics infact, over 50% of all 8th graders could not place 3 fractions
in the right order, from smallest to largest, according to a recent NAEP(The National Assessment of Educational
Progress) test. This is a clear reflection of the need for effective educational interventions that improves number
sense.
I started off by first understanding the current math based games/products in market, looking at research on
learning science and difficulties children have in understanding mathematics.
One of the challenges of the project was to ensure that the games designed for the web could easily translate
to the tablets/smartphones with minimal design changes. This required a detailed study of different products
available on the tablets and their interaction style. At the end, a total of 11 games were developed covering various
math concepts. Most of the games were mapped to the US common core state standards for Mathematics. Based
on these mini games two iPad applications were also developed for the Apple App store.
Looking at my contribution to the entire product, I was the first designer in the company and paved the way for
setting up a design team of four members. My responsibilities included understanding the research literature
around specific mathematics concepts and then translating them to meaningful game design. Having a strong
background in technology, I played an important role in bridging the design and development environment.
During the period of six months that I spent developing games, I realized the importance of the subtle decisions
that one takes and their impact on the entire game play. Lastly, I perceive games to be something much more
than just being fun; they are more of a culture now.
15. 15
New Media Design | Diploma Project
1.1 Company Motto
1.2 Playpower Labs
Playpowerlabs is an output of playpower.org , which
is a high energy open-source community focused
on creating high-quality educational games for
underprivileged children around the world.
The PlayPower Foundation supports the sustainable
development, distribution and evaluation of effective
educational games and other media, particularly for
underserved children around the world.
Playpower was founded at MIT’s International
Development Design Summit in summer of 2008, with
the goal of developing culturally appropriate learning
games for the world’s most affordable home computer.
Playpower labs aim at developing games to build core
math skills that provide a foundation for success in
Science, Technology, Engineering and Math (STEM).
They are a small team of developer, designer and
researcher that work together to make learning
fun and engaging.
“Designing games
that are fun,
engaging, backed
by research and
justify the platform
on which they are
played”
16. New Media Design | Diploma Project
16
UNDERSTANDING
PLAYPOWER
LABS
2
17. 17
New Media Design | Diploma Project
2.1 Approach
At Playpower labs they have systematic curriculum
design approach which is based on “backwards
design”. Here, they start with a clear identification
of their educational goals. So far, these goals have
been to improve number sense. Then, they clearly
identify which assessments they would use to
measure number sense. This way, they get aware
how to test whether their instruction is working.
Finally, they develop games with the precise
knowledge of what they are trying to accomplish.
In order to test the efficacy of the games, they first
play test the games with kids to eliminate usability
issues. Then, they collect data from the games
and document whether there is a learning curve.
A learning curve shows how students improve
at particular items within the game, over multiple
opportunities. While the learning curve is not proof
that the game improves number sense, it does
provide powerful evidence of learning. At this point,
the games can be tested online, with thousands of
players. They then run experiments with the games
to identify knowledge component models (i.e.,
identify the specific skills present in our games that
students are learning) and to investigate a range of
game design factors to optimize player engagement
and learning.
With the finished game, they then use a pre/post
test randomized experimental design to evaluate
whether students number sense improves as a result
of playing the game. This experiment provides them
concrete scientific evidence for the efficacy of the
game, according to their original goals.
2.2 Why?
The games are designed to address core problem in
STEM education, which is Number Sense.
There are several evidences to it such as: over
30% of 8th graders lack basic proficiency in math,
in fact, over 50% of all 8th graders could not place 3
fractions in the right order, from smallest to largest,
according to a recent NAEP test.
All these evidences points towards a clear need
for effective educational interventions that improve
number sense.
Another important aspect to problem that supports a
digital intervention is, it is hard for teachers to provide
individualized number sense instruction to students in
classroom setting or their personal space.
That’s why Playpower created a set of games
that provide highly effective practice activities for
students, both in and out of school.
The goal is to develop an intuitive understanding of
math amongst kids, called “MATH FLUENCY”.
2.3 Math Fluency
What is math fluency?
Math fluency is when students can perform basic
math without effort quickly and accurately.
Why is math fluency important?
When students are fluent in basic math, they don’t
need to think so hard about basic concepts. This
frees up their mental resources to focus on higher-level
problem solving.
How is math fluency achieved?
Practice! Practice allows tasks to be performed
faster, easier and with fewer errors. Over time,
practice produces automaticity, where tasks can be
done quickly, accurately and without effort.
From tying your shoes to using computer programs
to spelling, all performance begins with a lot of
conscious effort. But with practice, everything
becomes easy.
Why is math fluency so hard to achieve?
1. The main reason is that math fluency,
like language fluency, takes lots of practice.
Unfortunately, many students view math tests, math
worksheets and math homework as tedious, boring,
disengaging and frustrating.
2. The second reason why math fluency is so hard
to achieve is that many students use slow and
18. New Media Design | Diploma Project
18
inefficient strategies when studying basic math.
It’s like they don’t trust their gut sense! While
students clearly need to understand the concepts
behind math, thinking too hard about basic math
functions can prevent students from succeeding in
higher-level math. For instance, when solving an
algebra problem involving 5+7, students shouldn’t be
counting on their fingers, they should just “know” the
answer.
2.4 How does it helps?
The learning games make it fun and rewarding to
practice math skills. Unlike math tests, worksheets
and homework, games make it possible to play
around, experiment and even fail.
Games that are designed introduce an element of
competition and cooperation that can be extremely
motivating for students.
While there is a high bar of challenge for the players,
the emphasis is on rewarding success, rather than
punishing failure.
21. 21
New Media Design | Diploma Project
Fig 1. Exloration and Age relationship
3.1 Goals
1. To identify a viable target user group. The decision
would also include Playpower’s expertise at math
based data analysis, their development skills and
size of the market that was on stake. (Western (US)
and Indian domain).
2. Figuring out a revenue model for the product. This
becomes crucial in terms of placing playpower in the
best slot.
3. What kind of revenue models will support a start-up
like Playpower with a strong research backing but
a new approach towards learning?
4. How do products go about analysing and
visualizing the data they store while there users
interact with the product. There needs to be a
consciousness about the way one would show the
data analysis gathered while user interacts with the
product.
5. There was a need to study the in- game currency
models for most of the sites and how were they being
used in generation of revenues, if any?
6. To study the products that are present both on web
and tablets? Are there any games that are present
simultaneously for web and tablets? What is the
interaction style for these games?
3.2 Challenges and Scope
1. The idea was to make small games that do
not teach but partially assess the user. By partial
assessment, the primary goal is not only assessment
but to develop a sense of fluency in users. This
fluency builds up with rigorous practice and hours of
game play and it is called “MATH FLUENCY”.
2. Both India and the Western market were to be
considered as the target population. It was still not
clear if the product would be released in India or not.
This makes the research work more challenging,
as one needs to incorporate insights from both user
groups while playing safe.
3. Most of the games need to be based on research
insights gained during research studies. The task
would be to simplify these insights into meaningful
game play.
3.3 Target User group
• Understanding based on Papert, Sugata
Mitra, Resnick and Piaget
The target user group would include children’s from
age 3 to 12. The rationale for such a target group
would be their willingness to explore. Exploration
ends with structures and structures are learned with
age in our education system. So the target group is
focussed between an age group where one is willing
to explore and learn.
• Understanding based on CMU
Being mentored by CMU, there was another
understanding of the user group which was heavily
following the US government’s emphasis on
STEM (Science Engineering technology and Math)
focussing on K to 12.
*The expression is a shortening of Kindergarten (K) for
4–6-year-olds through twelfth grade (12) for 16–19-year-olds.
• Target group based on the product, market
and revenue model
The final target group for the product was based on a
strategic decision. The product was aimed at schools
in US and India. Looking at the needs and building
blocks of math at elementary level , 3rd to 7th grade
22. New Media Design | Diploma Project
22
suited the needs better.
• India or US?
Initially the product was aimed at US with the idea
and the mentorship coming from there. As Playpower
started with their research and user testing, they
realized India to be a powerful market.
While researching, the curriculum studied was both
from India and US, and insights came from both
ends. Though, it was difficult to make a standard
product for both parts of the worlds. The approach
was to incorporate insights from both the United
states and India, as it was difficult to narrow to one.
24. New Media Design | Diploma Project
24
SECONDARY
RESEARCH
(Precedent case studies)
4
25. 25
New Media Design | Diploma Project
4.1 Understanding Market
The research started with understanding what exists
in the market.
There were several platforms for which the product
could be developed. In the beginning, Playpower labs
was not clear about the kind of product they were
aiming at, but the core direction was still about “Fun
and engaging math games”.
4.1.1 Web
The target market was primarily distributed between
two platforms, The “WEB” and the “TABLETS”.
There were several products in the education
learning domain, some aimed at providing
teaching assistance to kids where others were just
assessment systems.
To name a few:
1. Apangea Math
2. Brain Pop
3. Edu Comp
4. Educational Initiatives
5. Ten Marks
6. Extra Marks
7. Dream Box Learning
8. Khan academy
9. Manga hingh
10. Code academy
11. Cognitive tutor
12. Alice
13. Sum Dog
14. Haiku Learning
15. IXL learning
16. Power my learning
17. Mathplayground
18. PBS kids
19. Aventa Learning
20. Ted-Ed
21. Think Quest
The research through these products revealed
different models and tactics used by the producers.
Tactics here refers to strategies employed by these
products, while expanding their content and market.
Generally most of these products follow a similar
structure of licensing their products to schools.This
allows them to keep track on students and their
performance through different Interfaces. A general
product model would look like one in fig 3.
We were mainly focussed on products that were
developing games and were using games as a
medium for learning. Post the evaluation of many
existing products, there were three web based
products which had a huge impact on the research
and understanding for the final product :
1. Manga high
2. Sumdog
3. Dream Box
There were some interesting strategies employed by
each one of these products that sets them apart from
the rest.
A. Manga high
Manga high consists of 16 math games and four
exercise programs for students in middle high school.
These online, flash-based games look and feel more
like mainstream games than traditional “educational”
ones. The graphics on the site are in “Manga”
(Japanese comic book) style.
Characteristics
• Assignable
The product allows the instructor or teacher to assign
a specific concept to a specific student.
• Blended Learning
The product lets teacher partially supervise the
Fig 2. Manga High free math based teaching resource
[Image Source: Mangahigh.com]
26. New Media Design | Diploma Project
26
learning process and partially be the content that is
being delivered. The product also provides teaching
assistance.
• Informal Learning
It allows learning outside formal learning environment
• Supplemental
It provides additional instruction or learning
opportunities outside the required curriculum.
• Interesting Points
1. An outstanding characteristic of Manga high is a
social component that allows schools to enter into
“math combat” with one another.
2. Its free for use as no licensing is required.
3. One can register as a school and generate as
many accounts as one desires.
4. Every game has two versions. A simpler version
and the hard version. So there are only 8-9 unique
games on the website.
5. The site has an interesting “Prodigy” product.
The product is more of an assessment test UI which
covers up most of the concepts from the US common
core stae standard curricullum for math.
A complete look at the website reveals, that the
Prodigy actually covers 8-10 times the concepts
covered by all the games on the games page. This is
interesting in terms of strategy. The games provide
the face value to the product where as the core
is represented by a very simple UI in form of their
Prodigy product.
Game structure
The inner game structuring of Mangahigh differs from
one game to another, a close look at all the games
reveal a uniform structure in some of the games.
Fig 3. A generic structure for educational products
Fig 4. MangaHigh’s Prodigy product
[Image Source: Mangahigh.com]
Product Student Teacher Parents
School
Per Student License Assessment / Games Data Analysis
27. 27
New Media Design | Diploma Project
Each game in Manga high teaches various concepts
based on the game mechanics.
The level of structurization is such, that the user
themselves can decide the difficulty as well as the
concept to be taught. This selection can also be
directed from the teacher dashboard.
Revenue model
Manga high have two revenue models:
1. They give everything for free, their adaptive
technology and the progress reports.
2. They have a “M-Sensi” functionality, where they
charge the parents for giving students challenges,
next tasks etc.
So the idea is to first addict students with games and
allow schools to freely use their product, and then
monetize from parents rather than schools.
B. Sumdog
Sum dog is an Avatar based free math games site.
They offer free games which cover 120 numeracy
skills, split in to 10 levels. The games are not
religiously tied to any curriculum.
Characteristics
• Flexible
Sumdog has a very flexible platform, where the
choice of selection of topic is independent of the
game one desires to play.
• Assignable
The product allows the instructor or teacher to assign
specific concept to a specific student.
• Multiplayer
Most Sumdog gmes are multiplayer, which means
one can choose to play against other Sumdog users
around the world.
• Games
Most of the games are devoid of narratives as they
use Physics based mechanics to raise user’s interest
in games.
For example, physics balancing game in fig 7, where
user’s focus shifts from answering to balancing and
subconsciously one ends up attempting a whole lot
of question.
Fig 5. Game structuring Mangahigh.
Fig 6. Sumdog’s fun multiplayer games for grades K-8
[Image Source: Sumdog.com]
28. New Media Design | Diploma Project
28
• Adaptive Learning
If one keeps getting the questions right, they’ll get
harder automatically. If user have problems with a
specific concept, Sumdog will help user practice by
asking more questions related to the same concept.
• Interesting Points
1. The product has an avatar system where user can
earn virtual currency. One can play games to earn
coins and go shopping in Sumdog’s online shop.
2. Its free for use for students and parents. Teachers
can generate up to 10 free licenses, but for schools
they need to license the product.
3. The product is adaptive in nature, so it lets the
system analyze the concepts one finds difficult and
then set questions accordingly.
4. Single UI to assign topics, choose avatar and set
games. This UI streamlines the process and is a boost
to user experience.
Game structuring
The game structure in Sumdog is rather simple. The UI
in the website lets the user select the topic (Concept
to be taught) and the level, and then the user chooses
the game that he wants to play. What is interesting
here is that, the topics and the levels are independent
of the game mechanics.
For example Mangahigh’s ICE ICE MAYBE in fig9
(A game teaching fractions)is entirely bound to the
concepts of fraction and numbers on a number line,
and cannot accommodate concepts like multiples etc.
All the other products have games that support the
game play and the concept to be taught, but here
Sumdog makes their platform independent of the
concepts that are being taught. The product structure
allows them to expand their list of concepts without
being pushed to make new games.
Fig 7. Sumdog’s physics balancing game
[Image Source: Sumdog.com]
Fig 8. Sumdog’s single UI approach
[Image Source: Sumdog.com]
Fig 9. Mangahigh’s ICE ICE MAYBE
[Image Source: Mangahigh.com]
29. 29
New Media Design | Diploma Project
Revenue Model
Sumdog’s revenue model is quite simple.
It is totally free for students. In case of teacher’s there
are certain restriction (5 free activities, 10 student
report and 25 free matrices).
The schools can buy a subscription to get detailed
progress report on the students, to analyze their
strong and weak skills.
C. Dream Box
Dream Box is a highly adaptive learning math program
for students at the K-5 level. It is best used by
individual students on their own (but in a classroom
setting). The system creates an independent path
through the material for each student. It assesses
students’ skills based on how they solve problems
rather than on a single end-of-session assessment.
(For this reason, the company calls it an “intelligent
adaptive learning system.”)
Characterstics
• Adaptive
The product adapts content to the knowledge level of
the learner.
• Activities and Games
The product relies on activities instead of just games
for learning purposes.
• Engaging
Dream Box uses a toolbox of feedback (audio, visual,
games, certificates). Students choose avatars and take
part in games and challenges.
• Supplemental
The product provides additional instructions or learning
opportunities outside the required curriculum.
How does it work?
Students pick a character (avatar) from about three
dozen choices. With that character, they can engage in
activities in four adventure themes (pirates, dinosaurs,
Fig 10: Sumdog’s product model
30. New Media Design | Diploma Project
30
and pets), each with 8 stories. One can then visit the
Adventure Park and the Carnival etc.
The program uses “interactive virtual manipulative”
such as sliders or bars. It can continuously monitor
not just a student’s answer to a problem but the
strategy the student adopts to solve the problem.
Dream Box’s software captures every mouse click
students make and can adjust for 60 different
parameters of student behaviour, such as how
quickly they answer questions, how many “hints” they
use to get an answer and so on. The program stores
data based on thousands of students and derive user
insight to help them learn.
Revenue Model
The product directly seeks money for different
licences it provides:
School use:
• License cost per student: $20 per year
• “Unlimited” school site license: $7,000 per year
Home use:
• Individual licenses: $12.95 per month for one child
or $59.95 for six months.
4.1.2 Approaching devices
The application market related to tablets and
handheld devices is flooded with application on kid’s
and education. There are several good products and
companies that develop learning products.
The main area of focus was “Apple App Store” and
the apps studied were mainly concentrated around
math’s based educational ones.
Some of the good educational apps studied were:
1. Brain Pop
2. Brain Tuner
3. Dragon Box
4. Telling Time
5. Math Blaster
6. Astro Math
7. Monkey Math
8. Pop Math
9. Rocket Math
10. Wings
11. Hungry Fish
12. Math Frogs
13. MathBoard
14. ChalkBoard
15. A day with a difference
16. Adding apples
17. Bugs and Buttons
18. Didackto
19. Marble Math
20. Motion Math(Wings, Zoom, Hungry fish)
21. Number sense
Entertainment Games
22. Cut the rope
23. Angry Birds
24. Where is my Water
25. Tap the frog
26. Subway Surf
27. Fruit Ninja
28. Yellow Fins
29. Temple Run
Most of these apps cover very specific concepts.
There are companies that have different apps for
different concepts (Motion Math has different apps
on fraction and addition). Some of the products were
designed to leverage the touch and different gestures
on Tablets, but the major bulk were designed to be
easily ported to web.
App store
The App Store is a digital application distribution
platform for different mobile applications developed
and maintained by Development giants like Apple,
Google and Nokia. The service allows users to
browse and download applications from their devices
and install them on the device itself.
There are number of App Stores for different mobile
platforms. The biggest of them is the iTunes store
from Apple. Some famous App Stores are listed here:
App Store (iOS), the official Apple online application
distribution system for iPad, iPhone, and iPod touch
• Amazon Appstore, an online application
distribution system for Android devices.
• Mac App Store, the official Apple online
application distribution system for Mac OS X.
• Windows Phone Marketplace, the official
application store for the Windows Phone.
• Windows Store, the upcoming application
distribution platform for Windows 8.[41]
31. 31
New Media Design | Diploma Project
How does it works?
The only motive placing an application on these App
Stores is to rank them higher when related keywords
are searched. On web platform we call it SEO –
Search engine optimization.
Most of the big companies running these stores have
their closely guarded algorithm for determining where
an application lands.
Some of the generic steps could be formulating a
constant stream of updates, adjusting the price tag,
and giving users a way to spread the word about
the app.The pricing on the app is smartly adjusted,
more than the purchasing power of your target group,
the pricing from your competitors makes a huge
difference.
Many famous app developers mention “social
networking, uploading features, and challenging
friends” important for an app . Some functionality built
into the game to include features like friends lists,
challenges, and leader boards are beneficial. They
make applications more discoverable.
Another interesting point would be to set an
actual date for app release instead of releasing it
automatically after it gets approved. [40]
If the average time to get reviewed is ~7 days, and
then a couple hours for review, the app is set to go
for sale 9 days from your submit day. [40]
Key Learning
1. Successful games on tablets are FAST. The game
mechanics should allow one to be fast and there
should be equally potential reaction from the game
(in terms of positive/negative feedback).
2. Most of the apps aimed at teaching simple but
specific concepts. The crux of these apps lies in
different mechanics that were used to enhance user
experience and engagement.
(Though web products include teaching concepts,
games on tablets don’t really teach)
3. One of the important learning’s, studying app
interfaces was to make big buttons and clean
user interface.Clean user interface here stands for
minimalistic and readable.
4. Another important task about designing an app
interface is to make it intuitive. The user should
exactly know what needs to be pressed and which
action initiated what reaction.
5. Animation is always minimal. Studying all the
major games including educational ones revealed,
how minimal animation is used with smart
backgrounds to create a dynamic composition.
Here are some apps that really inspired the product
and laid down standards for Math based educational
application development:
1. Meteor Math
2. Motion Math (Math Zoom)
A. METEOR MATH
Meteor Math encourages users to blast numbered
meteors together to find the correct mathematical
solution.
As the player progresses the game becomes harder
and the pace intensifies.
Features
• Develops four principle mathematical functions;
Addition, Subtraction, Division and Multiplication.
• Suitable for all ages, with carefully graded levels.
.
Fig 11. MindShapes Meteor math
[Image Source: http://itunes.apple.com/in/app/mete-or-
math]
32. New Media Design | Diploma Project
32
• Drills that help your child develop super fast
‘Mental Math’ .
B. MOTION MATH (ZOOM)
An animal adventure through the world of numbers.
The game allows children to zoom in number lines
exploring the concepts related to units and number
lines.
Features
• The game uses concrete objects to represent
abstract numbers: from dinosaurs in the
thousands down to amoebas in the thousandths.
• Fun animal animations and sound effects help
elementary school children master the number
line.
Fig 12. Motion Math zoom
[Image Source: http://itunes.apple.com/us/app/motion-math-
zoom]
33. 33
New Media Design | Diploma Project
4.2 Why Tablets are different?
4.2.1 Understanding the context of usage
When talking about tablets, we need to understand
the need and the context in which they are used.
With a huge boom in the tablet market, tablets are
able to make their own place between laptops and
mobile phones, which has considerably increased
the amount of time people use to spend on a mobile
device.
When thinking about the context, try to answer the
following questions:[33]
• How will the user interact with your app? Whether
seated on their lap, held with both hands, or on a
tablet stand?
• How long will the average interaction be? Seconds,
minutes or hours?
• Is the ideal way of interacting with the app
horizontal or vertical? Sometimes a specific
orientation will be ideal for the user. How will you
attract the user into using it the way you want them to
without restricting the orientation and limiting the user
experience?
• When will the user be interacting with your app? In
the morning as they drink their coffee? At night, lying
in bed? How will the time of day or the environment
they are using the tablet in affect their interaction?
• Do you think your content best fits the tablet as a
medium, does it justify itself on this medium.
4.2.2 Considerations while designing for tablets
1. Apple has a relative standard of when and how to
use the tablet interface in their iOS Human Interface
Guide.
Based on the research, we stuck to the basic
gestures in our games. Customized gesture will
require custom programming, from user’s point
of view, he will need a hint if the interaction isn’t
intuitive, or give them another way to interact with the
app and help them discover the less-intuitive gesture
interaction.
2. Fat Fingers
As frequent users of tablets know, small buttons are
frustrating. You constantly tap the screen, turn your
finger to find the active area, and if it’s close to other
buttons, you could hit another button altogether.
Small buttons that have a narrow area of activation
are just frustrating. It’s a widely accepted fact that
larger buttons, regardless of the device or interface,
are easier to find and interact with.[33]
3. Helping Hands
Even if your app doesn’t have writing or drawing
interaction, it’s important to keep the user’s
handedness in mind. Most users are right-handed,
but providing the option to change the controls to
accommodate left-handed people might be worth the
time, especially if the app requires the user to access
controls while directly interacting with the screen.[33]
4.3 Games and play
4.3.1 Why games?
• Games are a form of fun. That gives us
enjoyment and pleasure.
• Games are form of play. That gives us intense
and passionate involvement.
• Games have rules. That gives us structure.
• Games have goals. That gives us motivation.
• Games are interactive. That gives us doing.
• Games have outcomes and feedback. That gives
us learning.
• Games are adaptive. That gives us flow.
• Games have win states. That gives us ego
gratification.
• Games have conflict/competition/challenge/
opposition. That gives us adrenaline.
• Games have problem solving. That sparks our
creativity.
• Games have interaction. That gives us social
groups.
• Games have representation and story. That gives
us emotion.[3]
With all these opportunities and qualities, games
give a chance to interact and create information.
Information which is meaning full as well as engaging
34. New Media Design | Diploma Project
34
for us.
Games as an act lets you think, strategize,
understand, interact, involve, absorb and perform.
This entire process is wrapped inside the envelop of
games.
To progress in a game is to learn; when we are
actively engaged with a game, our minds are
experiencing learning a new system.
The very obvious difference between games and
traditional schooling is that good games always
involve play, and schooling rarely does[13].Games
include PLAY!
4.3.2 What is play?
Play is a term employed in psychology to describe
a range of voluntary, motivated activities normally
associated with pleasure and enjoyment. Play is
most commonly associated with children .
Many prominent researchers in the field of
psychology (including Jean Piaget, William James,
and Sigmund Freud) have viewed play as endemic to
the human species.
Play is often interpreted as less serious; yet the
player can be intently focused on his or her objective,
particularly when play is structured and goal-oriented,
as in a game [34]. Accordingly, play can range from
relaxed, free-spirited and spontaneous through
frivolous to planned or even compulsive.
4.3.3 Play and games
Games by contrast, tend to have defined goals.
Games allow a sense of free play which the child
pursues on his own terms. While in the game, the
child accepts failure as a possibility.
Games lay challenges which look worth attempting
and channels player’s effort.
Gaming is play across media, time and social
spaces. It includes interaction with physical matter,
digital artefact, humans (Parents and siblings) as
well as games itself (hypothetical character and
situations).
Games need a player with an attitude to challenge,
accept, learn, absorb, being creative and fail. Without
a willing player a game is a formal system waiting to
be inhabited.[27]
A casual game is a video game targeted at or used
by a mass audience of casual gamers. Casual
games can have any type of game play, and fit in any
genre. They are generally identified by their simple
rules and shot game plays.
Most casual games have similar basic features:
• Extremely simple game play, like a puzzle game
that can be played entirely using a one-button
mouse.
• Shot engaging game plays.
• The ability to quickly reach a final stage.
4.4 Casual Games
4.4.1 Casual gamer
“Casual gamer” is a loosely defined term used to
describe a type of video game player whose time or
interest in playing games is limited compared with
a hardcore gamer. For this reason, games which
attempt to appeal to the casual player tend to strive
for simple rules and ease of game play, the goal
being to present fast game play experience that
people from almost any age group or skill level could
enjoy.[42]
4.5 Curriculum Mapping
4.5.1 CBSE/GSEB
The team at Play power Labs had to understand
how they would establish a relationship between
their games and what is taught in the classroom. An
important task was to develop games which were
meaningful to the students within the age group of
the desired grade. Therefore they tried to figure out
the level of questions in mathematics to be asked,
such that the student is able to co-relate it with what
is being taught in the classroom.
The need was to map, which age group learns what
kind of concepts in each class, from Grade 1 to
Grade 7 in the Indian curriculum. With access to all
the textbooks of GBSE as well as CBSE, the topics
learnt by each class in mathematics with the overall
concepts were documented.
35. 35
New Media Design | Diploma Project
The exercise was helpful in designing the content of
the games for specific age groups. Moreover, while
going through the textbooks of various standards,
many visual images were used in textbooks to create
clarity and make concepts explicit for the student.
The student in a specific grade makes a transition
from visual backed understanding (i.e. pictures of
various objects are used more rather than textual
content) to text-based understanding. For example
in CBSE textbooks of Grade 5, It was found out that
the images used, to make a student understand
concepts in mathematics were considerably reduced.
At the end of this task, the overview of what concepts
were taught in each grade was documented (i.e. from
Grade 1 to Grade 7).
An overview of the documented data of the
curriculum is as follows:
• Concepts like Addition, Subtraction, Multiplication
and Division were defined for each grade. Like in
grade 1, only single digit addition is introduced.
The concept of carryover is not taught.
• There is an introduction to various kinds of
measurement in each grade.
• Understanding of visual information in textbooks
(which means gaining knowledge what kind of
visual information is used in textbooks to make
them understand concepts)
An important understanding that was discovered
while exploring the curriculum of the CBSE and
GSEB textbooks was that, there could not be any
element in the game which is outside the vocabulary
of student, since he/she would not be able to relate to
it while playing the game. For example a timer which
counts up to a double figure would have no meaning
to a student who has not learnt numbers up to double
figures.
The following table shows how the curriculum was
mapped on the basis of study on the textbooks as
well as some products.
4.5.2 United states Common core standards
After studying the Indian curriculum, the US common
Core standards were studied. The US common core
standards are religiously followed by major products
in the US.
The common core state standards are designed for
consistent; clear understanding of what students are
expected to learn, so teachers and parents know
what they need to do to help them.
The common core standards lay different knowledge
components at different grades for students to
achieve.
Based on observations, the US common core
state standards are closely aligned with different
state board curriculums practiced in India (CBSE &
GSEB).
Having planned most of the games, we mapped
games to different knowledge components that they
relate to.
Fig 13: CBSE & GSEB books, grade 1-7
Fig 14: CBSE & GSEB based curricullum map
36. New Media Design | Diploma Project
36
The concept mapping (Fig 16) of different games
allowed us to understand the scope of each game
clearly. It also helped us support each of our game
and gave us correct tangents for content creation
practices.
Fig 15: United states common core standards for math.
[Image source: http://www.corestandards.org/]
37. 37
New Media Design | Diploma Project
Fig 16: Games to Knowledge component mapping based on US common core standards
39. 39
New Media Design | Diploma Project
5.1 School visits
For understanding the end user, there was a decision
to visit some schools and ask questions that would
prove essential in developing the games. After a
few discussions within the team, few questions were
prepared for the teacher/anyone related to education
within schools.
5.1.1 Observing and understanding classroom setting
The initial visits to the schools revealed the nature
and context in which the product was to be placed.
Initially it was assumed as a wrong approach
studying Indian classrooms, when the product
primarily was for the US audience.
In discussion with team members placed in US, the
playpower team finally decided to go about observing
and gathering insights from Indian classrooms . One
of the key reasons behind the decision was to see
the difficult terrain for the product (Internet speed,
slow machines).
Some of the primary observations and understanding
from the class rooms were:
1. Most of the computers do not have flash. Adobe
does speak about their 99% penetration on desktops,
but that is not true.
Though flash isn’t the problem. It’s very difficult to
make interactive products for school, independent of
these platforms. It’s an obligation for school’s to have
these platforms installed as a prerequisite.
There was a need to clearly communicate this to
clients when they buy the products.
2. Generally a single section has around 50 students
but none of the computer labs were equipped with 50
computers, so there is a possibility of two students
sharing a computer.
This gives a new tangent to think about multiplayer
games that could be played on a single screen.
5.2 Literature review
One of the most important parts of the research was
the precedent studies that happened. This included
reading through books, articles and research papers.
Personally the most insightful information and
understanding was developed while reading research
papers. There were several areas which were to be
researched. Some of those were:
1. Educational games frameworks.
2. Designing digital games.
3. Understanding how learning happens through
digital artefacts.
4. Studying good user interface practices.
5. Understanding interaction design for tablets
and web.
6. Understanding different game genres.
9. Visual ergonomics (colours, animations and their
impact).
Most of the readings had a big impact on the
understanding of user psychology and their
understanding of the world around.
The research domain was restricted between the age
group 7-12yrs, though most of the research findings
were aimed at much larger set of audiences.
Some of the most interesting and important
research readings that inspired and impacted the
game designs are listed here:
1. Piaget’s Constructivism, papert’s
Constructionism: Whats the difference
This paper talks about two of the most renowned
educationist and child psychologist of their times.
They both believed that knowledge is actively
constructed by the child in interaction with their world.
Teaching is always indirect. Kids don’t just take in
what’s being said. According to them projection of the
inner self and ideas is key to learning.
Learning: The reading gives a clear idea, as to why
teaching is not the only way for student to learn. It
also supports the notion of games for math, which
lets one build his own understanding of these
concepts in terms of knowledge.
2. Children’s Acquisition of Number
Words and the counting system
The paper talks about children and their
understanding of the concept of Number words
and related numerosity. The problem here is to
40. New Media Design | Diploma Project
40
understand that the number words do not refer to
individual items, or to properties of individual items,
but rather to properties of set of items.
Learning: This paper gave an understanding as to
how children look at numbers and related concepts.
This gave a realization that we have already
mastered and taken these concepts for granted.
3.Moving Learning games forward
An extensive paper that talks about history of
educational games and how they have evolved. The
paper talks about the entire platform (Mobile, Tablets,
desktop, Gadgets) on which games are available and
aims at answering many question related to design
and development of educational learning games.
The paper presents a good critique on categorizing
what could be called as a game. It suggests looking
at strength and challenges of both classrooms
and games. there is a need to situate educational
learning games at the intersection of both where they
are most productive.
The writer emphasizes that a good games always
involve play, schooling rarely does.
An interesting section from the paper discusses
different kinds of freedom that a player might want to
access:
1. freedom to fail;
2. freedom to experiment;
3. freedom to fashion identities;
4. freedom of effort; and
5. freedom of interpretation
Learning: The paper lays down some important
learning game design principles. Some of them led
to important design decision in the game design
process. Following is a list of some principles based
on the learning:
• Choose Wisely
The hype around the education gaming market
pushes whole lot of games. Games work well for
many audiences, topics and contexts, but they
may not be the best tools for all kinds of topics in
every context. There were many attempts at games
about topics Like Photosynthesis, but most of what
results is not a game at all, but a more typical routine
classroom activity (like flashcards) with a score and
the name “game” attached to it. One must consider
what it is about this topic that may (or may not) be
appropriate as the basis of a game.[27]
• Think small
There could be two reasons in support of thinking
small:
1. Sometimes the right choice is to make a small
casual game, because that style of play meets the
learning goals of the activity.
2. At times it might be useful to create a small
prototype of a game to test the fundamental concept
before going for major development effort.
• Put learning and game play first
The principle raises a question over the famous
discussion of “Who came first, the technology or the
game play”. The paper suggests that both should be
considered simultaneously. Good educational games
will consider both the learning goals/content and the
game play at the same time, with enough flexibility
to iterate between the two to change one or both
simultaneously.
• Play Everywhere and Anywhere
Mobile games played on cell phones, PDAs, or iPods
are becoming more common and more sophisticated.
People can play these games for minutes at a time
in their personal spaces – on the bus, waiting in line,
and even while on the go.
Educational games can use this style of play, and
Fig 17. The photosynthesis Game
[Image Source: Moving Learning games forward]
41. 41
New Media Design | Diploma Project
can be designed to take advantage of the personal
spaces in students’ lives – the time between classes,
before school, after school, going to and from school,
etc.
• Define the Learning Goals
The success of learning games would depend on
success of students and that could only be reflected
through data gathered while playing. It is imperative
that researchers and developers more clearly define
their learning goals, and corresponding assessment
tools should be developed.
There is a need to simplify the process of data
logging and data analysis. Another important aspect
with data, is the meaningful visualization of data for
all the stakeholders of this ecosystem to analyze and
understand.
The success of educational games depends on
their ability to enhance learning and of these tools in
quantifying learning.
4. Howard Gardener, Multiple
Intelligences and education
In his book gardener goes against the old age belief
of Intelligence being a single entity that was inherited;
and that human beings initially a blank slate could be
trained to learn anything.
He divides intelligences in seven different
categories however he maintains that none of these
intelligences operate independently.
Learning: The theory has helped us to reflect on our
practices. It allows people not to look at intelligence
as magical black box but as something that is very
specific to an individual.
As a game designer it allows them to design
mechanics around a single intelligence
simultaneously leveraging the other.
5.Colour scheme preferences of
elementary school children in their
school environment
The paper talks about colour preferences. There are
different aspects of colour preferences like culture,
Education Level, past experiences, Memories,
History, perception of colour, age gender and the
psychological and physiological conditions of the
user.
There were some interesting points raised when
paper talks about different established colour
preferences:
1. A research suggested that women might prefer
pink as a legacy of their fruit gathering days when the
preference helped them identify the berries from the
foliage.
2. A neuroscientist argues that small differences
between girls and boys are amplified in their
socialisation and hard-wired into their brains with no
biological preferences.
Learning: There is no scientific evidence that boys
prefer blue and girls prefer pink. Up until the early
20th century, the trend was the opposite and baby
boys were dressed in pink and girls in blue. There
are also some small studies suggesting that adults
of different cultures have different tastes in colours.
It’s clear that colour preference is learnt rather than
innate.
6. Eight ways of thinking about problem
Solving
An interesting paper that summarizes that a problem
solving process has three steps:
1. The data
2. The goal
3. The method
Each one of these can have different states: given,
familiar, unfamiliar and incomplete
Learning: From a game designers perspective it
lets them define problems. The paper allows them
evaluate the content of educational games and
see if there are existing problems and what level of
problem solving would be required from the user’s
end, to attain the final goal.
7. Game based learning : The learning
revolution
The writer suggests that digital games based learning
42. New Media Design | Diploma Project
42
enables the learners to actually experience a given
subject rather than just reading about the subject.
Learning: The idea of the paper is to understand
games as a medium to stimulate motivation and
stimulate engagement of learners in a positive way.
8. Perception in Visualization
An interesting article that talks about “Preattentive
processing” in humans. There are some properties
of human visual system that are called “preattentive”,
since their detection seemed to precede focused
attention.
A simple example of a preattentive task is the
detection of a red circle in a group of blue circles
A viewer can tell at a glance whether the target is
present or absent.
There are various features that have been identified
as preattentive:
1. Target detection
2. Boundary detection
3. Region detection
4. Counting and estimation
There are several theories proposed to explain how
preattentive processing occurs within the visual
system.
Learning: The preattentive cognition theory gives
an insight over how our brain channels the visual
system, this includes object that would be more
accessible visually in comparison to others.
This understanding proved very helpful in designing
intuitive interfaces for fast paced games.
9. Blooms Taxonomy
Bloom’s Taxonomy is a useful way to categorise
knowledge and skills. This Taxonomy categorises
learning into three domains: knowledge (Cognitive
Domain), skills (Psychomotor Domain) and attitudes
and values (Affective Domain). When developing
learning objectives for a game, one may need to
write objectives from each of these domains.
A major focus is given to the “Cognitive Domain”. The
writer categorizes knowledge in six different levels,
going toward the tip of the triangle.
Learning: Blooms taxonomy presents a strong
approach to evaluate learning. The six categories
of cognitive domain allows people to understand
learning process as a six step process which starts
with remembering and ends at creating.
In terms of game design at times this map is
reversed where user create in the first act (Age of
empires) and learn as the time passes on. Though
while designing games one can always visualise the
user, going through these steps in the process of
achieving the goal.
5.3 Research influences
1. Jean Piaget
Fig 18. Preattentive Processing: searching for a target red
circle based on a difference in hue.
[Image Source: http://www.csc.ncsu.edu/faculty/healey/
PP/]
Fig 19. Bloom’s Taxonomy
[Image Source: http://ww2.odu.edu/educ/roverbau/
Bloom/blooms_taxonomy.htm]
43. 43
New Media Design | Diploma Project
- WHO?
Jean Piaget (9 August 1896 – 16 September 1980)
was a French-speaking Swiss developmental
psychologist and philosopher known for his
epistemological studies with children.
Piaget placed great importance on the education
of children. As the Director of the International
Bureau of Education, he declared in 1934 that “only
education is capable of saving our societies from
possible collapse, whether violent, or gradual.”[46]
- AFFECT
Piaget clearly says that “Teaching is always indirect”
Kids don’t just take what is being said[13]. One need
to create a system where, they are allowed to explore
indirectly rather than pushing things on them (As in
playpower’s case, where the games are not meant
to teach but to allow practicing and enjoying math).
He understands knowledge as experience that is
acquired.
2. Seymour Papert (MIT)
- WHO?
Seymour Papert (born February 29, 1928 in Pretoria,
South Africa) is an MIT mathematician, computer
scientist, and educator. He is one of the pioneers
of artificial intelligence, as well as an inventor of the
Logo programming language.
Papert worked on learning theories, and is known
for focusing on the impact of new technologies
on learning in general and in schools as learning
organizations in particular.[43]
- AFFECT
In paperts constructivist theory which is highly
inspired form Piaget. He moved from universal to
individual learner. He terms projecting our inner
feelings and ideas as true learning. Expressing these
ideas help us shape our world while we communicate
with others. Papert gives huge importance to media
and context in shaping ones ideas as building blocks
of learning.
3. Mitchel Resnick (Lifelong
Kindergarten)
- WHO?
Mitchel Resnick is LEGO Papert Professor of
Learning Research, Director of the Okawa Center,
and Director of the Lifelong Kindergarten group at the
MIT Media Lab.
He explores how new technologies can engage
people in creative learning experiences. Resnick’s
research group developed the “programmable brick”
technology that inspired the LEGO Mindstorms
robotics kit. He co-founded the Computer Clubhouse
project, a worldwide network of after-school centers
where youth from low-income communities learn to
express themselves creatively with new technologies.
- AFFECT
So where papert and Piaget laid down their
understanding about kids and learning . Mitchel
resnik clearly applies these theories in tangible
products. Looking at SCRATCH as a programming
environment for kids to lego Mind storm and further
computer clubhouse initiatives. The idea is to
empower kids with materials to explore. [44]
4. Sugata Mitra(MIT)
- WHO?
Sugata Mitra is a leading proponent of Minimally
Invasive Education. He has a PhD in Physics and is
credited with more than 25 inventions in the area of
cognitive science and education technology.
- AFFECT
The most interesting thing about Sugata Mitra is his
belief in child being way more intelligent than we
expect them to be. He believes in solutions that
complement the framework of traditional schooling. A
solution that uses the power of collaboration and the
natural curiosity of children to catalyze learning.
Sugata Mitra’s “Hole in the Wall” experiments have
shown that, in the absence of supervision or formal
teaching, children can teach themselves and each
other, if they’re motivated by curiosity and peer
interest.
44. New Media Design | Diploma Project
44
5. Howard Gardener (Theory of multiple
Intelligences)
- WHO?
Howard Earl Gardner, an American developmental
psychologist who is a professor of Cognition and
Education at Harvard Graduate School of Education
at Harvard University.
He is famous for his “Theory of multiple intelligences”
which states, not only do human beings have several
different ways of learning and processing information,
but these methods are relatively independent of
one another: leading to multiple “intelligences” as
opposed to a general intelligence factor among
correlated abilities
- AFFECT:
In his works gardener clearly distinguishes eight
different types of intelligences. Describing all these
intelligences he clearly explain the understanding
and signs of each of these, he also points at ways
through which one can develop these specific
intelligences.
6. Arvind Gupta (Toys from trash)
- WHO?
Arvind Gupta is an Indian toy inventor and
populariser of science.
- AFFECT
For almost 30 years, Arvind Gupta has been taking
his love for science and learning to the children
of India. He’s the dream teacher we all yearned
for. Gupta has travelled to over 3000 schools,
demonstrating captivating science experiments to
wide eyed children. What sparks their imagination
further is that Gupta uses only everyday garbage as
the building blocks of these experiments.
He takes trash and creates unforgettable
experiments and experiences for children. An encore
purpose for everyday trash is a wonderful by-product
of his work.[45]
5.4 Literature review reflection in game
design.
There were some major design decisions taken
based on the readings in the precedent studies,
some of them are listed here:
1. The human visual perception listed in “preattentive
processing” dictated the clean UI approach in most of
the games.
This dictated the big elements and playing around
with high contrasting colours in games. The idea was
to support easy visual access to different elements.
2. The paper on problem solving helped to frame
questions in form of real problems.
This paved way for creation of good problems for
users by either providing less data or making the
user face an unknown method.
3. With an understanding on visual numbers and their
relationship with Numeracy as a concept, games like
“Jelly beans” were developed.
4. Relating learning with engagement and immersion
helped in developing games with interesting
animations and small narratives.
There was a reflection of engagement in form of
objectives and different game design elements like
different kind of bubbles in bubble pop.
5. A paper suggested, that there is no born colour
preference in kids[11]really helped the justification for
bright colourful elements in game design.
5.5 How can games accelerate learning?
There are some major points to support games
intervention in learning:
1. One of the most important fact about games is
“There’s no instructor”. Children and adults of all
ages learn how to play some of the most complex
games, and pick up spectacular Skills, without any up
front instruction.
45. 45
New Media Design | Diploma Project
2. Massive amounts of feedback, failure and
Rewards are possible within a single game.[19]
3. Players learn how to learn through the dynamics
and the strategies they aquire within the game play.
[19]
4. Learners are able to take risk, learn by failure and
have to constantly push them for the next task. The
idea is to try things out, test them and try again.
5. Inside games your acts are aimed at more
than learning. You play different roles including a
participant, teacher, creator, of course learner.[27]
5.6 Need for math games
Math skills need quite a lot of practice before they
become embedded in one. Practising math skills over
and over again can be rather boring. That’s where
playing math games can help. There are so many
different games to help one master all the different
mathematic skills, that learning math becomes fun.
Most of the math games are designed to address a
core problem in STEM education, Number Sense.
Over 30% of 8th graders lack basic proficiency in
math, in fact, over 50% of all 8th graders could not
place 3 fractions in the right order, from smallest to
largest, according to a recent NAEP test. This is a
clear reflection of the need for effective educational
interventions that improves number sense.
After all, the lack of Number Sense is not just a
problem for these students, but also for a countries
growth and industry, indeed these skills aren’t just
lacking in high school students but are also a major
problem for college students. The lack of number
sense is a critical barrier to the personal development
of future citizens in an economy.
46. New Media Design | Diploma Project
46
UNDERSTANDING
TECHNOLOGIES
6
47. 47
New Media Design | Diploma Project
6.1 Games designed for Tablets and Web
There were several things taken care of while design-ing
games on web as most of them were to be ported
to Tablets:
1. The buttons in most of the cases were purposely
designed larger so that the game can directly be
ported for touch interactions.
2. The number of steps of interactions were aimed at
reducing the input from users end, this allows user
to take a shorter path to the desired screen on any
platform.
3. Use of Text fields was avoided in most of the cas-es.
Games with text fields on the tablet will either re-quire
a customized keypad or the default iOS keypad
which will need huge changes in the game interface.
4. Most of the interaction were designed in such a
manner that they are meaningful on tablets. This
required heavy visualization and fore planning, since
most of these interactions were crucial parts of the
game mechanics.
The best example to this would be Bubble Pop game
where the Bubble pop (the animation and the visuals)
were planned in such a manner that they look as
effective with touch as they do with mouse.
6.2 What was being Developed?
The idea was to make flash games on iPAD that
were fun and engaging. The aim was not to teach
Math and neither to make assessment test for
children’s to categorize them, rather to develop an
intuitive understanding of math with the help of short
narrative games.
The idea was to make small math games that talk
about different concepts and are placed with intrigu-ing
mechanics, interesting narratives and attractive
aesthetics.
With fun and engagement as primary goals, the
Playpower team started looking at the games around
and the only domain which looked to suffice their
needs was of CASUAL GAMES. By very nature they
are short in game play but highly addictive as well
as have great replay values. The success to these
games would lie in their replay ability.
6.2.1 Why adobe Flash?
Looking at different tools present in the market, one
of the front runners was Adobe flash. Flash has a
legacy of being the emperor in the casual games
domain.
There were other platforms that were looked upon:
1. Adobe Flash
2. Corona SDK
3. Unity 3D
4. IOS(Native code)
One of the core issues to be handled was the cross
platform ability of the tool, so that one can publish
content sitting at the same platform for various
Appstores and hardware devices. This would help
developers broaden the user base and is one of the
key strategic decision.
The final decision was based on the power to
reach Android and iOS devices by targeting the
latest Adobe Flash Player and AIR runtimes. This
paved way for a huge market to developers and
simultaneously allowed them to publish content for
the web.
Fig 20. Adobe games on different 2D & 3D platforms
[Image Source: www.gaming.adobe.com]
48. New Media Design | Diploma Project
48
6.2.2 Challenges ahead with Adobe Flash
Flash is slow since it is a framework. One can under-stand
a framework as something built upon a more
native piece of code. So whatever flash call’s for, is
sent first to some other more robust framework work-ing
under the hood for flash and then flash is able to
perform that function.
One of the recent development in flash player was
the release for the STARLING framework for mobile
devices. This meant, there was now a more robust
and native form of rendering technique quite different
from flash’s own technique, which could be leveraged
to perform rendering on mobile devices with less
computational power.
6.2.3 Starling Framework
Starling is an Action Script 3 2D framework devel-oped
on top of the Stage3D APIs, available for the
desktop in Adobe Flash Player 11 and Adobe AIR 3.
Starling was designed for game development, but
one can use it for many other applications. Starling
makes it possible to write fast GPU accelerated appli-cations
without having to touch the low-level Stage3D
APIs.
Write your code once and deploy it on any platform.
As Starling is built on top of Adobe’s Flash technol-ogy,
it runs not only in the browser, but on all major
mobile platforms out there, including iOS and An-droid.
6.2.4 Understanding Spritesheets
A sprite sheet is a collection of sprites arranged into
a single image, where each sprite represents a frame
of an animation, an asset, a part of an image. The
idea of a sprite sheet has been utilized for a long
time, namely in early gaming systems like Atari and
Nintendo for faster rendering.
Fig 21. Generic flash publishing cycle
Adobe Flash
Mouse Events
Content
Flash Player Publish Deploy AIR Format
(swf)
Audience
Touch Screens
Basic Rendering Sprite Sheets
Web Mobile Devices
49. 49
New Media Design | Diploma Project
The idea is that computer GPU’s are very efficient in
drawing triangles. To draw a rectangular frame, stage
3D API joins two triangles to form a quad that can
represent a frame from a sprite sheet.
This optimization lets flash render things faster than
bitmap rendering approach.
6.2.5 Need for starling?
The need for all these frame works, sprite sheets,
rendering engines and GPU boils down to processing
power or in laymen’s terms: how fast you can render
visual elements?
What these frameworks and GPU allow one to do,
is to access low level hardware inside the devices.
These hardwares are generally not accessible
though generic API/IDE’s (Flash, Java, and
Processing).
Another need for this framework arises because
of, the platforms other then laptops and desktop
computer on which the content is deployed.
Having angry birds running on a IPAD is different
from running it over a desktop. Generally, mobile
devices are computationally weaker in comparison
to desktop / laptops. In light of these issues
programmers and content developers needed a way
of exploiting the best of what these devices can offer.
Though the goal is not to compromise on quality, yet
there are restrictions and issues that are needed to
be dealt with while using these tools.
6.3 Technical requirements altering game
design.
The key to success on a mobile device with Starling
is, less animations.
The new way in which developers can leverage fast
rendering in flash is through sprite sheets. Sprite
sheets can be understood as big transparent (.png)
sheets holding entire necessary frames for anima-tion.
The same technique is used by most of the mobile
platforms that have restricted amount of computation
power to render graphics.
The only restriction that sprite sheet imposes is
the use of small animation. This small animation at
each frame could only account to around 20% of the
screen. What is meant by animation here is moving
elements that change in shape, size and colour.
Fig 22. A Spritesheet
[Image Source : http://www.codeandweb.com/what-is-
a-sprite-sheet/]
Fig 23. Stage 3D drawing triangles
[Image Source : byte array.org]
50. New Media Design | Diploma Project
50
6.4 Product technical model
The technical model followed, revolves around
the idea of randomized controlled experiments.
Educational games provide an opportunity to use
design experiments to optimize the educational
outcomes of the software.
A primary goal of the research conducted at CMU
has been to understand how different game design
factors affect player learning and engagement. A
design factor can range from the number chosen
as an endpoint (0 or 1, for instance), to the
aesthetic of the choice of answer, to multitude of
ways feedback can be represented. In order to
systematically investigate these factors, developers
implement these design factors as flexible xml-based
parameters that can be determined at the game
runtime.
6.4.1 Software Design
Level designers use a GUI xml editor to create
specific instructional units by modifying xml game
parameters, which include the game elements
(For a game like BSNL, this would be endpoint’s
where as in right wrong games this would become
the deceptive probability of one of the components
of equation), the items presented, the time limit,
the error tolerance allowed, the item sequencing
algorithm etc. We are then able to create online
experiments that randomly assign new players to a
set of different game sequences.
The game sends a GET request to a PHP script on
our server requesting a level XML file. On the server,
we use algorithmic method to randomize the delivery
of different xml level sequences to new players.
An XML level editor will provide an easy interface for
level creator to generate customized dynamic XML’s
6.4.2 Data logging and analysis
The various design factors presented above
constitute the independent variables in online
experiments. Game data logging needs to capture
both these independent variables as well as
dependent variables, such as a player’s accuracy
on each item, their reaction time, and a binary field
indicating whether they successfully completed the
task in hand.
The primary areas of our interest are player learning
and engagement. Player engagement is defined by
the number of trials played before choosing to quit (or
the amount of time).
Measuring player learning is slightly more
complicated. We define learning as improvement
over time (or more specifically, over opportunity). A
learning curve can be defined, which plots the rate
of error over the number of opportunities. However,
because there are multiple skills that may comprise
performance in the game, we need to define a
Fig 25. Level XML editor
Fig 24. Starling’s rendering pipeline under Flash IDE
51. 51
New Media Design | Diploma Project
knowledge component model by labelling each item
in the game according to the knowledge component
it represents. For instance, estimating 1/2 requires
a different set of knowledge components than
estimating 2/3.
6.4.3 Online Multivariate Testing
Some of the games by Playpower Labs were hosted
on a very popular website (www.brainpop.com) that
was being used in 20% of schools in USA. As a
result of this exposure, Playpower Labs logs ~ 1,000
play sessions on a game each day. While all players
are anonymous, the majority of play sessions occur
during school hours, which suggests that players
reach games during school. The demographics of
Brain pop suggest that our players range in age from
9-14. A session ID is generated when a player starts
the game and that ID is unique to that particular
session until the player leaves the website.
When players begin games, they have the choice
to different concepts. While one is not able to log
individual students over multiple sessions, it is
documented when players leave one version of
the game and start another (e.g., they quit playing
fractions and start playing decimals). When they
begin playing in one of these number domains,
they are randomly assigned to a different xml level
sequence.
With this basic experimental infrastructure Playpower
Labs can run a large number of experiments where
thousands of players are assigned to different
conditions.
With support from CMU based research on learning
games, the effortwas to build an infrastructure to
support games based design experiments. The data
analysed from such experiments provide Playpower
labs with a concrete ground for understanding and
altering user engagement variables.
Fig 26. Data analysis based on data loggging in
53. 53
New Media Design | Diploma Project
7.1 Building framework vs Individual
games
With the start of ideation for games, there were two
different models for designing the games. The first
being more of a frame work where one can have
different concepts taught under single mechanic and
the other, a specific concept being taught in each
game.
The approach looked sceptical in the beginning
but later it was better placed in terms of developing
games for a product.
The essential difference between the framework
model and the individual model are the mechanics,
that was meant to be similar for the entire product.
There was an introduction of subtle changes in
mechanics for both the game models:
7.1.1 Framework (Bubble pop, Right wrong,
Magnitude comparison, BSNL )
Screens:
Splash >Macro>Micro>Game Screen
The mechanics still include the difficulty level (Easy,
Medium, and Hard). The framework can include
various concepts and difficulty levels which were
difficult to segregate based on user interaction.
User clicking thrice to reach his desired set of
questions was eliminated. For E.g. after two levels
of interaction at “Micro” and “Macro” level we allow
the user to set the difficulty of question based on his
current performance. By “current” we mean, if he
plays well, the questions intelligently become harder
and vice versa.
7.1.2 Individual (Clock Game, angle asteroid,
Coordinate)
Screens:
Splash >Macro>Game Screen
In case of individual games, the objective was
targeted at very specific concepts. Since the scope
of the games was rather small we didn’t want the
user to attain a sense of confidence very quickly.
Removing the (Easy, Medium, and Hard) mechanic
from this model ensures that the user continuously
engages with the games and the concept without
evaluating the difficulty of questions. This way user
would be able to spend more time on a specific
question.
The bottom line is, not knowing that one has been
continuously answering the harder questions
correctly, which will keep one on his toes.
7.2 Understanding MDA framework
During literature review on games and game models,
MDA framework was studied, it stands for Mechanics,
Dynamics and Aesthetics. The framework looks at
a game from two different perspectives, where the
components of the framework sit in the centre.
Fig 28. Bubble POP gameplay screen
Fig 27. Angle asteroid gameplay screen
54. New Media Design | Diploma Project
54
The MDA framework formalizes the consumption
of games by breaking them into their distinct
components:
Mechanics: The rules and concepts that formally
specify the game-as-system.
Dynamics: The run-time behavior of the game-as-system
+ players.
Aesthetics: The emotional responses evoked by the
game dynamics.
7.2.1 Dissecting a game based on MDA. (Bubble
pop)
Let’s see a dissection of bubble pop game based on
this framework. This will help one understand how
following the MDA approach allow game designers
to control different elements of game design, which
also includes programming and development assets.
Bubble POP
Mechanics
The mechanics would account for all the rules and
in game elements that define the game play. These
elements were designed to support the aesthetics of
the game. While designing the mechanics, the game
designer also looks at emotional factors that make
a game fun. There are several kinds of “fun” that the
game designer would try to incorporate in his game
based on the dynamics.
In bubble pop the different mechanics would be:
• Popping the Bubbles
• Answering the maximum number of question in
90 seconds
• Introducing special bubbles
• The “Easy, Medium, Hard” bar that increases the
difficulty of question based on your performance
• Saving higher scores on leader boards and
appearing on the “Wall of fame”
• Achieving objectives to gain coins
Based on these mechanics the games designer
would try to evoke:
• Sensation, where the game is fun because the
player is experiencing something new.
• Discovery, where the game is fun because the
player needs to explore the game and discover
its secrets.
• Expression, where the game is fun because the
player is able to leave his/her mark on it and play
it according to their preferences.[36]
Dynamics
The dynamics of a game is the runtime behaviour
of the game that can be somewhat predicted when
forming the game rules and objectives, however the
dynamics cannot fully be understood until the game
is played.
Another understanding of dynamics is the user
tactics and strategies that they employ and develop
while playing the game.
Taking both of these attributes of dynamics in
consideration, here is a list of some observed
dynamics in bubble pop:
• While deciding the levels to play, one would start
with concepts that he is good at.
• When bubble appears, the pattern in which one
would start popping would entirely depend on the
runtime placement of bubbles or the appearance
of random special bubbles.
• The time taken by the player to answer each
question would also depend on the appearance
of special bubbles or the type of special bubble
that appeared.
• The appearance of a special bubble and the
users choice of concept would finally reflect
upon, how fast users are able to achieve the
desired achievements and high scores.
Fig 29. The two stakeholder in gamedesign process
Fig 30. Three components of a game
55. 55
New Media Design | Diploma Project
Aesthetics
Looking at Bubble pop from an aesthetics point of
view, everything that interfaces with the player comes
under that. This will also include the interaction and
experience designed for the user within the game
play.
The game aesthetic will include all these elements:
• Visual elements (Design language: the
landscape theme and the use of bright colours)
• Animations (bubble popping animation)
• User Interface (The position of all the elements
on screen based on usability practices and
assumptions)
• Interaction (The mouse interaction with Buttons,
No Button at splash screen, bubble pop)
• Narrative (The act of making the user understand
the game, question popping in starting to
highlight itself, Pig animation when coins are
added)
• Sounds (Bubble pop Sound, coin sounds)
7.2.2 How MDA helped?
The MDA framework lets the games designer
segregate a game design into three different
components. He can now handle each one of them
separately but not independent of each other.
In one approach he can start looking from the user/
players perspective where the interface starts with
aesthetics. While designing aesthetics one takes
care of the dynamics that will be building upon the
mechanics of the games. A similar approach would
be reversed for designer where the mechanics
generate dynamics which further generate
aesthetics.
The framework is a good tool to analyse a game and
understand the dependency of one component of
game design over another.
7.3 Understanding content development
Developing content for games is quite a task in order
to meet standards of education set by different state
governments and the US parliament (in India it would
be different state boards).
All games were mapped to different knowledge
components they aling to.(following the US common
core standards publishing’s). This provided a fair
idea, as to what needed to be asked.
This was followed by a research through academic
curriculum in the form of different textbooks and
questions types, that were used while teaching these
concepts.
Finally, the content development started:
Content Development (Manual / Algorithms)
There are different products that use different ways
of content creation. Content creation here represents
the set of question that are part of the game design.
There are three ways of going about content
creation:
1. Manually created XML
2. Programmatically generating XML
3. Algorithms
7.3.1 Manually created XML’s
In case of a manually created XML, each game has
two set of XML
1. The progress XML that sets all the generic
parameters for the games.fig33
2. The level XML that has questions written for a
specific level.fig34
In fig33, the part one (1) describes all the node
parameters that set the games state with name,
number of stars and coins.
In part two (2) the XML describes a particular level
and details for the level. These details include
number of variables that help make the question
generation algorithm more random and effective.
Now in case of a level XML, the basic level details
are mentioned in the starting, stating the time limit
and other parameters.(start count, coins, total pos
etc)
Fig 31. Coins collecting pig
56. New Media Design | Diploma Project
56
7.3.2 Programmatically generating XML’s
Programmatically generated XML follow a similar
structure explained above. These XML are dynami-cally
generated using algorithms.
Fig 33 Progress XML
Fig 32. The content generation flow
57. 57
New Media Design | Diploma Project
Algorithms
An algorithm would dynamically generate questions
when needed. The nature of these algorithms is
interesting.
The way these algorithms are designed is based on
probability. The algorithm by default generates an
ideal equation.
For example the algorithm(Fig 35) is written for the
Right Wrong game where the user needs to figure
out if the given equation is right or wrong. An ideal
equation here would be:
Left + right = ans (2+5 =7)
Now the system is programmed in such a manner
that it generates random number , in case of above
equation it is “rand1”, this random number dictates
the probability of changing one of the components of
this equation to make it incorrect.
The three components here would be the left, right
and the “ans” parameter. Based on developers
understanding, out of these, one of the parameter
would be more deceptive in nature than other.
The different validation then regulates the chance
of a particular parameter to be changed in order to
make the entire equation incorrect.
Most of the product out there in market use
specialized algorithms to generate question. Some of
them are:
1. Carnegie learning uses a complete AI based
algorithm that is based on user performance.
2. Mangahigh also uses algorithms to generate
content
3. Math Mystery Monster uses XML driven content to
power their product.
Fig 34. Level XML
58. New Media Design | Diploma Project
58
7.4 Scoring Models
During the ideation of games, there was a constant
focus on creating engaging and rewarding scoring
models for the product. There were several iterations
of possible models, some of them are listed here:
7.4.1 Scoring system -1
A set of mechanics where there are no Levels.
The games have a pre-set time (60 or 90 sec) for the
challenge (e.g. multiplication 1-100)
The player starts to answer questions. So in case
one consecutively answers correctly, then the system
intelligently increases the complexity level of the
questions and simultaneously the amount of scores
that are being rewarded.
Now again, if the user gets consecutive wrong
answers, then the system decreases the level of
difficulty and the scores in reward.
At the end of the pre-set time one can land on the
Medal screen (3000 score – bronze, 8000 – silver,
20000 – gold).
There will be a time limit to answer a question
beyond which the user misses that question (5 sec)
For instance an user got gold and the other student
got a bronze. Both the medals get converted in to
point‘s (1gold = 20 point, 1silver = 10 points, 1bronze
= 5 points).
These point are then displayed on the “WALL OF
FAME”.
Every time user takes a challenge and score a medal
he can add points on the WALL and compete on the
WALL OF FAME.
7.4.2 Scoring system - 2
Another model for scoring, inspired from the study of
different games (Meteor Math, Angry Birds and Tap
the frog) on the iPad.
Each challenge (e.g. addition 1-100) is presented in
form of a game with levels. So assume the “RIGHT
WRONG” game to have different levels with this
challenge.
User starts the game on level one with 60 seconds in
hand and minimum six questions to answer. He won’t
proceed to next level before answering six questions
correctly. If the time runs out then he has to replay
the level.
At the end of each level user converts his current
scores in to stars (Like Angry birds on facebook).
So after playing 5 levels, user can accumulate 10-12
stars based on his performance. On the final screen
once all the levels have been played, stars are added
up. (If all the levels are not played then start counts
are saved as in “Tap the Frog”, which user can later
Fig 35. Algorithm logic
59. 59
New Media Design | Diploma Project
improve)
Finally at the end say:
30 stars = 1 bronze
40 stars = 1 Silver
50 stars = 1 Gold
User gets the respective medal to fulfil his challenge
goals.
The teacher can assign the user a challenge goal.
For example, a bronze or 12 stars based on the
understanding of the class.
Also in this case, stars earned are a representation of
the scores on “Wall of fame”
So for the leader board, star x 10 = point.
7.5 Different mechanics used
Starting with the ideas about different mechanics,
there was a high influence of games like:
• Meteor Math on iPad
• Fruit Ninja
• Angry Birds
• Ice Ice May be(Manga High)
• Temple run
• Slingo by zinga on Facebook
Different games bring different kinds of mechanics,
some has time as the driving force, others have
number of coins one earns with which they can
compete with friends on social platforms.
Our games evolved from different approaches:
6.5.1 Time based
This is a generic approach where the user has fixed
amount of time to play and earn coins/points.
6.5.2 Unlimited time to play and complete the level
Another approach tried, was to have unlimited
amount of time for the users to answer, so it will be
an infinite game play where the only way for the
user to get out of the level would be to answer many
questions incorrectly.
The interesting part is, all the major incentives tied to
the game play are associated with only fast players.
This kind of mechanic creates a pressure over the
player to play faster and commit mistakes.
6.5.3 Why coins? (They could finally be part of virtual
currency)
The entire idea of having coins was thought on the
basis of generic understanding of kids. There is no
data to back such an assumption, but looking back at
our own childhood, coins were figured out to be one
universal incentive that one can have.
There are some properties attached to notion of
coins that make them a valid incentive for children’s:
• Coins are universal in nature.
• One can apply the gold, silver and bronze
categorization easily to coins.
• Kids are fascinated with coins and the idea of
earning them.
In one of the games a piggy bank has been tried
so that the idea of posessing and collecting coins
becomes more established and evident.
60. New Media Design | Diploma Project
60
7.6 The prototype product
Game development was still in process when the
idea of creating a prototype of the final product came
up.
A single game based product was planned, which
would have the entire UI for parent, teacher and
student to register and store their progress.
7.6.1 The prototype flow
1. The teacher clicks on the “Register“ button to
register a class.
2. The following form opens up:
3. Teacher can enter “Number of students“ , she
wants to enroll.
Below is the screen shot of the teacher dashboard
when teacher sign’s up for the first time.
Fig 36. Mathfact product homepage
Fig 38. Register button on homepage
Fig 39. Teacher Signup form
Fig 37. Mathfact product planning
61. 61
New Media Design | Diploma Project
4. Usernames password are genrated against each
student added by the teacher and mailed to the given
ID.
5. On clicking students name, the teacher can see
complete statistics of the student.
Game
1. You can use a quick play or login to play on the
website.
2. First screen of the gameplay
Fig 40. Teacher dashboard
Fig 42. Student statistics
Fig 43. Mathfact homepage
Fig 41. Teacher generated user ID & passwords
Fig 44. Mathfact splash screen
Math fact : http://www.playpowerlabs.com/games_MathFact.html
62. New Media Design | Diploma Project
62
3. The menu screen, to select the concept to be
practiced.
4. The student has 90 seconds to finish a level, each
correct answer will fetch him 100 points.
Each level is divided in to three difficulty level’s:
Easy, medium and hard.
There is no score penalty on giving wrong answers.
7.6.2 Testing
The testing happened at St. Kabir school near SG
highway, Ahmedabad.
Students: 10
Time: 1 Hour
Fig 46. Different game screens
Fig 45. Mathfact concept selection screen
Fig 47. User testing mathfact (St. Kabir School)
63. 63
New Media Design | Diploma Project
Insights
Some major insights that helped in game design
process were:
1. Students of class 7th were finding it difficult to
attempt content meant for class 5th.
2. Students find it difficult to type on keyboard. It
takes considerable amount of time for them to search
keys.
3. Not all computers in schools have flash installed.
The testing was done on personal laptops.
4. Teachers are not very comfortable with interactive
products , where students are left to explore and
interact with the digital content.
5. In an hour of game play, only one student was able
to achieve three stars (Maximum score).
65. 65
New Media Design | Diploma Project
8.1 Initial understanding
The initial task was to redesign a game called BSNL
(Battleship Number line). This is a Number line
estimation game. BSNL provides estimation practice
with whole numbers, fractions, and decimals.
BSNL was inspired from PAE(Percentage absolute
error) number line estimation test.
8.2 Educational Importance of Number
line estimation.
In 2008, the National Mathematics Advisory Panel
stated: “The most important foundational skill not
presently developed appears to be proficiency
with fractions.” In response to numerous studies
describing the challenges faced by American
students in fractions learning, in 2010 the Institute
for Education Sciences released a practice guide
for “Developing Effective Fractions Instruction for
Kindergarten through 8th Grade.”This practice
guide strongly advocates the use of number lines
for improving the student understanding of fractions
[22]. Teachers in America tend to use part-whole
representations of fractions (e.g., pizza slices) as
opposed to number lines, which are a more common
instructional tool in Asian countries. Number lines
are also used as assessment tools for investigating
students’ conceptual understanding of fractions.
Notably, recent work by Siegler [23] demonstrated
that the accuracy of number line estimation with
fractions correlates with standardized test scores in
6-8th grade.
8.3 The game redesign
8.3.1 Original Game
The initial design for BSNL was more of paper
texture styled based on a battle ship theme. The
game narrative loosely suggests that students need
to defend their island from invading robot pirates by
firing missiles at their ships and submarines.
BSNL involves two basic modes: “Typing” and
“Clicking”. In the typing condition, players type a
number that corresponds to the location of an enemy
ship that is positioned on a number line between two
marked endpoints. In the clicking mode, the player
is given the numeric location of a hidden submarine
(e.g., “Submarine spotted at 1/3”) and needs to click
on the location that they believe corresponds to
the number. After the player has typed a number or
clicked on the number line, a missile drops vertically
from the top of the screen to the designated location
on the number line. Animation and text-based
feedback communicates the player’s accuracy after
every round.
Fig 49: PAE Numberline estimation test.
Fig 48: BSNL on Brainpop.com
BSNL : http://www.playpowerlabs.com/games_BSNL.html
66. New Media Design | Diploma Project
66
8.3.2 Abstract Style
In the first redesign exercise, the current narrative
aesthetics were replaced (robot pirates attacking)
with an abstract game aesthetic.
All the changes were done with minimal changes
to the programming of the game. Aesthetics were
changed that didn’t require significant changes to
gameplay.
8.3.3 Iterations
Fig 50: BSNL Abstract redesign
Fig 51: BSNL Raw sketches
Fig 52: BSNL Raw sketches
Fig 53: BSNL Raw sketches
67. 67
New Media Design | Diploma Project
Within this period, the BSNL UI and visual language
went through many changes.
8.4 Concept it covers
• Numbers
• Negatives
• Decimals
• Fractions
• Percents
• Operations
8.5 The final game design
Fig 54: Different Visual iteration of BSNL
Fig 55: Game screenshots BSNL
7.5.1 Game screenshots
68. New Media Design | Diploma Project
68
8.5.2 Visual design elements
There were four major design elements in the games.
1. The theme of the game was chosen to support
the title and the narrative. A water based background
with two boats floating represents our Number line.
The colour of the boats was taken care of inorder to
provide easy visual access to the values attached to
them.
The RED colour over the flag (Fig 28) was one of the
decisions where the designer tried to gain focus of
the user as soon as he looks at the interface.
2. Another intentionally designed element was the
“Piggy Bank”. The idea was to give a sense to users,
as if they are storing coins that they earn.
It also provides some space to experiment with
character based elements and would reveal data
when the game is up with multivariate testing
capabilities.
Different pigs were tried, in order to judge which
support the theme of the game better.
3. Missiles were to fall from the top to hit the
Submarines. With the completion of first game, the
first feedback was pointing at the violent nature of the
game.
So there was a shift from deadly missiles to cute
looking pumpkins.
4. Finally, the target was small submarines pumping
air bubbles in the water. Since the submarines came
as a reaction to our click, they were not needed to
visually dominate.
Submarines were designed in such a fashion that
they gains focus with their presence but doesn’t
dominates.
1. The other important element in the game was the
question bar. One problem that was faced with the
bar was “How to highlight it, without making it big
and bright”. The initial UI design suggested that the
lower end of the screen would be the best position
for the bar. This also raises an issue: weather the
user would be able to easily read and get attracted
towards the bar.
Fig 60: Number Flags in BSNL
Fig 59: The questions tab, BSNL
Fig 56: Different pigs in BSNL
Fig 57: Missiles turned in to Pumpkins
Fig 58: The submarine , BSNL
69. 69
New Media Design | Diploma Project
The bar was made to animate from a larger scale,
entering the screen in centre and then settling down
at the lower end of the screen.
2. The target symbol gives an easy understanding for
mouse click to be used to hit something.
8.6 Result & Learning
One of the most important learning’s from BSNL
redesign was, to always visualize things from
student’s perspective. The size, shape, colour of
visual elements and the interactions cannot be
independent of student’s context.
Other thing that paved to become one of the
important parts in the entire product development
was the need to have a standard structure for games.
This standard structure will dictate the different
screens, objectives, scoring and in game transitions.
Fig 61: The target sign, BSNL
71. 71
New Media Design | Diploma Project
Fig 62: Bubble POP game screens
9.1 Bubble pop
Bubble pop is a generic framework where users can
pop bubbles to answer question, find equivalence
and point the correct and incorrect answers.
Screenshots
Raw sketches
Fig 63: Bubble POP UI ideation
Bubble pop : http://www.playpowerlabs.com/games_BubblePop.html