top of page
Juicy Car
Game & Educational Experience Design,Sponsored Project
Online Platform helps to assist 14-16-year-old learning Artificial Intelligence
Overview
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.
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.
The Process
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.
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.
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.
Most valuable concept:
After meeting with our stakeholders, we decided to focus on the three most important and valuable concepts.
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.
Findings
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.
.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.
.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
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.
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.
-
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
Final Design
Flow
Game flow structure
Final Design
Five main points to be considered in the design
01
Background
and Split Screen
02
Tutorial
03
Upgrade Level Design
04
Animation Result
and Test Cases
05
Summary
More designs...
Intersted in our game? Click here to play!
Game Link:
Video
How we get here?
Validation
Playtest
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.
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.
Survey After the Testing...
Iteration
→ 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.
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.
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.
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.
Inspiration
Align the UI style with the 3D Model Assets
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
Color Palette
Branding Design
Logo icon and posters designed for the project team
Team Logo
Half-Sheet Poster
Design Evaluation
Success in design metrics:
Insights
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 understand the knowledge that are being taught in 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 content 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 them to explore more.
bottom of page