Juicy Car

OBJECTIVE

How might we teach middle school students to learn about complicated AI knowledge about neural networks and self-driving car?

SOLUTION

Our team trAIn & gAIn is trying to make a WebGL game to assist 14-16-year-old AIPI (Artificial Intelligence Pathways Institute) students understand the concepts of neural networks through interactive visualization of self-driving car. 

TYPE

SKILLS

Group Project
Product Design

Survey, Think Aloud, wireframing, Semi-structured Interviews, Playtesting

DURATION

TOOLS

4 months

Figma, Miro, Unity, Maya, Photoshop, Github

Business opportunity

Providing more support to Artificial intelligence classes in Boys & Girls Club of Western Pennsylvania

Cooperating long-term with more than 20,000 middle schools and millions of students in China, our client, Cross Domain sees the trend of programming education in China, and searches for the opportunity that brings better programming education to in-school classes.

My Role

As a UIUX Designer, I ...

Cooperating long-term with more than 20,000 middle schools and millions of students in China, our client, Cross Domain sees the trend of programming education in China, and searches for the opportunity that brings better programming education to in-school classes.

 
截屏2022-06-14 上午2.03.40.png

Problems

Before we actually started designing, we had a rough idea of all the concepts. We evaluated the difficulty and feasibility of each concept, the existing problems of the courses, and the difficulty for students to understanding the concepts. 

图片01.png

Complex AI concepts 
Hard for students

图片 .png

Lack of instructor experience

图片 1.png

Not enough
engagement

图片3.png

Need a better Curriculum 

Design Evaluation

Success in design metrics:

截屏2022-06-14 上午12.49.20.png
 

Research

We evaluated and listed down the difficulty factors of all the courses. Then after several meetings with stakeholders, we finally narrowed it down to the three most valuable concepts.

Evaluation:

 
截屏2022-06-09 上午3.47.49.png

Most valuable concept:

After meeting with our stakeholders, we decided to focus on the three most important and valuable concepts.

截屏2022-06-09 上午3.58.43.png

Natural Language Processing

Neural Networks

Self-driving Car

Challenges

While interpreting the concepts, we faced four main challenges. As long as we overcome these challenges, the design could turn out to meet the stakeholders requirements.

截屏2022-06-09 上午4.06.12.png

Simple to understand

Reflects the complexity
of the network

Flexible Design

Visualizing

neural networks

Progression

The game consists of four main parts, from a simple introduction and explanation of the concepts to a further deep dig into the concept. Students can learn the knowledge of neural networks and self-driving cars step by step. As the game progresses, the knowledge points and difficulty that students master will also increase.

截屏2022-06-09 上午3.41.26.png
  • Revision on the basics of Neural Networks

  • Introduces the concept of “Neural Juice”

  • 1 Input

  • Small Weight range (-1, 0, 1)

  • Focus on Relationship between weights, input and outputs

  • Visualization of data flow

  • 2 Inputs

  • Larger Weight range  (-2, -1, 0, 1, 2)

  • Focus on how weights simultaneously affect the output

  • 4 Inputs

  • Larger number of weights

  • Reinforces the complexity of Neural Networks and why they are powerful

Final Design

Cover Page.png
 

01

Background
and Split Screen

截屏2022-06-14 上午2.49.30.png

02

Tutorial  

截屏2022-06-14 上午2.49.37.png
截屏2022-06-14 上午2.49.37.png

03

Upgrade Level Design

04

Animation Result
and Test Cases

截屏2022-06-14 上午2.49.48.png
截屏2022-06-14 上午2.49.51.png

04

Summary

截屏2022-06-14 上午2.49.56.png

Intersted in our game? Click here to play!

Game Link:

How we get here?

Playtest & Survey

We interviewed 6 professors in the last round of usability testing, playtested with more than 40 people coming from CMU machine learning department, consulted with the team of Boys & Girls Club of Western Pennsylvania and CMU professors, to gather their feedback and evaluation on the platform.

 
截屏2022-06-14 上午4.11.40.png
截屏2022-06-14 上午4.11.48.png
截屏2022-06-14 上午4.12.02.png
截屏2022-06-14 上午4.12.13.png

We had testers fill in the survey both before and after the game to test the extent of their understanding the knowledge of neural network and self-driving car. 

截屏2022-06-14 上午3.27.12.png
截屏2022-06-14 上午3.27.19.png

Design Iteration

 

To ideate possible solutions, our team had several play tests that helped ways to improve gameplay and in-class teaching experience. There were a few big changes in design style and flow. 

截屏2022-06-10 上午1.15.44.png
截屏2022-06-10 上午1.15.55.png

Design iterations we did  based on user testing and stakeholders' feedback

Our game is combined with 2D & 3D. Because neural network is hard to explain, so we made the 2D part looks like a network which we can control, and visualize it in the 3D way as a self-driving car.  

We improved the design style. Because we want our UI interface to be consistent with the 3d art. We used neumorphism. This kind of style combines colors, shapes, gradients, highlights, and shadows to ensure graphic intense buttons and switches. All that allows achieving a soft, extruded plastic look, and almost 3D styling.

 

 
截屏2022-06-14 上午3.31.02.png

We changed the view angle from the left one to the right one. Because we want the players to think that they are playing as an AI, not just watching the AI perform actions in the game. We want them to be more immersed into the game.

截屏2022-06-14 上午3.51.09.png

We also had a hard time making decisions on the weight control button. We started with simply listing out the number selection, then visualizing it in the shape of a valve that can be pulled up and down. But after playtests, we found that many players still tend to click the button instead of dragging it, so we changed it to a clickable button. Also as the difficulty of the game increases, the number of value increase, so we added more colors to the button and decided to go with the last version.
 

截屏2022-06-14 上午3.29.50.png

Overview of Findings & Insights

  • Learning AI courses is trending but not important enough: Students spent most of their time on the main curriculum. It is hard for them to find enough time to learn and dig deep into AI courses.

  • It is hard for teachers to provide sufficient support and make sure every student could understand the knowledge in the class: Truly AI-related concepts like the neural network is difficult for students to understand, even for adults.

  • It is hard to keep students concentrated at all-time in class: Students might find the concept boring if there weren't interesting curves appearing in class.