Class Map
Tools
Figma, Adobe, Miro, HTML, CSS
Team Member
3 Designers.
Problem Overview
We have observed an increase in international students in U.S. graduate universities, yet they often hesitate to speak due to language barriers, resulting in a less diverse perspective in class. Our goal is to design a website that assists international students in enhancing their class engagement at U.S. universities.
Outcome
This UX desktop design project aims to encourage international students to speak freely by offering features that help them organize language. It can be utilized in U.S. universities, particularly in mid-class settings with around 50-100 people
Process
01.
Empathize
02.
Define
03.
Ideate
04.
Prototype
05.
Testing
06.
Reflect
How can international students be encouraged to engage in more active participation in class settings?
1 in 6
16.2%
At UC Berkeley, international students make up a large amount of the student body. They often hesitate to participate in class discussions due to concerns about their English accents and difficulties in articulating complex questions. Over time, this reluctance may lead them to become the “silent” ones in class.
In 2022, UC Berkeley had an international student population of 12331, being one of the top institute with the most amount of international student in the US.
Define
What is the Problem
.png)
Getting criticized in the beginning causing less participation later on.
Not prepared to speak when called upon
Interviewee 1 (domestic student)
-
Male; born and raised in Wisconsin
-
First year Graduate student
Interviewee 2 (international student)
-
Female from Dubai
-
She went to international university with many international students
-
New to the US
-
Actively participates in class discussion
Interviewee 3 (international student)
-
Female from China.
-
Has been in the US for 4 years
-
Occasionally participates in class discussions. More often in smaller classes.
Interviewee 4 (international student)
-
Female from Taiwan.
-
New to the US for graduate school
-
Very rarely participate in discussion
-
She tended to stand at the edge or in the back of the group during discussion unless called upon by the instructor
Biography:
-
Master International student at UC Berkeley | Age 22
-
Moved to the US after completing undergraduate in China
_edited.jpg)
_edited_edited_.jpg)
_edited.jpg)
Small facial emotion from professor could influence
Instructor did not have systemized way of having each people share opinions freely
No chance to participate since class time is so limited. Found it challenging to organize language intuitively
Semi Constructed Interviews
Persona
Characteristics
-
Eager to learn and participate in class actively in her native country
-
Like to express her opinion in class
-
Sometimes feel insecure speaking out in class due to cultural difference
-
Love interact and learning different cultures
Goals
-
Want to contribute more in class
-
Want to behave like they would in their native country
-
Would like to form closer connection between her classmate and professor
Grammar AI: using AI to detect culturally inappropriate words​ and give user reassurance.
Ideate
Low Fi Prototypes
-
enable speakers to not feel negatively impacted by other students’ emotions
-
Increase confidence
_edited.jpg)
Heatmap: A visualization designed to display students' engagement status to both other students and the professor, fostering closer teacher-student interaction.
Engagement Ear: Displaying students' engagement levels using a physical prototype.
_edited.jpg)
I worked on designing this speculative spatial ideation design by myself. The prototype would require utilizing VR glasses in order to display a more joyful classroom. This idea is later combined with the heatmap design from the other designer, then I mainly worked on the high-fi prototype classmap shown below.
Flow:
Set language
Enter Classroom
Translator
Save
Grammar Check
Report
The user is able to set their native language and record the lecture. It will translate it into their native language.
Additionally, the user can grammar-check a phrase by inserting it into the textbook before reporting it, ensuring its correctness.​
The teacher can observe the overall engagement and familiarity levels of students at different times based on the opacity of each grid and check off students' questions.​
Each grid indicates the student's engagement level or familiarity at the moment, and the more opaque the grid, the more engaged each student is. ​
High Fi Prototype 2- Heat Map
Professor Interface
High Fi Prototype 1- Grammar AI
Student Interface
Unintuitive functionality; Symbol too light
Unclear if this is translation or language of app
Unintuitive functionality; Symbol too light
Unnecessary to see individual levels
Sliders are not intuitive combined with the map
Test
Grammar check is intuitive + accessible
Great but hard-to-find feature
Ask questions in anonymity
Easy to read + valuable info
Heatmap
Grammar AI
Usability Testing
01.
Designing on desktop is a better choice in this project considering the stakeholder’s perspective.
02.
Consider other users: the professor cannot always look at the screen teaching class
03.
​Hierarchy of text and color choices could inform what is important/make certain text stand out
Unintuitive functionality; Symbol too light
Reflection
Consideration
Instead of using sliders and grid, students are able to express their reactions with on click
Students are able to indicate the pace at which they prefer the instructor to explain various topics
Unintuitive functionality; Symbol too light
Bar charts indicating each category, providing information on students' engagement status.
Classrome pace indicating the pace that the majority of the students prefer
​Final Prototype
Question forum that allows students to put in question, upvote questions and sort questions
Allow user to type in questions and checks grammar automatically
Question forum indicating list of questions and the number of likes/replies
Iterate
Student Interface
Future Professor Interface
We received a lot of positive feedback and are thinking of developing the interfaces further to make a real-world impact in education.

I had the chance to learn in-depth how to utilize many methodologies: user journey mapping and persona creation. Creating a systems map to understand the user's pain points was useful and helped develop more creative UX interventions.
Takeaways
