The Challenge
Make the communication between students and teachers more easier, reducing the physical distance to the minimal and making the class feel more real and, why not, more tangible.

The platform used an open-source generic chat system that was not working well with huge performance issues and was not meant to handle questions and class environment. The team was working on an in-house solution to replace that.
The time I got to the company, the team was already working on a proposal based on votes. I started by analyzing that and found some problems:
1 - Poor design;
2 - Same experience for different users;
3 - You can't see the new questions coming as the most voted ones stays fixed on top.
The Research and Discovery
My first step was to start reading the study of personas that the company had done a couple months ago to identify who is using Descomplica. For live classes, in particular, the main user is teenagers around 15-18, both genders, who doesn't work, have a lot of free time after school, is preparing for the ENEM and need guidance to study. They have a great connection with Descomplica's teachers and see them as some sort of online celebrities.

From my work on Youtube, I got a lot of experience with live broadcasting, doing on my channel weekly, what was helpful in this project. I spent an afternoon in the studio watching how a live class is handled, the dynamic of the teacher, how the assistant manages the chat and select the questions.

Then I interviewed teachers and assistants to know more about their work. What would help them, what could be better, what could be different, etc.

After that it was clear to me that we had two very different and specific users for this product:
One solution wouldn't fit both groups as the team was imagining.

I brought that to the team and we discussed how much that direction would impact the development time, but by the end, they all agreed it was the right way to go.

Web UI/UX Design
Responsive design
Functional grid
Here are some sketching and exploration looking for the right way to go. I took a good time until getting a version that I felt comfortable for version 01 of the product.
This was my proposal for the students experience.
Descomplica has a strong visual identity, so my work should match that. My biggest task here was fit all the content in a more cohesive and structured grid, flexible for a responsible layout. With the new grid system, more polished icons and action buttons, and hierarchy between the elements, the interface looks very modern and stylish.
Over 45% of the students watch Descomplica's classes through some mobile device. Responsive design is mandatory.
Instead of over populate the interface with tons os elements, I came up with an idea to combine some of them into a more power button.
The call-to-action button is contextual with more than one function, making product more intuitive and smart. Here are some examples:
For the assistants, my work was easier. They used to work on the same computer, splitting windows to fit chat and a notepad to copy and paste the best questions. This could not take a lot of development time, so I designed an interface that was similar to what they were used to. The first column is the old chat embedded and fourth is basically a text form field.
Some ideas for future versions included allowing assistants to reply the students, hability to drag and drop questions and more control of users.
Here's an example how would look like when a question is answered by an assistant.
Back to Top