Nov 30, 2021
Active communication between schools, parents and students
{App name} enabling the union of classes and parents with teachers — UX case study
Problem
{App name} emerged as a solution for the user experience bootcamp project. Work enriched with the help of Oscar Ribeiro, João Pedro Ponce and, of course, the users.
The following theme was proposed as a starting point:
How to enable traditionally face-to-face activities into online environment?
With that in mind, we used Design Thinking, a framework that helps in the process of understanding and identifying users’ pain (discovery and definition), choosing possible solutions (ideation) and creating a prototype for testing and validating the product (prototyping and test).
With children in mind, {App name} came to create a school channel, connecting school, parents and students so that everyone is on the same page. Schools will be able to create to-do lists for their students with instructions for parents, who will be able to track their children’s performance and learning. Interaction between peers, parents and teachers is guaranteed.
General organization
For documentation of the steps and collaboration between those involved, we chose to use MIRO. It was crucial for the progress of several steps, as it functioned as a whiteboard, in addition to being a practical and easy-to-use tool. It’s even good to see how much office supplies you save. Our meetings were on Google Meet.
Research
We started the project in June 2020, raising what we already knew about the topic and what we would have to discover. After some discussion we decided that our starting theme was too broad and many of our questions were related to the routine of children and teenagers. We used the CSD matrix (Certainties, Suppositions and doubts) as a living element of our project to organize our certainties and doubts.
Two methods helped us to understand the pains, frustrations, personality and desires of children:
- Quantitative Research (Form)
- Qualitative Research (Interviews)
We launched a form (made in Typeform) and shared it with friends and family members. 9 of 18 answers were from those responsible for children aged 4 to 10 years.
For the interviews, 5 parents and 3 children aged 5, 9 and 10 years participated. The younger, the greater the challenge of interviewing.
With delay on changing how schools interact with students, children have more spare time and need attention of those around, who in turn aren’t able to teach them. With social distancing, the interaction between children decreased considerably. It was evident that they lack a responsive environment with their peers.
Personas
Based on the surveys, we created 2 profiles that represent part of our audience (parents and children) with living standards, routines, pains and desires.
Focusing on the personas during the process helped us to understand the needs of each user and how that would affect the design of the application.
For example, we knew that around 6 years of age, children learn to read, so ages below that would have to interact through audio, video or under the supervision of an adult. For future validations, we had the idea to create a mascot for the app. He would be responsible for instructing the child between app’s features in a more playful and didactic way during use.
Job Stories
So far, we had some insights that could become business opportunities. To clarify the problems faced by the personas, we wrote Job Stories:
When [a situation happens] the user wants/needs [something] so he can [solve a pain].
In addition to prioritize, Job Stories allow us to identify if we are dealing with real pains or if we are already trending towards a solution.
An example of a trend in choosing the problem would be, in the case of Job Story #1:
Benjamin wants to send messages through a chat so that he can interact with his classmates.
Is the best way for students to communicate is via chat? What situations trigger this need? Just to talk? That way we’re creating the answer to something we haven’t tested yet.
Some people say that creativity is the ability to form connections between ideas that a priori have no relationship, but together serve as a solution to a problem. And to increase our range of ideas, we did a Benchmarking: we analyzed the best market practices for our segment.
Knowing that Benjamim is around 8 years old and many of our Job Stories relates to his routine (learning, activities and relationships), we searched for applications with a similar purpose. We searched for layout and color references in Dribbble and for heuristic analysis we investigated Play Kids.
Heuristic Analysis
This analysis seeks to assess the navigation and usability of an application. Among the possible evaluation criteria, we used those proposed by Abby Covert, with 10 of them.
Having more knowledge of possible features and styles to combine, we made a sequence of activities to stimulate creativity.
Brainstorm
With 15 minutes marked on the clock, each one wrote on blocks all the ideas that arose on how to solve our Job Stories. Another 5 minutes for each to present their insights.
Modified 10 plus 10
A variation of the “10 plus 10” and “Crazy 8” techniques. It consists of creating as many drafts of screens/functionalities as possible thinking about concrete ideas for the product. After 30 minutes we present the results between the group and choose the 2 best results. We repeat the process, but using the ideas chosen in the 1st round as a starting point. From the second poll we had a winner who, out of 7 ideas, ended up in 3 versions of the same.
Mind map
We gathered all insights by topic in a way that represented the big picture of what our business would become.
User Journey
Keeping in mind our personas we created a flow of the main actions so that the experience was complete. In each action we highlighted points of gain or pain we could predict.
Store
The “showcase” of the product in online stores is an excellent way to summarize its purpose. Helped us create the app description.
At this point we had 2 paths to follow:
- Improve our knowledge of the new persona representing schools;
2. Continue validation of our idea with parents and children.
We decided to continue (2) and ensure a minimum validation than having more information to work with and perhaps not reaching a conclusion in the proposed time.
MoSCoW
This tool helped us understand what were the essential features that we would have to prototype in order to validate our value proposition. “Must Have” is what goes into the prototype and “Should Have”, “Could Have” and “Won’t Have” are left for a next validation.
User Flow
Keeping in mind the app’s essential functionalities decided on MoSCoW, we created a flow where each step represents an interface. As our validation would focus on the interaction of parents and children with the app, the flow consists of entering the home page (Student Profile), choosing a pending task, viewing the tips content, sending a photo/video of the task. The flow was initially drawn on MIRO and recreated on Whimsical.
Scribble frame
Here is where the interface design starts to emerge. With scribble frame, we were able to create a low-fidelity visual prototype that doesn’t require as much time to be changed, giving more clarity when producing the high-fidelity version.
High Fidelity Prototype
We used Figma to create the high-fidelity prototype. At this point, we have already considered some elements of the Design System to keep a certain organization and clarity: we created a color chart, defined the typographies and their sizes. Over the course of development recurring shapes emerged, becoming components and more comfortable views defined the spacing.
Tests with users
The test aimed to validate the prototype’s concept and usability with Alessandra and Benjamim, our personas.
With the issue of distancing, we chose to perform the test completely digital. Google Meet and Maze were fundamental by making this happen. Plugging the prototype into Maze platform made possible to create missions in which the user must perform a sequence of actions within the prototype. From the results, we have whether the mission was completed along the ideal path, indirectly completed or not completed (dropout). In addition, we were able to see the time spent on each screen and where there were clicks.
We did 5 official interviews (we even tested the interview beforehand to avoid mistakes), 4 parents and 1 child aged 10 years. The test consisted of 1 introductory question about the children’s routine and 8 missions:
- Find task tips;
- Submit a task;
- View history of recent events;
- Find student’s performance in a subject;
- Find class’ schedule;
- Discover class syllabus;
- Talk to the teacher;
- Interact with colleagues.
At the end of each mission, we asked them to give a grade from 0 to 5 of how useful that feature was in the interviewee’s daily life. Then we made available a form made in Typeform with the SUS Framework questions (System Usability Scale). The respondents also gave an overall rating of 0 to 10 for the app.
Results
SUS Framework is an easy and very common way to assess the effectiveness, efficiency and satisfaction of an application. The final grade ranges from 0 to 100 and determines whether the app’s usability is poor (under 68), good (68 to 80), or excellent (over 80). Our average was 44.2, which can be explained by some of the findings from the tests:
There was only 1 dropout on the first mission and the completion of missions was mostly indirect (67.5% of the time).
The functionality with the lowest grade was the interaction between children, the other features were well evaluated and overall the application received a score of 9.4.
Other considerations
- Highlighting backlogs and what has already been seen in history may help the user;
- Class icon on the menu doesn’t make much sense to be a chapel;
- On the class screen, the test of adding buttons that lead to the menu, calendar or subjects is worth testing, which can make it easier to find information;
- Creating arelationship between the calendar and the subjects can improve the experience. The same relationship holds for the task;
- The interaction between children is very debatable among those involved, as they are very young, children are often not allowed to use a cell phone, they can end up harming each other and the blame can return to schools;
the prototype below is navigable and testable.
Concept validated, time to build the app! For that, it would be necessary to improve the prototype, make another round of tests (including schools) and develop the application. With the product on the market, studies and tests cannot stop, and as a guide in this journey it is possible to create a range of indicators, such as customer satisfaction rating, Google Analytics, weekly active users, number of new users, Churn (loss of customers) and the list goes on with so many possibilities.
Trust in the process
When it doesn’t seem like we’re reaching conclusions, don’t worry, there are specific steps in Design Thinking for that.
Listen to people
The user is the main part of your app’s success, so listen to it.
Define the problem well and don’t get attached to the solution
If the problem is too broad or is defined based on a solution, the chances of the prototype failing are greater. The user’s pains may not have been well mapped.
Organize
Design Thinking can become an endless process, with many validations and tests. Adapting the steps according to the time available (ensuring a minimum sample of validations) and prioritizing the features that add the most helps the development of the project. Future cycles can solve issues that were left unresolved and have a certain importance.
Diverse team
The more references, the more ideas arise.
Take the risk and don’t be afraid to make mistakes
Does it look like a very difficult mountain to climb? Try to learn new concepts and tools that help you, put it into practice and learn from the result, each step at once so that the fall is small. It is pure Design Thinking in our lives.
Did you notice that the app still doesn’t have a name?
We left the name open for you to choose. Enter this link to vote!
See the current result here!
Portuguese version:
https://uxfol.io/project/044220b3/Comunica--o-ativa-entre-escolas--pais-e-alunos
