Reading time: 8 minutes

Project Overview

Tich is a virtual classroom platform dedicated to delivering an optimized experience for both instructors and students, facilitating enhanced teaching and learning in remote environments. The principal objective of Tich is to develop a remote learning tool that supports an education-centric workflow for real-time classes. This platform equips instructors with comprehensive tools to share diverse content formats, while enabling students to interact seamlessly with the instructional material and facilitator.

Design Process

Business Case

Conventional online learning approaches, which commonly depend on generic communication tools, have demonstrated significant limitations in effectively replicating the quality and engagement of face-to-face instruction. This shortfall largely stems from the absence of adequate didactic tools tailored for virtual learning environments.
The global online education market is experiencing robust growth, with an expected compound annual growth rate of 9.23% over the forecast period. Market projections estimate this sector will expand to approximately US$319.167 billion by 2025, rising from US$187.877 billion in 2019.
The widespread adoption of remote work and education in both corporate and academic sectors has solidified these modalities as sustainable and integral trends.

Target Audience

Insights from previous research have helped identify several core user segments with shared interests in remote learning solutions, including:

Universities
Training programs
Elementary schools (K-12)
Other higher education institutions

Among these, the primary focus is placed on instructors conducting workshops within training programs, as well as those teaching courses at universities and higher education institutions.

How might we leverage instructor-student interaction?

Discovery Phase

Qualitative Research

To optimize the interaction between instructors and students, we conducted in-depth interviews with eight users experienced in using Tich. Our objective was to uncover their pain points and understand how they leveraged features from other platforms to address these challenges.

The research revealed that video monitoring is a critical and highly valued tool for instructors, consistent with their prior exposure to similar functionalities on alternative platforms. Additionally, we identified two key modes within classroom sessions: discussion and presentation (monitoring). Each mode serves a distinct purpose and significantly influences the overall learning experience.

Competitive Audit

Ideation and Definition

Epic

Following a comprehensive synthesis of research insights, we identified three strategic opportunity areas unified under the initiative "Class View":

Facewall: Optimizing real-time class monitoring capabilities.
Polls & Reactions: Enhancing user engagement and interactive participation.
Personalization: Promoting learner motivation through tailored experiences.

Our initial focus centered on developing the Facewall module, which required seamless integration of real-time video streaming functionality.

Facewall Feature

Multiple research findings and technical constraints critically informed the interface design strategy:

Cognitive Load Management: To prevent user overwhelm, the interface limits visible video thumbnails to a maximum of nine, supporting effective participant monitoring.
Pagination for Video Streams: Due to media server-controlled stream distribution, a pagination mechanism was implemented to manage additional video feeds without performance degradation.
Stream Quality Parameters: DPI and FPS thresholds were established to ensure optimal system performance and maintain server stability amid scaling stream connections as camera activation increases.
Equitable Participant Visibility: A prioritization algorithm based on engagement metrics was designed to guarantee balanced visibility for all students, avoiding bias toward participants more prominently featured on the instructor’s screen.

Layout Design

Understanding critical classroom interaction moments, we developed two complementary layouts:

Waffle View: A 3x3 grid layout displaying nine participant streams simultaneously to facilitate comprehensive monitoring.
Focus View: A single-stream magnified display emphasizing active speakers or focal participants to enhance engagement.

Process

The design process began with low-fidelity wireframes that integrated all research insights and technical parameters. Continuous collaboration with the development team ensured clarity regarding technical limitations, expected response times, stream connection management, and bandwidth considerations—ensuring the solution was both user-centric and technically feasible.

Waffle View mid-fidelity wireframe for Desktop app.

Focus View mid-fidelity wireframes for Desktop app.

Results

Throughout the design process, I iteratively developed wireframes into high-fidelity prototypes, leveraging and expanding our established Design System, Haichi Kirei. Following comprehensive usability testing with current Tich users, we refined the design to enhance user experience and ensured responsive adaptability across multiple devices and screen sizes.

Delivery

Design + Engineering Collaboration

To promote seamless collaboration between design and engineering, we implemented a workflow centered on continuous alignment and clear communication.

**Specification Documentation and Delivery:**
We leverage GitLab issues to meticulously document and deliver comprehensive specifications for each feature or functionality, ensuring clarity and accessibility for all stakeholders.
**User Story Decomposition:**
Each specification is systematically broken down into detailed user stories, promoting a thorough understanding of user needs and requirements at a granular level.
**Collaborative Review Sessions:**
We facilitate 1 to 3 interactive sessions where cross-functional teams collaboratively review and refine functionalities, specifications, and acceptance criteria. This process encourages valuable contributions from both design and engineering disciplines.
**Ongoing Engineering Collaboration:**
Engineering teams remain actively engaged throughout the design phase, working closely with designers to propose, evaluate, and refine solutions. This continuous collaboration supports a cohesive, efficient, and user-centered development lifecycle.

Key Learnings and Conclusions

The research and validation process described exemplifies my systematic approach to implementing product changes and feature enhancements. I leverage a blend of techniques and methodologies customized to address the unique challenges of each product.
This project has yielded critical insights, notably emphasizing the significance of close collaboration between design and engineering teams. The team’s workflow and communication stand out for their efficiency and effectiveness compared to previous projects.
Our inaugural Beta program successfully engaged 400 individual users, achieving a key milestone. Direct user involvement provided valuable feedback, allowing us to identify and prioritize areas for product improvement.

Building the Nex-Gen Classroom — Tich