Juicy Car

Background: This case study was a part of the Capstone project organized at CMU by the Boys & Girls Club of Western Pennsylvania. We were asked to design an online platform that helps to assist 14-16-year-old AIPI (Artificial Intelligence Pathways Institute) students in understanding the concepts of neural networks through interactive visualization of the self-driving car. While we were all involved in all aspects, I took the lead in conducting user research, wireframing, UI design, and conducting and analyzing user testing.

Client 
: Boys & Girls Club of Western Pennsylvania

Duration : 4 months

My Role : User Research, Wireframing, Visual Design, Prototyping & Testing, Iteration, 


Team : Sherine Yang, Abhijeet Singh Malhi, Leslie Jing, Qian hui Zhi, Rohit Sharma, Simon Deng

Mentor : Moshe Mahler

The Brief

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

How might we empower individuals to contribute their data safely and enable them to control its use, and what kinds of health and well-being impacts might these contributions have? Explore issues of global health and well-being, identify interesting or provocative use cases, and design for the outcomes our 21st century world demands, through transparent, empowered, participation with data.

 

The Process

截屏2022-06-29 上午9.50.57.png

My Role

As a UIUX Designer, I ...

Boys & Girls Clubs of Western Pennsylvania has designed and implemented a nationally recognized curriculum to teach high school students the core concepts of Artificial Intelligence and Robotics. Due to program growth, we must create an updated version of the course materials to allow more instructors to teach the course with less direct oversight by its authors. What we would aim to achieve is trying to create a cohesive, fun, and informative updated curriculum that helps students better understand the courses.

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.

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

Target Audience

Who are the users?

The people in the club are mainly children and teenagers, but due to the difficulty and challenge of AI courses, we decided to be more precise and focus on teenagers aged from 14 to 16. At the same time, we aimed to provide a fun and engaging platform to the students.

截屏2022-06-29 下午2.13.13.png
截屏2022-06-29 下午2.12.22.png
截屏2022-06-29 下午2.12.31.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 understand the concepts. 

图片01.png
图片 .png
图片 1.png
图片3.png

Complex AI concepts 
Hard for students

Lack of instructor experience

Not enough
engagement

Need a better Curriculum 

Evaluation

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.

截屏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

Self-driving Car

Neural Networks

Natural Language Processing

User Research & Interviews

Basic questions we need to always think about while understanding the users and making design decisions:

What we would aim to achieve together is tying all the existing components together into a cohesive, fun, and informative updated curriculum. To validate our assumptions about the notifications, we conducted 6 quick interviews with students in the Boys & Girls Clubs of Western Pennsylvania. We asked them questions about their experience with the AIPI courses:

  • What do students already know? 

       Student 1, Fully understands the basics of the neural network, Input/Output, and math equation: y = mx+b.

       Student 2, Have received the basic information of neural network, Input/Output, and math equation: y=mx+b                             from lectures, but don’t really understand it.

       Student 3, Don’t remember those concepts.

  • What do students don't know? 

       They don't know what weights, nodes, and biases are. 

       How do NNs work? How are NNs trained? Why do you need to train the NN?

  • What vocabulary are we teaching them? 

       Weights, biases, nodes, backpropagation, hidden layer.

→ Design decision: Add an intro part in this online activity.

  • Why are the students not already transformed? What are the barriers?

       Passive learning. 

       Not enough engagement and interaction.

       Complex concept.

  • What are you aiming to teach using a metaphor?

       The training process, structure, importance of weights, and biases.

→ Design decision: Instead of showing the traditional structure of Neural Network, use metaphor to design a better visualization, add more interactivity and visual feedback. Reveal the formal structure of Neural Network after students understand.

 
知识产权.png

Easier to understand

  • Students find the concepts difficult to understand.

  • Even if they understand the concepts they are not able to apply them to practical problems.

政民互动管理 (1).png

Able to convey
concepts in class

  • It is difficult for teachers to explain the concept modules to students even using metaphors.

  • Teachers cannot instruct every student in class especially those sitting in the back of the classroom.   

灯泡 (3).png

More fun and
engagement

  • Students are easily getting bored with complex knowledge concepts.

  • Too much complex knowledge will cause students to lose their enthusiasm for listening to lectures and keeping learning.

Design Goal

How might we...

How might we assist 14-16-year-old AIPI (Artificial Intelligence Pathways Institute) students to understand the concepts of neural networks through interactive visualization of a self-driving car in a clearer and more gaging way?

Key Findings

Insights

After conducting user interviews, analyzing the gathered data, and having several more meetings with stakeholders, we have some key insights into the user needs.

Challenges

Four main points to be considered in the design

composition box.png

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

Sketches

Brainstorming metaphor and sketching out the layout

截屏2022-06-29 下午9.41.31.png
WechatIMG234.png
WechatIMG236.png
 

Flow

Game flow structure

截屏2022-07-02 下午6.22.19.png

Final Design

Five main points to be considered in the 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

03

Upgrade Level Design

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

04

Animation Result
and Test Cases

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

05

Summary

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

More designs...

video.gif
unnamed.gif
4.gif
3.gif

Intersted in our game? Click here to play!

Game Link:

How we get here?

 

Validation

Survey & Usability Testing

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.12.02.png
截屏2022-06-14 上午4.12.13.png
截屏2022-06-14 上午4.11.48.png

Data Analysis

Survey Before the Testing...

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-07-02 下午4.19.30.png
截屏2022-07-02 下午4.19.35.png

Survey After the Testing...

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

→ Based on this feedback, we decided to:

  • Change the valve to be clickable

  • Change the color of the liquid after clicking run and stop the liquid at the valve

  • Darker 3D part when changing the weight

  • Make the other tube grey when no input.

  • Add text below the icon/shining traffic light

.

Design Iteration

Improvement of the user experience

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

Change the design style

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

Change the view angle

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

Change the button asset

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

Inspiration

Align the UI style with the 3D Model Assets

截屏2022-06-29 下午9.42.23.png

Style

Align the UI style with the 3D Model Assets

Heading Font

Font   
Weight   
Sizw

Lato
Extra Bold, Bold
160,100

 

Body Font

Font   
Weight   
Sizw

Lato
Lato Bold, Ubuntu
30, 36, 40, 59

 

Title Font Design

Layer 1.png

Color Palette

截屏2022-06-29 下午9.31.08.png

 Branding Design 

Logo icon and posters designed for the project team

Team Logo

logo-black.png

Half-Sheet Poster

trAIn&gAIn-halfsheet1.jpg
trAIn&gAIn-halfsheet2.jpg

Design Evaluation

Success in design metrics:

截屏2022-06-14 上午12.49.20.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. Though our design helps students as an ease to understand the neural network, it becomes more difficult to create a simplified user experience when it comes to more complex learning

  • 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. Our design does help the students to be more engaged in the courses. 

 

  • The metaphor works well in data visualization: When boring concepts are being transformed into interesting images, it does help people to improve their understanding and attract and attract them to explore more.