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
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.
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.
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.
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.
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
Need a better Curriculum
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.
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?
Not enough engagement and interaction.
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.
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.
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.
More fun and
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.
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?
After conducting user interviews, analyzing the gathered data, and having several more meetings with stakeholders, we have some key insights into the user needs.
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
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”
Small Weight range (-1, 0, 1)
Focus on Relationship between weights, input and outputs
Visualization of data flow
Larger Weight range (-2, -1, 0, 1, 2)
Focus on how weights simultaneously affect the output
Larger number of weights
Reinforces the complexity of Neural Networks and why they are powerful
Brainstorming metaphor and sketching out the layout
Game flow structure
Five main points to be considered in the design
and Split Screen
Upgrade Level Design
and Test Cases
Intersted in our game? Click here to play!
How we get here?
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.
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...
→ 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
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.
Align the UI style with the 3D Model Assets
Align the UI style with the 3D Model Assets
Extra Bold, Bold
Lato Bold, Ubuntu
30, 36, 40, 59
Title Font Design
Logo icon and posters designed for the project team
Success in design metrics:
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.