The Challenge

Design the TCP/IP & OSI level for Spark Mindset’s Cyberspace Academy virtual reality game.

The Cyberspace Academy is a virtual reality educational platform being developed and tested by Spark Mindset in underrepresented high schools to teach cybersecurity.

My Role: Creative Director & UX/UI designer (team of four)

Timeframe: 4 week sprint

Project Type: VR Educational Game

Tools: Sketch, Principle, Photoshop, Procreate

research

Process

Initially, Spark Mindset provided us with a plethora of research, it was research overload.

In order to produce a deliverable in 4 weeks, we not only needed focused research, but we needed more of it. In addition to researching specific topics, we conducted interviews and developed personas.

Virtual Reality

What is virtual reality?

Virtual reality is an interactive computer-generated experience taking place within a simulated environment. - wikipedia

VR in Education

Evidence that shows VR can be a useful tool in some applications and environments, but the short and long term effects of VR on children and people in general is still unavailable.

Luckily, there are programs paving the way like Minecraft Education VR, Google Expeditions, and the VR School in Australia.

VR School

A collaboration between the University of Newcastle and Callaghan College in Australia.

VR School examines all the practical, ethical, and safety issues that come with integrating emerging technology in high school classrooms.

Research was heavily focused around the VR School and its wealth of resources.

TCP/IP & OSI Models

These models describe a network…yes, that’s exactly what we thought, confusing. Don’t worry, the Cyberspace Academy will expand on these layers, but here’s a taste.

• The Physical Layer is the computer you are using to view this case study.

• The Application Layer is the browser you are using to view this case study.

Cybersickness

Research is being collected on cybersickness and there are many reasons why someone may succumb to cybersickness. The feeling is similar to sea sickness and can cause a student to end a lesson early.

The Australian VR School of has developed protocols for cybersickness to educate students, teachers, and parents of the susceptibility, warning signs, and remedies.

Personas

Students

Several students were interviewed regarding virtual reality, gaming, educational settings, and cybersecurity.

Key Takeaways

• Enjoy problem solving

• Aware of VR but never used before

• Cybersecurity is confusing and intimidating

• Most value when technology is coupled with traditional class

Teachers

Several students were interviewed regarding virtual reality, teaching methods, lesson planning, and cybersecurity.

Key Takeaways

• Lesson planning is important

• Technology in the classroom is important

• Teaching methods should be diverse and engaging

• Haven’t incorporated VR into classroom, but want to soon

Design

Research

Through research, I developed a greater understanding and appreciation for VR game design.

Similar to architecture, many issues like accessibility and UI come into play.

Some things, however, are new and different.

For example, how someone moves through a space without dissociating what they see with their actual movement needs to be thought of, or else it can cause cybersickness.

5 Principles of VR Design

Coupling the VR game design research with UX principles, 5 principles of VR Design were created.

1. Design something that can ONLY BE DONE IN VR

2. AVOID 2D UI whenever possible

3. Provide CLEAR FEEDBACK for interactions

4. DESIGN FOR the USER, and for the CONTEXT

5. EXPERIMENT, TEST, ITERATE

Ideation

At first, the group was stumped. They asked, “how do we design UI in a VR environment?” In order to help the group understand how to design for VR environments, I told them the following.

With this new insight, the group was ready to begin the design process.

We had two design studios, one to understand the TCP/IP & OSI models and one to conceptualize how these models would be taught in a VR environment.

TCP/IP & OSI Models - Design Studio

Analogies were developed to relate the complex ideas of the TCP/IP & OSI models with more understandable and relatable concepts.

TCP/IP & OSI Level - Design Studio

Concepts to visualize the TCP/IP & OSI analogies in a VR environment were ideated.

Instead of getting granular with the material being taught, areas of interaction were designed to provide opportunities for learning.

Cyberspace academy

Cyberspace Academy is designed to teach cybersecurity to underrepresented high school students through an immersive VR environment.

Are you ready?

Imagine yourself stepping into your brand new space suit. You’re filled with anticipation as you’ve dreamt of becoming a cybersecurity commander for as long as you can remember.

You’re excited to learn everything you need to know about cybersecurity through an immersive simulation.

The day has come to prove yourself…

Walking down the catwalk, you put on VR space-helmet, and join your fellow cadets in the interactive space-dojo.

Interactive space-dojo

Cyberspace Academy - 360 viewer

Let’s take a look at the 7 areas of interaction within the interactive space-dojo.

TCP/IP OSI Tower Hologram

The hologram is the centerpiece of the TCP/IP OSI level and is pivotal because research shows that direct visual feedback helps reinforce teachings. 

Each area of interaction, corresponds directly to a cybersecurity layer, and those layers are represented in the hologram.

With each area of interaction, a high-level connection, or analogy is created between the layer of cybersecurity, and the task at hand. 

Student progress through the game is shown by the hologram illuminating over time, layer by layer.

Ship Selector Hologram - Physical Layer

The first area of interaction is with the ship hologram.

Here students can choose from a variety of ships, and then customize how the ship is painted, add cyber shields to protect against attacks, and other things like that.

Research shows that in a game, right of the bat, customization cultivates investment and engagement from students. It’s similar to customizing an avatar or player appearance in a role playing game. Since you can’t do this in VR, we wanted to provide students with another way to customize something in game, and immediately feel a sense of investment and ownership. 

Note: the physical layer is the computer you are using to view this case study, it’s the hardware.

Robotics Bay - Data Link Layer

The second area of interaction is with the robotics bay.

Here students solve puzzles to build their sidekick, Switch, who joins them for the remainder of training. Switch assists in translation, providing troubleshooting, and is pivotal to the levels completion.

Research shows that tactile feedback is very important.

Keeping in mind VR design principles, tactile feedback was integrated into the experience. When you get a piece that fits, or compatible, you get a spark of electricity, or an illuminating button, or part of the robot.

If it’s not a fit, you get an error noise.

Note: the data link layer is all about getting data on to the physical wire, like an ethernet cable.

Interactive Star Map - Network Layer

The third area of interaction is with the interactive star map.

Here students chart a course across the galaxy. In order to chart through areas like asteroid fields, students must complete puzzles or challenges related to the Network Layer.

Again, research shows that tactile feedback is very important.

Keeping in mind VR design principles, tactile feedback was integrated into the experience. Students stand in a virtual room with a laser grid, surrounded by a field of stars and nebula, they chart a course across the galaxy.

Note: the network layer is responsible for logical device addressing. Encapsulating information and sending it off in the form of ‘packets’.

Teleportation Pad - Transport Layer

The fourth area of interaction is with the teleportation pad.

A sort of space-rubik’s-cube.

Here students solve a hands on puzzle, selecting different layers of the teleport pad, and sliding them in a circle motion around a central axis. When the correct glyphs are aligned, their teleportation pad becomes online.

Have you picked up on a pattern? Tactile feedback is very important.

Keeping in mind VR design principles, tactile feedback was integrated into the experience. Students align different glyphs, a sort of space-rubik’s-cube, which illuminate lights. For additional tactility, to initiate the teleportation pad, a student flipped a switch.

Note: the transport layer is responsible for making a ‘TCP connection’ to the web server.

Engine Room - Session Layer

The fifth area of interaction is with the engine room.

Here students solve a hands on puzzle, selecting chords from one side and connecting them with the correct corresponding chord on the other side.

As always, tactile feedback is very important.

Keeping in mind VR design principles, tactile feedback was integrated into the experience. Again, visual feedback is created through the illuminating of lights when correct connections are made.

Note: the session layer is responsible for connecting applications—like the web to the web servers application.

Command Console - Application Layer

The sixth area of interaction is with the command console.

But wait, shouldn’t there be seven areas of interaction that correspond to the seven OSI layers? You’re absolutely right, and that’s where Switch, your robot sidekick comes back into play.

In addition to helping with data linking, Switch is also the presentation layer.

Here students work with Switch to make the final connection and take flight.

This is the last time this will be mentioned, but, tactile feedback is very important.

Keeping in mind VR design principles, tactile feedback was integrated into the experience. Visual feedback is created through the illuminating of lights, and auditory feedback through a communicating voice-box.

Note: the application layer is what you see on your computer, the browser you are using to view this case study

opportunities

• Puzzles and challenges were kept open ended for Spark Mindset to tailor the teachings.

• Based on questions asked of our client during the process, they updated their strategic plan to account for things like cybersickness, accessibility, and teacher training to name a few.

• VR in education is very exciting, but a close eye on safety is needed.