Quest CS App Design Document

Design Doc | Dev Blog | Code

Recent Updates

OC6 demos of AR enhanced textbook app and standalone VR app are done. Design doc is out of date and currently being updated. It still has relevant info, and for now, Im going to post up some additional info below from the github readme of the Oculus Quest app. The following videos are:

  • Walkthrough of the high fidelity Oculus Quest prototype demoed in editor with the Rift,

  • Walkthrough of the high fidelity mobile AR prototype, and

  • Walkthrough of the Oculus Quest low fidelity prototype demoed in editor with the Rift.

Oculus Quest prototype for a computer science educational experience. Current level is introduction lesson on binary math for middle school and high school students. Next step is a low fidelity prototype of the next level, which is bubble sort. User testing for buble sort prototype is November 22nd, 2019. Bubble sort learning mechanics should work well with the physical movements that our interactions are designed around.

5/28/19 - Completed first prototype iteration
6/08/19 - Completed user testing on 50 middle school students
6/14/19 - Learning assessments confirm VR experience is as effective as an instructor led lesson following
6/28/19 - Finish refining core interactions, UX/UI, and learning goals before moving on to graphics, narrative and audio
9/24/19 - Completed refinement of binary math level and presented demo at Oculus Connect 6 Educational Summit
10/5/19 - Finished cleaning scripts after OC6 demo

000_OC6Demo.unity is setup to play on Oculus Rift in editor and builds to Oculus Quest. Both use touch controllers, and has standard grab input on levers and grabbables. Level is 20'x20'. For Rift use in editor, use thumbpad on right or left controller, defaults to right, to move around scene. Press all four buttons, A B X Y, to reset station height mid-game. Station height gets set multiple times at beginning based on user height but may need to be reset mid-game.

Next refactorings:
Change status and requirements of current task from int array to enumerations
Create a base station script for inheritence, and make station scripts singletons like the UserManager and LevelManager
Change public variables on stations to private serialized fields
Change physics on the carrying container to stop it from vibrating while carrying it to task station



C-Spresso is an educational application in virtual reality, designed to teach basic computer science and binary math. The experience is designed around free moving abilities of the new Oculus Quest platform, which is completely untethered to any wires or computers, making it and excellent case study for learning environments involving physical activity within VR.

Concept Art by Jessica Ross

Concept Art by Jessica Ross

C-Spresso is a name referencing the design of espresso and barista machines, which the quirky designs of the kiosks and consoles resembled.  Once this connection was made, the visual design began to take form, as designers researched various barista and confectionery machines such as gumball, cotton candy, and espresso machines. The creative direction for the experience is meant to maintain a light-hearted and fun mood, while users are learning complex and often intimidating math skills. The team hopes to immerse the users in a safe, engaging environment where he or she may explore, learn, and make mistakes, while having fun and playing.

The first goal of designing this application was to take full advantage of this new untethered feature, which would offer users another level of immersion as they physically move through virtual space. The virtual space is organized into a concentric circle, lined by consoles and kiosks, all chronologically placed into a clockwise direction. This design follows the order of interaction from start to finish, in one cohesive loop. This ability of the Quest allowed the team to incorporate spatial learning methods into the VR application, as the user walks from station to station, retrieving, placing, and reaching for objects related to the lesson. Adding the element of spatial learning into the experience opened many exciting opportunities for the designers to explore while creating the environment, narrative and game mechanics.


Objective is to expose students to STEM and computer science in an engaging and immersive environment. Due to the Quest’s untethered and free range of movement feature, educators and researchers believe this CS application could benefit students who are visual and spatial learners. Spatial Learning refers to an individual’s ability to perceive, analyze, and understand visual information in the world around them. As most US schools use a teaching method called Linear-Spatial Thinking, these students often struggle to learn the material or keep up with their classmates. In designing this educational experience, the team realizes that auditory teaching methods (which include oral directions and sequential written directions), are the norm in public school systems and as a result, there are many students who fall short of benefiting from an education in computer science. Utilizing the immersive nature of VR and the ability to move within the space and interact with objects, this educational application in computer science may offer another avenue of learning to these other learning styles.

  • The experience must also be designed to be sped through by experienced users, yet still be beneficial as refresher material to them.

  • At the end of the experience, user should understand how to solve binary math equations and possess a basic understanding of computational thinking.

  • This experience must be accessible, engaging, and have an adjustable pace to match individual’s learning pace, spatial learning aside from just audial learning, fun factor to attract a wider audience rather than those with an already present interest in computer science and STEM fields.


The space is made smaller, so the user will be in one large room with different stations, whereas before, each station was designed to be in its own space.

  • Current primitive models will be imported into Quill and Medium so that more elaborate 3D concepts can be built over those basic shapes.

  • One of the goals is to standardize all vocabulary when relaying information about the flow charts and mechanics to the developer without any confusion.

  • Wireframes of each station (placement diagrams) were made; task, number, OPS only.

Navigation-We established that there would need something in charge of prompting, guiding users as well as something to tell the user when they made a mistake. For right now this is called “The System,” until we can agree on what that will be. A few current ideas include a character/host, or voice overs coming from each station.

Space & Ergonomics

In the first prototype, the stations are built like small kiosks and they were placed very close together. After going through a rough floor plan of the experience, the layout of the kiosks was modified. The space seemed really large, so it was concluded that this would change as a result of adding more assets which would populate the scene, such as the dome enclosures that would be around each kiosk. A cylindrical wall  has been added around the entire floor space and this drastically made the space feel less spread out and empty.

Considering the ergonomics of these kiosks is another challenge because this experience will be tested with middle schoolers and adults, so the height to build these kiosks is currently unknown.

The kiosks will be designed to be ergonomically sound. This means that the dashboard with the controls need to be placed at a level where the user does not need to bend down or tilt their head up. The width of the dashboard, ui, and display also needs to be designed so that it is within the scope of the user’s vision. If the kiosk is too small or too large, it will not be comfortable for the user to interact with.

Core Mechanics - Gamifying the Binary System

The binary system contains numbers expressed in base-2 numerical system which uses only two symbols: Zero (0) and One (1).

  • This would be shown in the game as levers which you would pull down or up in order to change the number from a 1 to a 0 or vice versa.

  • The levers would have two positions so as to not distract the user from the 0 or 1 action. There would also need to be a display at this station so that the user can see what he/she is doing.


Mission Station


Has 4 main components:

  • Object Slot

  • Send

  • Task Display

  • Get Task Button

Output Station

Directly reflects everything in the entire station. Consists of 3 main components:

  • Object Slot Generator

  • Out Configuration

  • Run Button

Number Station

The Number Station is designed to feel similar to an arcade kiosk, with levers and a display screen. There are currently 3 levers, each representing a number of a binary math equation. The equation can be viewed on the display screen, where the user can view their actions when pulling each lever.

For example, when the user is prompted to make 4 red circles, he/she is directed to the number station where he/she will pull each of the three levers to get the total of 4.

There are 3 levers, which are represented below:

Color Station

RGB the user would be given a color to match with 3 dials. We used the example of the color, aquamarine (RGB value 66,244,238).

Interactive Designs / Types Of Interactions:

  • Macro Interaction Designs- From the perspective of the system

  • Middle Interaction Designs- From the perspective of the stations

  • Micro Interaction Designs- From the perspective of the individual elements (buttons, levers, etc)

Micro Interactions

These are categorized by these properties:

  • Triggers

  • Cues

  • Behaviors

  • Actions

  • Modes

  • Mode selectors

  • Feedback

  • System

    CS Learning Activities

  • Bubble Sorting- User is told to sort objects into yes, no’s and maybe’s

  • Binary Cards

  • If Statements, Loops

Currently, the core mechanics are based on the binary card exercises, where the levers and the corresponding dials take the form of the card and bring it into a 3D space. The user can “flip” the number from 1 to 0 or vice versa, by simply moving the lever up or down.

For future levels, the Bubble Sorting Activity will be incorporated into the experienced. This is an activity where the user has to sort a group of objects and would offer more interactivity within the experience as the user grabs and places objects with his/her hand controller.

Obstacles & Solutions


OBSTACLE: User Gets Lost

SOLUTION: The resolution would be a timing function (estimated 30-60 seconds) where the user would be prompted if he/she did not get to the next station within a designated time frame.

OBSTACLE: When the user arrives at the #S. The user needs to somehow see that the #Station action is directly showing up on the OPS screen.

SOLUTION: Cue user to look over at OPS? Have some sort of guide that tells them about the connection between the #S and OPS screen?

Differing Levels of Knowledge and Experience

The development team realizes that there is no way to know what level of computer science and binary math of each user. Due to this reality, there must be multiple levels of the experience, starting with an introductory level and gradually getting more complicated as the user excels through each level.

To avoid frustrating users who are already experienced in computer science and binary math, there will have to be a feature that allows the user to skip levels that seem too easy and jump ahead to more challenging levels.

There may also need to be a feature which allows the user to select their level of skill; beginner, intermediate, advanced. Having this ability in the experience would offer the user to tailor the lessons to fit their comfort levels.


OPS- Output Station

#Station- Number Station

MS- Mission Station

TDS- Task Display Station*

OP- Output


* The Mission Station encompasses the Task Display and Get Task Stations.

Design Doc | Dev Blog | Code