Mode, Median, Range and Mean

Mode, Median, Range and Mean
Mobile Phone Game
Design Document
By Erin B. Lillis
March 20, 2008
Interactive Design
for Education
Lillis
TABLE OF CONTENTS
PROJECT OVERVIEW .........................
Audience .............................
Goals ....................................
CONTENT ...........................................
CONCEPT ...........................................
DESIGN DIRECTION ...........................
Mood Boards .......................
Interface Comps ..................
Game Screen Comps ...........
Final Game Screenshots ......
STYLE GUIDE ......................................
Identity ................................
Interface ..............................
Game Screens ......................
Emily, Em3 & Eminity ...........
Arthur, R & Artuno ..............
Villains ..................................
GAME MAP ........................................
MOBILE KEY MAP ..............................
TECHNICAL SPECS .............................
File Naming Conventions ....
Assets ..................................
PRODUCTION PLAN ..........................
SUMMARY .........................................
02
03
04
05
06
09
09
11
12
14
13
16
17
18
20
22
23
24
25
26
26
27
28
30
1
PROJECT OVERVIEW
Recent educational research
shows that children learn easier
and faster when playing games.
Using this knowledge combined
with market research about United States children between the
ages of 11 and 13, this project takes
an element of U.S. sixth grade
level Mathematics and turns it into
a story-based game for Tweens to
play on the go.
Lillis
PROJECT OVERVIEW: Audience
The audience for this mobile phone
game application is 11-13 year old
(also known as “Tweens”) Englishspeaking children in the U.S. who
are at a sixth grade level in Mathematics. This audience is gadget
savvy and spends money in the marketplace on technology and media.
Products geared towards this
Tween audience are often brightly
colored and shiny while popular
idols are fresh-faced with PG appeal.
Shows like High School Musical and
Hannah Montana are hits in this agerange and are financially successful
due to their multi-faceted merchandising. CDs, DVDs, live theater
shows, books, clothing (and more)
extend these brands.
Tweens that spend their time on the
Internet often visit family friendly
sites like ClubPenguin.com, DXD
(http://disney.go.com/dxd) and
Neopets.com where their identities
are represented by avatars.
Traditionally, media designed for
this target audience focuses on
the “awkward stage” and presents
stories where the main character
has several identities; the self they
are currently and their fantasy
ideal self. (For example: Hannah
Montana, Harry Potter, Eragon, Jem
and the Holograms, Labyrinth, The
Neverending Story, The Worst Witch,
The Princess Diaries and more.)
In Math, most likely due to their
being brought up with advanced
technology and the Internet, they
are educationally ahead of the previous generations by the time they
reach 6th grade.
3
PROJECT OVERVIEW: Goals
Client Goals
User Goals
The client for this game would like
to teach the basics of statistical
computation at a 6th grade level by
making it fun and memorable.
The user for this game would like a
mobile phone game that is interesting in story, easy to learn and fun to
play while on the go.
They would also like the lingo of
the computations to be addressed
and taught to the game users.
Their preferences include the option to play a quick or long version
of the game, timed challenges, the
opportunity for bonus points, customization and the ability to play as
either a boy or a girl character.
Secondarily, they would like a
character and a ficticious world
which has the built in opportunity
for expansion into other gaming
and merchandising opportunities.
Lillis
CONTENT: Statistical Math
The mathematical content in this
game will be the statistical concepts
of Mode, Median, Mean and Range.
Users will be asked to analyze different number sets in order to find the
numbers that represent each term.
Math Concept
Mode: Within a set of numbers, determine
which is the “Mode” (the number that appears most often).
Median: Within a set of numbers, determine
which is the “Median” (the middle number
in the set).
Range: Within a set of numbers, determine
which is the “Range” (the difference between the lowest and highest in the set).
Mean: Within a set of numbers, determine
which is the “Mean” (the average of the set).
User Steps
1. Observe the given numbers.
2. Mentally arrange the numbers in the set
from lowest to highest.
3. Observe whether or not any numbers
repeat and, if so, find the number that repeats the most often and select that as the
“Mode” of the set.
4. Count how many numbers are in the set.
If the amount is even, locate the two middle
numbers, add them together, divide the
result by 2 and select that number as the
“Median.” If the amount is odd, select the
number in the exact middle as the Median.
5. Subtract the smallest number in the set
from the largest number in the set and
enter that result as the “Range.”
6. Add the numbers in the set together.
Divide the result by how many numbers
there are in the set and select that answer
as the “Mean.”
5
CONCEPT
The game title, Em3, is inspired by
the three M’s of Mode, Median
and Mean. Em3 presents a teenage
character as the user’s friend who
is a bumbling student (Emily), a
tech-savvy spy (Agent Em3) AND a
soul avatar (Eminity). The concept,
in short, is a combination of the
Tween alternate identity storyline
with tech and fantasy thrown in.
“Missions” Mode
Emily, who works for the Sorcery
Secret Service, spends her time at
school as a typical “Mathmagician”
student but secretly uses her statistical math skills in order to foil the
attempts of evil teachers planning to
brainwash their students.
Emily’s assistant and best friend,
Arthur (a.k.a. “Agent R” and his soul
avatar, Artuno) narrates the Missions storyline and invites the users
to help Emily find clues and answers
by analyzing data that she has collected through her spying.
In level one Emily must determine
which teachers are part of the gang.
Emily has been tracking the movements of the faculty and presents
this data to the user. Users will then
use the “Mode” skill to determine
Lillis
CONCEPT Continued
which room number is being visited
most frequently by the teachers
(suggesting that the rogue teacher’s are congregating and having
secret meetings.)
By using the “Range” skill the user
will determine which set of scores
has the lowest variance in range. The
class with the lowest range is the
class with the brainwashed students.
In level two Emily, now acting as
Em3, has found several sets of numbers which hide the combination
to a safe (where the teachers are
keeping their ingredients and spell
book). The user will have to arrange
these sets of numbers mentally in
order to find the “Medians,” which
will, in turn, unlock the safe.
Lastly, Emily/Em3 must call upon
her soul avatar, Eminity, in order to
undo the spell’s affects. In order to
return each student to their previous personality she must determine
their previous grade point average
by figuring out the “Mean” of their
school scores.
In level three Em3 has discovered
that the teachers did a “test run”
of the spell earlier in the month.
Now she must find these students
so that she can undo the mind
control effects. In order to do this
Em3 breaks into the school office
and steals standardized test scores.
With the students healed and the
teachers’ plans thwarted Emily has
saved the day and the user has won
the game! However, if the user does
not finish each level within the allotted time period, the teachers will
regain their property, strip Emily and
Arthur of their powers and all of the
students will be brainwashed.
7
CONCEPT Continued
“Spells” Mode
In the “Spells” mode of the game
(also known as the “quick mode”)
the user will choose to play as
Emily, Em3, Eminity, Arthur, R or
Artuno. Each choice of character
changes the background color
elements (allowing the user to customize their game space) but the
core challenge remains the same.
The user will be presented with a
set of numbers and asked to find
the Mode, Median, Range or Mean
of the set.
The Spells mode is intended for repeat gameplay and situations during which the user only has short
bursts of available time or patience.
In this mode the user will be able to
save their high scores in the mobile
device’s memory.
Lillis
DESIGN DIRECTION: Mood Boards 1 & 2 (Audience)
Boys
Girls
9
DESIGN DIRECTION: Mood Boards 3 & 4 (Adjectives)
Swift, Snappy & Shiny
Witty & Weird
Lillis
DESIGN DIRECTION: Interface Comps
11
DESIGN DIRECTION: Game Screen Comps
Lillis
DESIGN DIRECTION: Game Screen Comps Continued
13
DESIGN DIRECTION: Final Game Screenshots
Lillis
DESIGN DIRECTION: Final Game Screenshots Cont’d.
15
STYLE GUIDE: Identity
Black Logo on White Background
White Logo on Black Background
Full Color Logo
Full Color Logo on Dark Background
R: 138
G: 186
B: 226
R: 235
G: 135
B: 67
R: 173
G: 221
B: 91
R: 244
G: 42
B: 115
Hex: #8ABAE2
Hex: #EB8743
Hex: #ADDD5B
Hex: #F42A73
Lillis
STYLE GUIDE: Interface
BUTTONS & SELECTORS
Moon Selectors
Green Button Highlight
Denmark Button Text,
Black, Sentence Case
Denmark Button Text,
White, ALL CAPS
INTERFACE Typeface:
Denmark Regular 12pt
ABCDEFGHIJKLMNO
PQRSTUVWXYZ
abcdefghijklmno
pqrstuvwxyz
123456789
!@#$%^&*()+=;:<>?
Help Menu Typeface:
“_sans” Regular
12pt System Font
R: 250
G: 199
B: 55
R: 247
G: 255
B: 95
R: 158
G: 0
B: 93
R: 111
G: 212
B: 247
Hex: #FAC737
Hex: #F7FF5F
Hex: #9E005D
Hex: #6FD4F7
17
STYLE GUIDE: Game Screens
160 px
128 px
Header Typeface:
“_typewriter” 14pt System Font
(Display determined by
mobile device)
Paragraph Typeface:
“_sans” Regular 10pt System Font
R: 173
G: 221
B: 91
Hex: #ADDD5B
Header
“M” Mathmagician Emblem Swirly:
Background Element,
Black at Opacity 9%
R: 255
G: 255
B: 255
Hex: #FFFFFF
Paragraph
Lillis
STYLE GUIDE: Game Screens Continued
Game Levels:
Handwritten numbers or “casual”
typefaces (Apple Casual, Comic
Sans, etc.) should be used for the
game levels. Doodles, erasures and
highlights bring a touch of realism
to the storyline.
Timers and Scrollbars:
The track and bar should be two
contrasting colors.
Background:
The background has the fantasy
look of papyrus with the “Swirly”
(Mathmagician Prep emblem) watermark and dark edges (to suggest
a looming danger and the contrast
between night and day).
Technology:
Some game elements should have
a distinct “tech” look due to the
spy gadgetry and audience appeal.
19
STYLE GUIDE: Emily, Em3 & Eminity
Emily by day
Emily by night as Em3
Emily’s soul avatar, Eminity
Emily is the main character in the
By night she is a covert agent for
game universe and all secondary
the Sorcery Secret Service and
characters are based on her general
known by her codename, Em3.
look and style.
(Following trends like Bratz ™ and
Emily is 15 years old and a trendy
manga titles, Emily and the young
student at her sorcery high school,
characters in her world have large
Mathmagician Prep, by day.
eyes and heads with small bodies.)
Lillis
STYLE GUIDE: Emily, Em3 & Eminity Continued
Emily’s day look consists of dresses,
blouses and skirts in Spring hues.
Ribbons, headbands, flames, stars,
crescent moons and other magical
icons appear in her wardrobe.
By night her wardrobe ventures
towards darker colors (though she
still leans towards the pinks and
purples) , tighter or tied up sleeves
and identity-concealing add-ons such
as hooded sweatshirts and hats.
By day she is magical! By night she
is techy! In Emily’s universe magic is
performed with the soul’s avatar. If
you perform devious magic your soul
will turn dark and deformed so when
Emily is called upon to spy she has
to rely on technology because of the
very nature of her deceitful activities. When Emily performs magic,
Eminity, her soul avatar, makes its
appearance to work the spell.
Hair & Body
R: 68
R: 237
G: 29
G: 137
B: 3
B: 69
Hex: #ED8945
Hex: #441D03
R: 255
G: 240
B: 240
Hex: #FFF0F0
R: 244
G: 201
B: 201
Hex: #F4C9C9
R: 0
G: 0
B: 0
Hex: #000000
R: 255
G: 255
B: 255
Hex: #FFFFFF
Wardrobe Samples
R: 175
R: 249
G: 58
G: 117
B: 175
B: 233
Hex:
#AF3AAF
Hex: #F975E9
R: 128
G: 110
B: 255
Hex: #806EFF
R: 240
G: 249
B: 175
Hex: #F0F9AF
21
STYLE GUIDE: Arthur, R & Artuno
Arthur by day
Arthur by night as “R”
Arthur’s soul avatar, Artuno
Hair & Body
R: 107
R: 73
R: 142
G: 70
G: 21
G: 94
B: 70
B: 21
B: 94
Hex: #491515 Hex: #6B4646 Hex: #8E5E5E
R: 198
G: 164
B: 119
Hex: #C6A477
R: 186
G: 147
B: 147
Hex: #BA9393
Arthur, 15 years old, is Emily’s best
friend and Sorcery Secret Service
“handler.” He is a tech genius and
provides Emily with her gear and her
communications from the SSS (and
the game players). His codename is
“R” and “Artuno” is his soul avatar.
Lillis
STYLE GUIDE: Villains
Miss Basquile
Professor Ridaye
Riddance
Bastull
Style-wise, villains in the game
are easily distinguishable by their
smaller “adult eyes” (in proportion
to their face), their low-chroma
color hues (as opposed to the bright
hues used for the students) and
their dark, deformed soul avatars.
The two primary villains are Professor Ridaye (the Perishable Magics
teacher) and Miss Basquile (the
half-zombie/half-French languages
teacher). Their appearance in the
game signifies that the user has lost
the level and must begin again.
23
GAME MAP
Game Logo
Main Menu
Missions
Spells
Level 1 Intro
Help
Level 1
Level Win
Level 2 Intro
Choose Character
Help
Exit
Options
About
You Lose
Help
Level 2
Level Win
Quick Game
You Lose
Level Win
Level 4 Intro
High Scores
Level 4
You Win
Characters
Mode
Median
Mean
You Lose
Help
You Lose
Credits
Instructions
Range
Help
Level 3
Level 3 Intro
Save Scores
Sounds
Lillis
MOBILE KEY MAP
Soft Keys = Options, Exit, Help and
Menu
Arrow Keys = Navigate up, down,
left and right
OK/Select Key = Make Selection,
Mark or Play
Number Keys = Number Entry
25
TECHNICAL SPECS: File Naming Conventions
All files should be named with
proper section identification and
version number. SWFs in use in the
current version of the game should
be identified WITHOUT version
number (as the files are referenced
specifically in the game code).
Folder names, also, should not be
changed because they are referenced in the game code.
Game file structure:
Folder “em3_game”
- Folder “menus”
- Folder “sounds”
- Folder “missionLevels”
- Folder “spells”
- Folder “fla_files”
“Menus,” “spells” and “missionLevels” each contain a folder called
“fla_files,” which, in turn, contains
a folder called “old_versions.”
Each time an original “.fla” file
is opened for editing it should
immediately be saved as a new
version in the “fla_files” folder (I.E.
“lillis_em3game_v13”). Any old
versions should then be moved to
the “old_versions” folder.
Sound files are in MP3 format
saved at low quality. These sounds
are located in the “sounds” folder
but are also embedded in the final
SWF files.
Other relevant folders include:
- identity (logos)
- design_doc
- sketches_comps (mood boards, interface, navigation, character and game
level designs)
- documents (reports and research)
- fonts
- stock (photography)
- presentations
Lillis
TECHNICAL SPECS: Assets
Assets were designed, created and
tested using the following software
and languages:
- Adobe Flash CS3 Professional
- Flash Lite 2.1 (ActionScript 2.0)
- ActionScript 3.0
- Adobe Device Central CS3
- Adobe SoundBooth
- Adobe Audition 3.0
- Adobe Illustrator CS3
- Adobe Photoshop CS3 Extended
- Adobe InDesign CS3
- Adobe Acrobat 8.0
- Microsoft Office 98
- Microsoft Office 2007
Stock images and audio elements
were obtained from:
- Getty Images
- Flickr (Creative Commons License)
- Stock.xchng
- Vecteezy.com
- Sound Ideas library
The Em3 game was originally
designed for use in the Nokia 6085
mobile phone device.
Concept and game Beta Testing
was provided by students and staff
at the Art Institute of California,
Los Angeles. Further concept testing provided by students at Pacelli
elementary school in Austin, MN.
27
PRODUCTION PLAN
Wk 1
Research sixth grade math standards, audience and mobile-based
math games. Create two audience mood boards and define a logical math process based on sixth grade math.
Wk 2
Write creative brief and define game concept. Create two conceptual mood boards. Choose math area to focus on.
Wk 3
Define structure and mobile phone buttons to be used in navigation. Revise creative brief. Create 2 interface designs.
Wk 4
Begin design document creation, print in B&W and cut to size.
Design art direction for all game levels and print in full color. Create production plan. Prepare pitch presentation. Burn CD. Consult
with members of target audience regarding design direction and
user goals. Revise accordingly.
Wk 5: Setup flash document (key art). Create design of game level codMS 1 ing on paper and consult with Flash programmers. Start gathering
audio elements. Begin basic programming.
Lillis
PRODUCTION PLAN Continued
Wk 6
Buttons and menus programmed. Sounds edited. 1 to 2 levels on
the way to functioning.
Wk 7:
MS 2
More sound design work completed. Basic animations complete.
2 levels functioning. Revise Design Doc.
Wk 8
MS 3
Levels 3 and 4 on the way to functioning. Alternate menus
(sounds on and off) complee. Revisions to Design Doc and presentation worked on. Print color draft of Design Doc.
Wk 9
Finish all levels of play. Functioning SWF ready and sent to preBeta testers. Design doc revised.
Wk 10: Have Design Doc printed and bound. Revise presentation and
MS 4 practice. Burn final CD and test. Tweak, test and fix all game levels
based on testing for final presentation.
Wk 11
Prototype turned in and functioning. Production reports and all
design documentation put in report folder and turned in. Final
summation report and CD of all elements delivered.
29
SUMMARY
In summary, the Em3 game not
only reinforces the statistical skills
learned in 6th grade math, it also introduces a three-dimensional character that shows that, regardless
of magic and technology, everyday
math is still vital.
Using a recognizable math system
(Mode, Median, Range and Mean)
the user assists the main characters, practices skills they have
learned in school and creates a personal gaming experience. By limiting the text in direction screens
to short elements players will be
allowed to “fill in the blanks” of
Emily’s world.
Visual and audio cues (flashing
cursors, “sparkly” noises, etc.)
will positively reinforce the players when they answer questions
in a timely fashion and tease them
when time has run out. With several opportunities for “losing” in
the Missions mode the player will
be interested in practicing their
skills in order to solve the mystery
and save the students. In “Spells”
mode the user will be allowed to
customize their gaming experience
by playing as the character of their
choice, earning points and saving
high scores. (Beta testing points to
the Missions mode appealing to an
audience of females while Spells
mode appeals to males.)
Lastly, the characters will be presented in a humorous and Tweenfriendly way that will promote
interest in the future development
of Emily and her world.