Classroom
Classroom is an innovative online teaching tool meticulously crafted to elevate teachers' engagement with their students. By establishing a course-centric environment, Classroom empowers educators to seamlessly organize their daily tasks and interact effectively with their students.
Classroom
where teachers meet students freely.
Teachers are facing challenges
with teaching activities
Teachers in the past primarily conducted their work in person at school, but the shift to online teaching has left many feeling disconnected from their familiar context. Lack of training and preparation for online teaching has led to technology confusion for a significant number of educators.
Now teachers are suffering from a chaotic workflow and inconsistent systems:
Low teaching efficiency due to poor technology skills
Unexpected personal stuff are distracting teachers when they share the screen
Difficult communication due to Independent file systems and platforms
Teachers may receive files from students through email and then find there’s another copy in google drive;
They may miss students’ messages because students put messages in a wrong miro board;
It’s easier for teachers to forget to review students' work since it’s not on the table and it’s invisible...
Organization of multiple classes
Teachers may feel confused when they teach different courses, especially when the courses share similar topics
Solution
Teachers are facing challenges
with social interactions
In the past, teachers could directly interact with students and observe their body language and reactions, which helped them evaluate their teaching and make adjustments accordingly.
However, in the current online setting, many teachers express feeling like they are talking to zombies. Students often have their microphones muted and cameras turned off, resulting in minimal responses to questions and limited interaction.
This lack of real-time feedback and engagement poses challenges for educators, as they struggle to adapt their teaching methods to effectively reach and connect with each student. Finding ways to encourage student participation and create a more dynamic online learning experience becomes crucial in this new teaching landscape.
Solution
Scenarios
Broni teaches economics and management at a college. Now she’s been using Classroom for all her teaching activities since 2020.
Schedule Daily Work
The START page gives her clear clues about what should be done today;
A quick entrance pops up on the top so she can jump into the classroom right away.
Dashboard
The DASHBOARD page is for checking important information regarding her work:
Broni adds events on the calendar by clicking on the date;
She also reviews her weekly performance and students’ condition to better adjust her teaching style and plan;
Broni then checks important news and notifications on the NEWS page.
Class Preparation
To help students better prepare the class this week, Broni firstly updates weekly to do lists on the SYLLABUS page;
To help herself prepare the teaching, Broni adds a teaching plan for this week: knowledge points, related files, discussion groups and in-class questions.
Class Meeting
The condition indicator on the top turns from ‘idle’ to ‘living’, which means the class is on.
The face of whoever is talking will expand and pulse;
Then Broni starts to share the lecture slides, goes to session 1 ‘Chapter intro’ and puts forward a question (which she edited before in the weekly teaching plan). It’s fast and easy;
Anyone can use the pen tools to annotate on the screen.
Interactions
User’s activity will be shown with a bubble so no one will miss the info;
There are more interactions Broni could do beyond talking and texting so she could communicate more precisely;
During the class, Broni checks the feedback indicator on the bottom frequently to understand how well the students learn and adjust her teaching style;
Actions are saved every week, so users can easily check former weeks’ chat or files after they change the week on the top left corner.
After Class
After class, Broni reviews last week’s assignments and publishes this week’s assignments;
Assignments like multiple choices chould be graded automatically;
The replay feature is revolutionary:
Jumping to a certain section to improve review efficiency;
besides video, users could also re-experience all the activities happened during that week.
Design Process
Background
This is a UX project for software company SAP. They were developing design concepts for a tool that helps teachers to engage with students in a distant learning environment.
I was given 5 hours to do a whiteboard practice to give a preliminary idea for that. Later I developed my idea further and realized the concept with this product.
Problem
An effective and easy way to engage with students is missing after schools shut down and teachers had to move to a distant learning environment.
Goal Statement
Design something to help teachers better engage with students in a distant learning environment.
Industry Background
While countries are at different points in their COVID-19 infection rates, worldwide there are currently more than 1.2 billion children in 186 countries affected by school closures due to the pandemic.
Even before COVID-19, there was already high growth and adoption in education technology, with global edtech investments reaching $18.66 billion in 2019 and the overall market for online education projected to reach $350 Billion by 2025. Whether it is language apps, virtual tutoring, video conferencing tools, or online learning software, there has been a significant surge in usage since COVID-19.
Trends
While some believe that the unplanned and rapid move to online learning with no training, insufficient bandwidth, and little preparation will result in a poor user experience that is unconducive to sustained growth, others believe that a new hybrid model of education will emerge, with significant benefits.
I believe that the integration of information technology in education will be further accelerated and that online education will eventually become an integral component of school education.
Wang Tao
Vice President of Tecent Cloud and Vice President of Tencent Education
Premise
To have a clear direction of my design, I made the necessary assumptions as following:
Solution Type
Given the unique nature of the education industry, this project should not prioritize profit as its primary goal. Instead, I firmly believe that its success lies in addressing the needs of all educators and students, including those from low socioeconomics and minority backgrounds. Therefore, envisioning the solution as a web app seems ideal. A web app offers broad accessibility across platforms, ease of use, and compatibility with less advanced devices and networks.
Application Scale
Given the time limit, I consider education from K-12 to higher education first. Other minor education forms are not included, such as dancing, music or cooking.
Definition of Engagement
In this context, the definition of engagement will be the interactions that happen between teacher and student, before class, during class and after class. There are technical engagements (activities that teachers adopt to assess educational effectiveness, manage progress and connect with students) as well as humanistic engagement (activities that teachers adopt to build emotional connection with students).
Research
Target User
Other Stakeholders
Students, managers and parents could also be the users of my product.
Since engagement requires multilateral participation, other stakeholders’ experience should also be considered.
What challenges do they bring?
-
Some students without reliable internet access and/or technology struggle to participate in digital learning
-
Younger learners extensively use their senses to learn, making learning fun and effective through use of technology is crucial
-
Some parents worry about their kids’ healthy problem when everything is happening in front of the monitor
-
According to different majors or ages, users’ sensitivity of info density could be different
Interview
I conducted quick interviews with two types of personas, Stan and Arnie, to gain insights into their experiences and feelings after transitioning to remote teaching.
Stan
being more traditional in his teaching approach, emphasized the humanistic aspect of remote teaching. He primarily uses teaching strategies like presentations and individual communication.
Arnie
being tech-savvy and experienced with programming, has been utilizing online platforms and multimedia tools to enhance his teaching even before the pandemic.
Insights & Opportunities
Even college teachers could be confused about learning new software
Humanistic part is neglected by current online learning platforms
Network could be a big obstacle for fluent engagement
Interactions are limited in video/audio form, which restrain emotion deliver and decrease motivation
The learning atmosphere is created by interpersonal interactions as well as the environment
Current solutions don't build the environment well
Interface could be step further simplified
Bring humanistic care functions (for example, provide a way for teachers to better understand students’ feel)
Use light technology instead of HD video to improve engagement
Teacher may get feedback from students micro body language to know if they understand or not, but that is missing via zoom
Create shared optimistic virtual learning environment
Product
Iteration Process
Systematic User Test
1st round: Rough Sketches
To test the overall user flow
2nd round: Low-fidelity Mock-ups
2nd round: Low-fidelity Mock-ups
3rd round: High-fidelity Prototypes
To test the design system consistency, visual effects and functional layouts
Findings & Improvements
1
Initially, I designed an experience that maximized the potential of large screens, resulting in multitask-based layouts. However, during testing, some teachers mentioned feeling uncertain about their tasks despite having ample time. In response, I revamped the interface layouts by introducing more single-purpose screens and step-by-step instructions. This change proved beneficial in providing clearer guidance for their work.
2
Understanding that most teachers utilize desktop devices, I made significant improvements to the interface to enhance desktop operations like snap and collapsed cards, compact element sizes, and individual windows. These adjustments optimize the user experience, making it more efficient and seamless for those working on desktops.
3
To streamline the user flow and prevent confusion, I simplified the 'start' screen by avoiding doing everything here. Instead, I incorporated links that directly lead users to corresponding sections. This change not only reduced clutter but also ensured a more intuitive navigation experience for users.
High Fidelity Prototype
Product Management
Collaborate with Product Manager
Ensure proper project documentation is in place, capturing the project goals, design specifics, schedules, and update logs. This enables the product manager, team members, and all stakeholders to effortlessly monitor project progress and enhance the management and coordination of the tasks.
Collaborate with Devs
Maintain a clear and comprehensive design system encompassing rules, components, breakpoint regulations, tokens, and motion specifications. In Figma, establish presets that allow software engineers to efficiently translate the design language into flexible and adaptable code. This streamlined approach promotes effective collaboration, enhances productivity, and ensures future iterations can be easily managed and updated.