PART 2: The Tactics & execution of version zero
Designing India’s largest online tuition platform for BYJU’S[Part 2/3]
My leadership experience as Director of Product Design at BYJU’S
PART 2: The Tactics & execution of version zero
In part one, I set the context of the project followed by a new strategic alignment negotiated with the management. Here I am diving into the details of the actual steps from the pitch to version zero of the product.
The scope of version zero & the execution phase.
Once we got the mandate to reimagine the whole product my next milestone was to build a robust & flexible infrastructure that would allow us to experiment well and scale better. There was tremendous pressure not to cross the earlier timelines set. The team had to do an incisive prioritise to reduce the scope and get things done on time.
The macro product journey & the prioritisation
We got some direction from similar products in the Chinese market and a few other concepts being discussed. Many were still at the exploratory stage. There was no clear leader in this market to look up to.
The in-class user interface infrastructure (macro)
The in-class experience being the face of the product, we immediately got on to figure out user-interface infrastructure for the same.
The in-class space being a dynamic one was very important for the best use of the real estate. Hence, we spent a good time testing potential use cases that may come up in the actual classroom scenarios.
Needless to say, the infrastructure was looking for direct inspiration from real-world classrooms and wetted against some of the traditional mental models of a typical learning environment.
The design considerations that shaped the interface infrastructure for the in-class experience.
1. The right place for the tutor
Design outcomes: Relationships, Learning
Where the tutor should be was the outcome of a lot of negotiations. the primary concern was to replicate the kind of intangible influences teachers have in a classroom on a student’s learning environment. One of the things that stood out to us was the hierarchy between the student and the teacher, which is well-defined in many physical classrooms.
Although teachers’ move around a lot in the physical classroom, there was an established hierarchy between the teacher and students. The student should be able to see the teacher almost all the time was also a consideration from the beginning. Hence we played by the size of the video tile (subtle but significant) and a dedicated, predictable position of it to implicitly claim the higher hierarchy for the teacher over the students.
Alongside such creative constraints, there were a few visual and UX design considerations that decided the final place.
The style guide that set the hierarchy remained as a rule of thumb even when we were expanding to other live video services later. We strongly believe that these intangible and subtle details of the infrastructure helped the users to ease into the new system without having much friction with previous mental models from the physical classrooms.
2. The right place for the user(on the student side) & the privacy concerns.
Design outcomes: Relationships, Recognition
The idea of a classroom is not complete without having a batch of students. A class-going experience is incomplete without making some close friends and relationships with others for a student. We realised these considerations will be important in deciding where we place the user and others in a relationship with each other.
There are multiple use cases in a classroom. One such typical event is when a student is spotlighted by the teacher for various activities like an assignment presentation, a special appreciation for something, etc. It brings a particular student to the centre stage for a short period. These are subtle but necessary communication elements we deliberately wanted to experiment with.
So, for the user(student), the position becomes more or less at a fixed primary spot. The other students will have a dynamic distribution that is based on their engagement (speaking, hand raising, etc.) Because of the hierarchy rule that was set, it was agreed that in general conditions the student profile tile will remain smaller than that of the tutor. There are various scenarios for this use case and all follow the same rule.
When a student is particularly spotlighted to deliver something to the whole class, where she or he is the centre of attention (e.g. assignment presentation, a birthday celebration, etc.). The interface infrastructure has tried to capture the spirit of the same through a bigger and pinned tile for this use case. The ‘spotlight’ feature has to be enabled(pinned) by the Tutor.
Another use case we attend to is the concerns around privacy. In the virtual world, the privacy of the users’ physical space is an important element of consideration. So, having a clear awareness about what is being broadcasted from their physical space and the sounds becomes an important but inarticulated concern from the users.
So a few proactive constraints were set to defend the users’ privacy rights from the hygiene point of view. The important one is if the camera is on the preview of the same is almost always available to the user upfront. This decision was more of a policy or guideline to set logic for various situations than a direct interface intervention.
3. The multipurpose primary viewing area
Design outcomes: Social Interaction, Competence, Relationships, Learning, Recognition
Need for a main stage-like area is where most of the action happens. Because of the synchronous nature of the product, we had put the constraint of not providing many custom views for the students. We realised it would defeat the purpose of being together and learning together in a unified manner. That led us to design a complete dynamic centre stage with very minimal customisation to it.
A technical consideration was also about providing this centre stage with maximum viewing area, especially when pre-recorded classes are being played and many other use cases like the classroom view(video profiles), Prerecorded content, Quizzes and other value-added features like Gamification leaderboards, Birthday celebrations etc.
One of the trade-offs for the digital space is not having enough collective classroom experience of being together with every student in the class. We have tried to address this concern as much as possible through various design interventions through this flexible infrastructure. Even if regular slides/videos are being played, we have made sure there are some students’ profiles are still visible to remind the users about the synchronous nature of the classroom.
However, there are times when the tutor wants the students to be not distracted, he/she can use a feature called focus mode. This feature can also be enabled by individual students if they wish to focus only on the content.
A focus mode with video will look like the above image. This is to address the students' privacy concerns. If the student’s video is always on, it will always be floating on the top along with the tutor's video. If another student comes into the spotlight during this time, that will also be visible by default.
One of the other use cases for the primary viewing area is during the Awards and celebrations. To keep the interest of the students we have envisioned a full-fledged gamification concept. A part of the gamification takes the whole centre stage during the awards and celebrations. Similarly, students’ birthdays are also celebrated on this centre stage with a lot of delightful elements to make it a memorable event.
4. Introducing a pre-class lobby space, opened a world of opportunity.
Design outcomes: Social Interaction, Competence, Relationships, Learning, Recognition
During the service-blueprint mapping, it was evident to us the influence of different spaces and stages of group learning experiences. We were studying such elements and found pre-class space to have a great opportunity in the digital space as well. It is the place where students meet each other, spend time, interact, crack jokes and bond without the presence of tutors directly.
The initial versions were visualised with some bare minimum features like the profile info of each student in the lobby, giving a high-five to each other, etc. The important thing, in the beginning, was to claim that space and introduce that within the user journey so that we could explore it in detail later.
In the later versions, we added more elements to help the children engage with others and explore content beyond the class or the topic. The idea was to provide a space for social interaction and building meaningful relationships and create a space to build various plug-and-play activities and events before the class starts.
5. Other virtual learning aids & delights beyond the physical references.
It is a virtual product after all and it has problems that are related to the typical digital realm. We had developed a very robust class forum for two-way communication, other logs and notifications that can be accessed at any point in time of the class.
A class forum can also be very crucial to gamification efforts and other important messages that can be clubbed together to create a set of experiences that are probably not even possible in the physical space.
Apart from the logged-in notification, we have worked on a system to communicate the different kinds of notifications with different urgency and attention. It is a set of toast messages and other modal pop-ups that are carefully designed to have a consistent system of language for the users.
Conclusion
These are only a few examples to showcase how the strategy translated into screens and how the infrastructure and the initial guidelines were conceived to be able to further experiment with new features as and when we need them.
The macro-planning through these unique spaces in their basic elementary state helps the team to build on top of it without recreating different user journeys each time. This helps the users to easily onboard to the digital experience with a lesser learning curve and focus on the things that matter the most.
In the next chapter, I will be detailing how we planned and where we gathered our confidence in creating such a flexible infrastructure, along with a few examples.
Please find the link to the third and the last part below.
