ClassConnect - virtual classroom environment
Build friendship with teachers and students
Overview
ClassConnect is a virtual class environment for students to interact with teachers and other students. Students are placed in pixel art classroom where they can interact with the classroom. They can interact with the environment to enter class meetings and quiz trivia room.
I participated in Girl Develop It Transformative Tech Hackathon 2023 in hopes of working in developers with the goal of creating a MVP to present to judges on the last day of the hackathon.
My Role
UX Team Lead
Teammates
1 UX/UI Designer, 11 Developers,
Tools
Design Tools (Figma, FigJam)
Collaboration Tools (Slack, Google Drive)
Scope
November 6 - November 11, 2023
The Problem
Millions of people are taking steps to increase their knowledge, skills, and expand career options by using online education and tutoring.
There is a pressing need for a comprehensive platform that seamlessly integrates the functionalities of virtual classrooms and interactive learning tools. Zoom and Kahoot solves these problems but doesn’t encapsulate an all-in-one platform for unified, engaging and collaborative experience for teachers and students.
The problem that we are trying to solve is:
Students struggle with focusing and interacting in online classes. How can we implement an immersive online class experience for both students and teachers to build a meaningful friendship?
UX Design Process
As the UX Design Team Lead, my design team followed the process below to create fully researched MVP.
Kicking Off with Competitive Analysis
Our design team went to look at other apps to see what their consumers reviews on the platforms that provide immersive experience. We wanted to look at were:
What activities do these platforms provide that make consumers enjoyed?
What pro and cons of the competitor apps that we can use as opportunities?
We found that most platforms that have an immersive experience:
Utilize virtual environment to enhance collaboration and engagement with people.
Allow customization of avatar and environment.
Allow interactivity in the virtual environment.
Survey – Key Findings
Due to the time constraints of the hackathon, we conducted a survey and received 10 responses to understand needs, motivations, and pain points of online learning. We found that:
65% of respondents prefer to find flexibility & self-paced when it comes to online classes.
65% of respondents prefer to receive student performance support.
60% of respondents felt that they are easily distracted and feel isolated.
Persona
We want to target two target audience:
Students - be able to engage in their online classes and utilize engaging, gamified tools.
Teachers - access an online platform supporting virtual classes and leveraging interactive tools in the class sessions.
We decided to focus on the students first as it aligns with the problem the product is trying to solve.
Sitemap and User Flow
We then laid out the sitemap and user flowchart to figure out how the students would enter and interact in their virtual classroom environment. Students are to enter virtual classroom environment via sign in/login, from there they can select an activity they want to do such as whiteboard game trivia, etc.
Sitemap
User Flow Chart (Student POV)
Solution
We then sketched out solutions on how to relieve the pain points of the students since we had limited time and it needed to be handed down to developers. We ideated on 3 solutions:
The Classroom Meeting Room will look similar to other online meeting applications.
You can chat and take notes during online class sessions.
Sign Up Page
Classroom Meeting Page
A classroom map area for students to interact with other students and teachers.
Students can click on the class environment to start an activity.
The quiz trivia is where students review what they learned in class.
In the future, teachers will be allowed to create their quiz trivia.
Style Guide
Wireframes
Classroom Map Page
Quiz Trivia Page
Prototype
Learnings
After finishing the wireframing, the design team notified handoff to developers but ran into issues. Our design team learned after the handoff:
Redesign the wireframes to match with what stack and APIs the developers are using.
Plan with developers to discuss what features is possible to build out in the short amount of time.
Coordinate with more experienced developers for projects that require a more robust tech stack to program.
Aftermath
Our team presented a fully deployable MVP of ClassConnect at the end of the hackathon. We won second place due to following what transformative tech would be and well-thought-out design. You can check our live website to test the product.
We are currently planning to continue to work on the product by:
1. Adding features that couldn’t be added due to hackathon schedule.
2. Create design for missing assets and features for developers to build.
3. Test the product with targeted users to then look for investors.
Special Thanks
I would like to thanks to UX/UI Designers and Developers that helped worked on this project with me. Thank you, Marita, for the creating the classroom map and Chaiya for the logo. 💕 Also, shoutout to Lucile and Jigme for making developing the project and making the product possible!