Interactive Webinars for Students, utilizing existing presence on YouTube and Student, Teacher android applications
Year
2019
Platforms
Web, Android
Role
Interaction Design, UI Design, Prototyping
Team (6)
Co-founder, Full-stack Developer, Android Developer, Product Designer (Me)
.png)
Kreatryx was an EdTech startup focussed on providing online and offline coaching for competitive examinations in India, primarily GATE. It was acquired by Unacademy in early 2020.
Live Sessions was a feature that enabled students to participate in live problem-solving with an instructor, solve a question within a limited time and watch the instructor provide the correct solution. Students can also compare their performance with other students in real-time via a leaderboard.
It was available on Web and the Android app .
Enabling students to practice solving questions during their final stage of GATE preparation
Usually, students solve a lot of questions during the final stages of their preparation, a few months before any competitive exam (eg. GATE). They analyse how well or poorly they did, learn from the mistakes and solve more questions.
We designed Live Sessions to enable students to solve questions, analyse along with an instructor and clear their doubts – all in real-time.
Provide an engaging, interactive platform for practicing questions instead of a one-way webinar on YouTube
With Live-Sessions, student can attempt questions and compare their performance with others via a leaderboard. They'll also have a recorded history of all questions and their answers from the session to analyze their performance later.
Increasing problem solving efficiency for the team, teachers and students.
With Live Sessions, we also improved the process of adding and accessing questions by instructors. Questions selected by the instructors were uploaded to the database. They can be accessed by the instructors with the app and sent to all students who’ve joined the live session.
This replaced the previous process of writing questions on the whiteboard, which was time-consuming, inefficient and tiring.
Reaching a wider audience with an already existing ecosystem of interactive sessions
Live Sessions helped scale up the existing closed ecosystem to be open for all Kreatryx users across the country.
Earlier, this was available only to students enrolled in the Classroom programs in a select few locations (mostly Delhi).
Our aim was to show all Live Sessions on the first screen as soon as the feature is selected on either the Android app or the Web version. We categorised all the sessions by exams (via tabs) and the session cards categorised by branches (eg. EE, ECE, ME and CE for GATE) for each exam.
For the first version, we decided to launch with focus on GATE and SSC as the only competitive examinations and expanding to other exams later. By using the design pattern of Tabs, more exams can be added later easily.
This is the screen/page people see when they navigate to the feature. All sessions are organised by Exams (GATE or SSC) and then by the Branches within that exam with each card representing a Live Session.
This tab shows the current question, sent by the instructor. This is available to all students who have joined the session live. The instructor also sets a time limit within which the students have to attempt solving the entire thing.
Once the timer ends, students are able to see the step-wise solution from the History tab. The instructor also solves the question on the board for students to follow.
All previous questions and their respective solutions are also accessible from the History tab.
This tab shows all the previous questions sent by the teacher in the session, regardless of whether students submitted an answer or not.
Once the timer for a current question ends, it becomes eligible to be moved into the history tab but stays on the Live tab until a new question arrives.
We also enabled viewers to compare their performance with other viewers joining the session. This simulated a competitive spirit, similar to something physical classrooms have.
Both of these elements are crucial to a candidates' performance on the competitive exams. They have to aim for the highest marks and efficiency of solving the questions. This enables them to attempt the maximum questions in the exams.
Each viewer on leaderboard had two characteristics that we used to rank them on the leaderboard: Marks and time spent to answer. Marks and time continued adding up as the viewers attempted more questions during the session.
After designing for a few ideal states that provide a foundational architecture of the feature, we designed empty states for a few scenarios that we anticipated.
The empty states for Live, History and Leaderboard were most likely to occur around the beginning, when a session has started but no questions have been sent. Hence no data for live, in history and nothin in the leaderboard since no one has submitted an answer.
Problem: Did not account for new and organic visitors
Initially, we wanted users to see all the sessions on their first visit to the Live Sessions page. This would serve a significant segment of users who come to the page via the social media posts, ads, notifications etc.
But we did not account for new users and organic visitors. New and organic visitors may not have the necessary context and knowledge of Live Session as a feature and platform.
Solution: Added a Landing Page explaining the feature
To solve this we added a landing page on the first visits, on website and app. The users will see the landing page/screen on their first visit on Live Sessions, and the Sessions List page/screen on subsequent visits.
Problem: Possible server crash due to an increased traffic of users at the same time
We anticipated a lot of users joining the sessions at the same time. The traffic could've been influenced by emails, SMS, notifications etc being pushed at the time of the session.
Solution: Controlled rollout with limited seats, added labels in Session Cards to notify users
We conducted the first live-session to test the platform. We decided to limit the maximum number of seats in order to control the traffic. The number of seats could be modified to allow more users to join, depending on how the servers.
We added labels for maximum number of seats in session cards to notify the users.
Problem: Lack of context about the session on the Live Session streaming screen/page
Once users join a session, the context of the session is lost in list view i.e. the previous step. Each session has accompanying attributes - name, description, teacher, duration etc.
This could be a problem in one specific use-case where students arrive on the live session directly from a deep-link shared via social media or ads.
Solution: Added description to provide some context about the sessions
We added all the descriptors from the session card view screen to the Live video screen: Title, description, duration, teacher profile and name.
In addition, we also added the number of users viewing the session.
Problem: 100s of students joining the session simultaneously, straining the servers
As this new feature increased in adoption, specially for sessions related to Electrical Engineering, 100s of users started joining the session at the same time. The controlled rollout required constant monitoring from the developers, and manually changing the maximum number of seats.
Constantly changing max. seats also didn't make sense from a user's perspective. It introduced uncertainty right on the interface.
Solution: Introduced registration process 24 hours before the scheduled session
We decided to introduce a registration process starting 24 hours before the session. Registration would end 1 hour before the session. Only those users who've registered for the session would be able to join.
This divided the joining/registration process over a 24 hour period. We would know how many seats to keep, eliminating the manual monitoring during the session.
Problem: Existing designs weren’t designed to handle multiple sessions for each stream (EE, ECE, ME, CE)
We decided to double down on conducting more live-sessions, across branches. This would mean having a possible 10-20+ session cards for each branch (scheduled, live, ended). Most of these would be cards corressponding to sessions scheduled for future dates (a week or month depending on the count).
The User Interface wasn't designed for this use-case. Hence, we needed to redesign the UI.
Solution: Added option for selecting the branch, hence organising sessions based on the branches (EE, ECE, ME, CE)
Each user has an app-wide branch selection applied. We decided to revert back to showing only the sessions pertaining to the branch users have selected. A student who has registered for EE is not likely to be interested in ME or other branches.
We added the exam and branch selection at the top. This selection is global across the app, selected once and all services are customised for that selection.
Solution: Added sections to further organise sessions based on their status (Live, Upcoming, Previous)
We also categorised the session cards based on the status of the sessions, instead of the branches. The session currently Live had the highest priority, visible on the top.
Next in the hierarchy were sessions scheduled for near future. They were organised chronologically, the closest schedule first and the rest followed suit. We also paginated the categories after 2 cards for each.
Problem: Previous designs for cards could not convey additional information required after the addition of registration step
With the addition of two separate steps: registration and joining, the complexity of the feature increased multi-fold, both from design and development perspectives.
A lot of information needed to be conveyed to the users, such as the date and time for registration, date and time for the session, dynamic indication of seats remaining, in addition to the existing information related to the session.
Guiding them through the process of registration before joining became challenging in the previous session card UIs.
Solution: Redesigned the cards to improve information architecture, and convey all the necessary information for students
Re-designed Session Cards with focus on improving the Information Architecture.
We tried to anticipate as many conditions and states as possible. I designed the session cards with each state and conditions along the way. This also double as an efficient way to handoff the designs to the developers.
We conducted a survey asking Kreatryx and Live Sessions users to answer a few questions about the experience of using the Live Sessions feature, feedback and the viability of a subscription model for Live Sessions in future.
Some key highlights from the survey:
“Please conduct the sessions more frequently.”
“Its best, and it should be held more often.”
“Conduct more sessions on core subjects.”
“Please increase the number of seats for the live sessions... Please make no of seats unlimited for free live sessions.”
“Seats should be increased because first live session had been missed due to limited seats.”
“It will be helpful if seats are increased.”
“... Only thing which needs to be improved is that registration should continue till the end of the live session (during live sessions as well) in case seats are available.”
“I was able to attend only one class bcoz in other classes registration was done before.”
“The registration process should extend till the session is about to start...”
“... if possible try to let us know via mails about the upcoming sessions.”
“Notification should be given...”
