Quest CS App Design Document

Design Doc | Dev Blog | Code


Recent Updates

AR enhanced textbook app and standalone VR app are both near completion for OC6. Most 3D models and UX flows have been updated in both AR and VR apps. Both apps along with a process book will be demoed at the Education Summit, which will be on registration day, 9/24, of OC6.

Oculus Quest prototype of a computer science educational application currently focusing on binary math, next iteration will be on bubble sort.

  • 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 csunplugged.org

  • 6/28/19 - Finish refining core interactions, UX/UI, and learning goals before moving on to graphics, narrative and audio

  • 9/24/19 - Complete second prototype iteration aiming for Oculus Connect 6 floor demonstration

QuestPrototype_numberStation.gif
QuestPrototype_colorStation.jpg
QuestPrototype_outputStation.gif

Overview

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.


Objectives

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.


Prototyping

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.


Stations

Mission Station

MissionStationDiagram.jpg
LeverStationRedesign_Edited.jpg

Has 4 main components:

NumberStation_Diagram02.jpg
  • Object Slot

  • Send

  • Task Display

  • Get Task Button

Output Station

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

colorStationRedesign.JPG
  • 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

IMG_0266.JPG

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.


Glossary

OPS- Output Station

#Station- Number Station

MS- Mission Station

TDS- Task Display Station*

OP- Output

IP-Input


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


Design Doc | Dev Blog | Code