Solving the problems related to the face-to-face return of students to school
How we used UX Design to come up with solutions to help elementary school students return to face-to-face classes after the pandemic
The Challenge
Through the UX Design for Mobile Course promoted by Cellep and Facebook, this study case was prepared to practice the knowledge studied during the course.
My role was to be the UX/UI Designer along with 5 other people and also the facilitator of the group, going through all stages of the project, including:
- User and desk research;
- Conducting surveys and benchmarking analysis;
- Wireframing, prototyping and more.
Our challenge was to Design a Dedicated Mobile App to help elementary school students to readapt to face-to-face classes, thinking about the Brazilian context, within eight working days.
The Team
Our team was made up of six people from different parts of Brazil, and we used the Miro platform for all group dynamics and decisions. As mentioned before, everyone participated as UX Designers during the duration of the course and the project (which lasted eight working days), you can check out a photo of the complete team below:
The Context
In the context of Brazilian education, because of the isolation caused by the pandemic, many schools and colleges suspended their classes for a long period of time. After this suspension, classes returned remotely until a few months ago, classes returned to face-to-face.
These events caused a series of problems in education, such as students with a lag of six years in São Paulo, a dropout rate of more than 10% in secondary and higher education, 70% of children became more dependent on their parents and also 70% of teachers faced problems teaching during the remote period.
The Product
A dedicated mobile app to help elementary school students focus, socialize and engage, using gamification and educational content. Within the application you can play educational games, receive virtual game coins, create an avatar, get items/skins for your character, and more. The application also provides, based on the results of the games, detailed feedback for the teacher, saving hours of work. It’s possible to use the app at home or in class.
Project duration: From 18 april to 29 april (8 working days).
The Methodology
In order to be able to solve a problem through UX Design in such a small period of time, we needed to use an agile methodology. The one applied in the course was a variation of the design thinking framework, called Double Diamond. This methodology is divided in 4 stages/steps, Discover, Define, Develop and Deliver. The topics of this article were organized in themes following that framework.
1) Discover
The first thing we did as a group was to brainstorm about the problem that we would work on. One of the members of the group, Francini, used to be a teacher at an elementary school in Brazil, so we found an opportunity to interview her and identify some problems in the schools during and after the pandemic of Covid-19. So that is how the main problem was identified at the first place.
With the interview and brainstoming, we found some points that would need to be validated to stay on top of the subject about the difficulties in the post-pandemic era in schools in Brazil. So, a desk research was elaborated to check these informations. We use different sources of content such as articles, journals and other trusted sites.
Then, the information was organized in three sections using the CSD Matrix: Certainties, Suppositions and Doubts. The most important suppositions and doubts for the business would need to be clarified in a deeper research with potential users.
With that in mind, we designed a survey (a mix between quantitative and qualitative) aimed at teachers, students and parents of children. The flow of survey questions can be checked in the sequence, the results were analyzed in the second step of the double diamond framework, define. So we had a few days to collect responses to the survey.
The last thing we did in this step was a benchmarking analysis. We found three competitors that somehow try to solve problems similar to ours. We classified the strengths and weaknesses of each of the apps, in addition, a comparative table was made with criteria that the group found relevant, such as: Layout, Usability, Pedagogical Content, focus/attention (for students), Accessibility and Reviews in the app stores.
2) Define
In the define stage, it was necessary to gather all the data from the previously launched survey and analyze it. Since we used both open and closed questions, we had two types of data, below you can check some results of the quantitative questions (closed questions).
Clearly, it was possible to notice that the teachers had an increase in the workload, there was a large dropout of students and also a behavior change in the students (in the view of the educators).
In the students’ view, there was a feeling of being harmed in addition to an increase in mental health problems. In relation to school tools, the majority (60%) of those who responded to the survey had no problems using them during remote teaching.
For qualitative questions (open questions), it was necessary to analyze them one by one and then find patterns in the answers. The following are some questions and main answers given by teachers (T) and students (S):
- T) Q: What were the main difficulties you faced with returning to face-to-face classes? A: Learning delay, student autonomy/adaptation, students with changes in behavior and difficulty in socializing.
- T) Q: What resources and methodologies have you adopted to deal with these difficulties? A: Games in class, dynamics and educational games.
- T) Q: What were the changes in behavior noticed in students with the return of face-to-face classes? A: Socialization, autonomy/insecurity and anxiety/focus.
- S) Q: What was the biggest difficulty you had in returning to face-to-face classes? A: Routine/adaptation and socialization.
It is important to note that at the time the survey was launched, we still did not know which of the areas of education (elementary, secondary or higher) we would focus on. But after, we decided to focus on elementary school based on the responses.
After analyzing both the survey responses and the competitors, we identified the main insights that we would focus on:
3) Develop
In the double diamond’s third step, our mission was to come up with ideas, prioritize, define the main flow of the app and create the wireframes. For this we used the Crazy 8’s (ideas), MoSCoW Matrix (priorization), Simplified User Flow (primary user action flow) and paper&pencil/Figma/Miro (wireframes).
4) Deliver
Finally, after making all the decisions about the screens that would be built and with the best ideas from each member of the group, we proceeded to the creation part of the high-fidelity project in Figma.
We started defining the style guide to help us save time on prototype development. So typography, colors, icons, image style, buttons, inputs and other elements were chosen and componentized.
We opted for the color orange with some shades of green. This choice was made due to the meaning of the colors that match the objectives of this project. Orange refers to concepts such as sociability, joy, fun, playfulness and stimulation. Green is related to youth, hope, growth and friendship.
For the typography, two families were chosen, one for titles and another for body text. As the theme of the project is for children, we chose the Henny Penny font for titles, which has shapes that resemble cartoons. For the body text we selected a more sober font to aid in readability and legibility, for this we chose the popular Poppins font.
The illustrations used in the application were taken from Freepik, made by the illustrator Catalyststuff.
With the entire style guide prepared, we created the screens in high fidelity, created transitions through the connections, and finished our MVP (Minimum Viable Product) in just one day! Following, you can see a short GIF and some mockup images of our finished screens.
Next Steps
- Due to time, it was not possible to test the prototype developed in Figma with users. To validate the usability and the screens as a whole, it would be extremely important to do so. Carrying out a user research plan for a usability test would be the first step towards achieving this goal, with metrics to assess the success of the application flow.
- Because the app’s screens were created in just one day, only the user’s primary flow screens were created. To reach the finished product, it would be necessary to create the rest of the screens of the secondary flows. In addition to adjusting the screens in the “pixel perfect” style, leaving the spacing between elements uniform.
- Thinking on the business side, it would be interesting to align the games with school content for the age group of the application. It would also be essential to find partner schools to invest in the project, thus helping to develop it in the real world.
Takeaways
- Impact: Education in general was affected during the pandemic, especially in Brazil, which did not have much structure for basic education. As it was possible to note in the research, there was a delay in learning, an increase in psychological problems, in socialization and a difficulty in children’s concentration during classes. Our app emerged as a means to assist in both parts, in the work of teachers and in student learning, bringing together technology, gamification and knowledge.
- What I learned: During this bootcamp offered by Cellep and Facebook, I had the opportunity to use tools I had never used, such as Miro, Matrix MoSCoW, Double Diamond methodology and more. I was also able to develop a case study from scratch in just eight working days, and I couldn’t have done it without the help of our squad. So I would like to give a special thanks to the members of the group: Francini, Natacha, Augusto, Luiz and Renan. If you want to get in touch with them, I’ll leave their contacts below.
Francini: https://www.linkedin.com/in/francini-docampo-188819187/
Natacha: https://www.linkedin.com/in/natachacarniel/
Augusto: https://www.linkedin.com/in/augusto-colalto-bbba2b197/
Luiz: https://www.facebook.com/profile.php?id=100003020633588
