<aside> 🦄 The question was, How do you take something you did not believe in much, but forced by circumstance, make it click? 🚉
In January 2020, I had joined an Ed-Tech startup - Openhouse as just the 4th Engineer on the team. Openhouse was then 'making the scene' with its physical learning centers where we used technology to augment the experience. We did not have a formal designer, so it was just the Engineers, PM, and Content Team who did to and fro to decide on illustrations, layouts, and hex codes.
Mid-March, owing to the Pandemic, Openhouse had to shutter their physical centers. With education moving online, we were apprehensive because -
<aside> 🦄 We took a deep breath, said What the Heck, and decided to build our own online classroom. With a team of 3 engineers and 1 PM, we started hacking something together. The four of us worked closely together, sketched, trashed, agreed, disagreed with each other, gave high fives, and boom, thus was born the Adam.
Drafts for the Desktop Call screen
After the drafts, came the mother of Drafts - The Final-Final-pakka-Final-Draft
Enter Openhouse Meets - our crazy idea of what an online classroom should be.
And then there were bugs, and performance bottlenecks, and umpteen test runs, gathering feedback, staying up all night and writing hot fixes.
How did we go about building Openhouse Meets?
We agreed that Zoom and Meet were mainly built as conference tools, and for kids aged 6-12, attending class there would be no fun. So, we built the Classroom screen with tiles big enough so that the teacher can see all his/her students and the students can see their peers. We restricted the number of students per class to 10 because of this reason.
<aside> 🦄 The emoji on colorful tiles (when the video was off) proved to be a hit - except when some got assigned ☹️ and Dark Mode was a flop 😢 Lesson - Kids love Light Mode while in class.
We tried quite a few layouts and iterations before settling on the final one. We also knew that we had to support phones, and Phone browsers bring a whole different set of challenges - device heating up, unstable WebSocket connections, and some having extremely small screens.
We first tried a playful interface like the iMessage group call, where the Teacher screens and the board would float on top of the screen, and based on who is talking the bottom portion used to slide left/right to reveal the speaker. The problem was that we were trying this on the web, and feasibility questions were coming up.