We are making an iPad application, programmed with cocos2d, that uses customized individual student data to produce varied visualizations and interactions associated with a tree metaphor, based on the following representations:

wrackbaaMobile - Wireless

Dec 10, 2013 (3 years and 6 months ago)


We are making an iPad application, programmed with cocos2d, that uses
customized individual student data to produce varied visualizations and
interactions associated with a tree metaphor, based on the following
- Each Tree represents a specific subject, and contains educational data for that subject for all
grades 6-8
- The 'whole world view' consists of multiple trees with different subjects - Branches represent
- Flowers on the trees represent progress for specific subjects
- Style based on a 2.5 D style, with layers to represent what you're looking at as more "recent" in
the foreground
- The tree can support different types of data and will look different accordingly. For example, an
English tree with game data only vs. an English tree with school data only vs. an English tree with
game + school data will ALL LOOK DIFFERENT
Purpose of the doc:
How the tool will function: its features. It specifies screens, menus, dialogs, and so on.
Functional Specification
Last Updated:
- C O N F I D E N T I A L -
All Rights Reserved.
Show what you are good at, based on your educational progress.
Version Control/Tech:
Repository Location:
What we hope to learn
If data can be a truly interactive experience (no shiny buttons required; the data itself is the button)
No part of the tree is “useless”
Based on Core Standards
Themes extracted from ck12.org
Time of Experience
~15 seconds for first time user
~30 seconds for subsequent use
~45 seconds if adding a note
Frequency of Experience
In a given day (1-6 times, depending on whether teacher/parent asks):
-In the morning
-during class
-while in line, bored
-parents ask
-while doing homework
-before going to sleep
Ease of the Experience
Zooming in/out of data should feel as intuitive and natural/seamless as Google maps
*note, not a direct copy of Google maps
Swipe, to go back
Pinch, to zoom
Press Hold(press to see circle and hold to go)
Time (slider at bottom)
Tree = your data
Notes (content upload, save)
In designing products, it helps to imagine a few real life stories of how actual (stereotypical) people would
use them. We'll look at two scenarios.
Scenario 1: High Scoring
Scenario 2: Middle Scoring
Scenario 3: Low Scoring
Screen by Screen Specification:
Tree Grammar
Specific grammar requirements to ensure consistency. Characteristics of a tree:

Trees have trunks

Trunks have splits - branches split off from the trunk

Splits have levels - there may be multiple branches splitting off at the same place

Splits have drop angles - each branch has a drop angle at the split

Trunks have a heading - the main trunk might continue straight after a split

Trees have branches

Branches can vary in length

Branches can be straight, curved, or even wobble

Trees have a canopy

Canopies have a general arch

Canopies tend to be more concentrated at the ends of the branches
(Source: http://software.intel.com/en-us/articles/procedural-trees-and-procedural-fire-in-a-virtual-world)
Tree Design

Greater detail at the periphery= more recent times.

a linear scale for time, outward from the center, provides space for detail
proportional to the square of distance from the origin.


Segments: sub-concepts/sub-subjects (zoomed-in view)

Endpoints (Heading)


Parser (What makes each tree unique)


Canopy (collection of where the flowers will generate)

Branch Length

Branch Style (straight, curved, wobble)

Branch Splits (angles)

Branch thickness

Impluse Factors?
(Ex: Have the trees sway and move with “the wind” which speeds
represents a dimension)

Tree Color: Light brown, brown, dark brown (to indicate depth and selection of a
single tree)
Dimensions of Data


Thickness: Sum of the frequency of access (whole world view)

Height: Time (the entire tree itself is a time snapshot once we implement
the slider at the bottom)

Branch: frequency of access per subject branch (whole world view)

Flowers, percentiles and individual scores

Number of petals: 5

(Size, representing a range of percentile): Bud, Almost-Bloomed, Bloom

(The flower shows your actual score data, Ex: 75/100, “Passed”,
“Completed”, “Incomplete”)

Based on Percentiles:
Ex - your reading score is 75. If the subject percentile for a score of 75 is
47, then this means the student did better than 47 percent of all the
students who attempted this subject. Their flower would then be ‘Almost
Bloomed’. Percentiles are based on the most recent scores earned by the
student. It changes depending on the group with which your scores are

Full bloom flower: > 81st percentile

Normal Flower: 40-80 percentile

Bud: < 39 percentile

(Color): Gradient of Color range as a Percentage of the Bold Color, with
Bold being the highest score.


If dark red is the boldest version of the red we want to represent, and
you get a score of 62, your actual petal color would be at 62% opacity
of the boldest version of that color.

By Subject:

Math - Pink

English - Blue

those are the two that we have now

History - Green

Science - Yellow

Art - Orange

those we do not have yet

iPad Gestures
To press or select a control or item (analogous to a
single mouse click).
To scroll or pan (that is, move side to side).
To drag an element.
Flick To scroll or pan quickly.
With one finger, to reveal the Delete button in a
table-view row, the hidden view
in a split view (iPad only), or the Notification Center
(from the top edge of the
With four fingers, to switch between apps on iPad.
Double Tap
To zoom in and center a block of content or an
To zoom out (if already zoomed in).
Pinch open to zoom in.
Pinch close to zoom out.
Touch and Hold
Touch and hold In editable or selectable text, to
display a magnified view for cursor positioning.
Shake To initiate an undo or redo action.
When a user shakes the iPad, the flowers on the tree, if in the whole tree view, will shake
as if the user just shook the tree world
Touch and Drag (Flower view):
Can ‘pick off’ flower petals and save to two baskets - recycle
(delete - not a true delete, will save the data “in the earth” to be dug up at a later time if desired) or
save (trophy)
Once data moves from 6th grade to 7th, the roots can start to take shape.
events , can be picked off or buried in the ground, or reshaped into other things
Flower appears based learning curve
Non Goals
Comparing averages
Additional subjects (art, music, outside interests)
fantasy sports teams with your classmates
additional subjects > drop to ground
Features Users Might Like
Comparing data with friends
Comparing data in general
Looking back at old data
Looking forward to new data
Downloading data and plugging it to somewhere else
Displaying their data
Customizing their data
Share their data
Bookmark their data
Extrapolate their data (predictive modeling?)