PROJECT DURATION
80 hours
MY ROLE
Sole UI/UX Designer & Researcher
TOOLS
Figma - Miro - Illustrator
DESIGN
Low-Fi Wireframes
High-Fi Wireframes
Interactive Prototype
FEEDBACK
User Testing
Mentor Advice
Peer Critiques
ITERATIONS
Iterations
Small Details
Copywriting
Prosper is an interactive software that will help to significantly reduce distracting school behaviors by learning and practicing social and emotional skills through gamification.
Or scroll to read the full case study
What’s the problem?
Whether minor or more serious, disruptive behavior in the classroom has negative impacts including:
Lost instructional time (up to 50%, according to some sources).
Lowered academic achievement for the disruptive student and fellow classmates.
Decreased student engagement and motivation.
Teacher stress and frustration.
Teacher turnover.
PROCESS
RESEARCH
Field Study
User Interviews
ANALYSIS
Affinity Map
How Might We
Personas
IDEATION
Task Flow
RESEARCH
I began collecting research for this project by having informal conversations with educators. The goal of these conversations was to uncover insights and pain points that would give me an idea or general direction of where to focus.
Common pain points uncovered:
Pressure to teach mandatory lessons on a strict schedule.
Student behaviors that constantly distract others or the whole class.
The time it takes to gently deal with distractions and refocus the class.
This common occurrence inspired me to find a new solution to one of the oldest pain points in education. My background working in human services helped me to quickly realize that the best way to help these teachers is to focus on helping the students who are showing the distracting behaviors.
Helping our students begins with learning who they are.
“Extreme poverty, homelessness, violence, neglect, the toxic effects of racism, parental substance abuse, and the list goes on.”
There is no end to the hardships that life can throw at kids. And, of course, the shared trauma of the pandemic has added layers of stress to the lives of children and their caregivers.
Revision 1
Insight: "behavior is communication."
“Children who are lashing out in harmful ways are always in some kind of distress. Throwing a tantrum may be the only behavior they have at their disposal because they lack language, impulse control, or problem-solving abilities."
Student Support Team
My initial hypothesis was that helping the students who distract others will have a positive impact on the school environment.
To help these students effectively we need to understand their complex ecosystem and gather a trusted team to support and encourage their progress. The student and their full support team are all potential users of this product and designing for all users is critical to the success of any product.
Potential users of Prosper include; students, teachers, paraprofessionals, behaviorist, principal, and parents.
My next step was to complete online research to familiarize myself as much as possible with current strategies, programs, new technologies, terms, definitions and anything else I could. This ensured that I would feel confident discussing social and emotional learning skills with professional educators.
Only then was I ready to write my script of questions and complete user interviews. I chose four educators from varying backgrounds and grade levels and one student to ensure a variety of perspectives.
ANALYSIS
After completing and transcribing my interviews, I used Miro to create an affinity map. I arranged my notes into six categories; Wants, Goals, Strategies, Situations, Pain Points, and Insights. Next I read through the notes again and added stars to the comments with the most impact within each category.
BEFORE
Now that I had collected all of the valuable data from the interviews, it was used to create personas. I included each group that would interact with this program the most. In this case the groups represented are; students, teachers, and support staff/administration.
In every project I continue to use these personas throughout the entire process to remind myself who I am designing for and the problems I am working to solve.
Student Point of View and How Might We Statements
Students with consistent distracting behaviors need understanding adults and specific social emotional instruction because learning and practicing these skills will help students to self regulate and decrease the number of distracting behaviors in the classroom.
HMW get students with distracting behavior more one-on-one attention?
HMW teach and practice social/emotional skills?
HMW help students to calm their bodies and minds when feeling overwhelmed?
HMW increase the amount of understanding/supportive adults and peers?
Principal Point of View and How Might We Statements
An administration that is trying to solve behavioral issues needs innovative technology because new solutions can help to teach important skills and keep children engaged in learning through gamification.
HMW implement new strategies that improve the school?
HMW decrease the amount of student outbursts?
HMW stay up to date wth innovation and technology?
HMW increase positive parent involvement?
HMW attract new hires and keep our current staff happy?
Teacher Point of View and How Might We Statements
Teachers with distracting students need support staff and a system in place because the distracting student has a need that isn’t being met and the class needs to stay on task in order to get through the daily lesson plan.
HMW increase the support of staff and admin during difficult situations?
HMW ensure safety in the classroom
HMW create a safe space for students to work through emotions?
HMW increase the amount of time spent on supporting students with behavior issues?
HMW increase the productivity and attention level of the students in class?
IDEATION
My next step was to figure out the user flows and which screens need to be designed so that I can eventually build a functioning prototype to test my key hypotheses.
DESIGN
After deciding on which flows to design I began to sketch and place elements onto low fidelity wireframes.
For this responsive website I wanted to design two screen sizes (tablet and desktop) that would be the most commonly used within a classroom.
Once I had a few screens laid out I shared my ideas and initial design choices with a mentor for feedback. With the feedback I made a few adjustments to my dashboard wireframe before moving on to higher fidelity wireframes.
Tablet Low Fidelity Wireframes
In this iteration I utilized the space available in a more effective way and integrated some inspiration from successful video game dashboards.
My goal was to create a dashboard that would be adjustable for the user’s needs and preferences so they can be as efficient as possible.
Tablet High Fidelity Wireframes
To create high fidelity wireframes I started with the desktop version of the teacher’s dashboard. I designed each element one by one then adjusted them each slightly for a cohesive look. Once the teacher’s dashboard was complete, it became my template for creating the student’s dashboard, which was fun to design due to its playfulness.
The incentive for children to complete tasks within this program is earning coins to customize their selected character. That is why I chose to make the character over sized on the student dashboard. This is intended to remind the child what they are working for.
I selected blue to draw the eye to the key features of each screen. I decided to create these in dark mode to mimic the art found when researching gaming dashboards and to reduce some user eye strain.
Desktop High Fidelity Wireframes
Teacher Dashboard - Key Features
USABILITY TESTING
After completing my hi-fi wireframes, I created an interactive prototype for testing. The testing included six participants who would be potential users of the Prosper program. I gave the participants three specific tasks to complete within the prototype.
1. As a student, navigate to the “Take a break” section and select Smiling Minds to continue watching episode 4.
2. As a teacher, send a new message to the support team requesting a meeting.
3. As a teacher, assign a task to Colin Smith for an extra 15 minutes of emotion regulation practice.
FEEDBACK
To collect testing data I received approval from each participant to record the conversation. I also watched and took notes while they completed each task. Each user completed the tasks without frustration and dead ends. They also offered some valuable feedback, suggestions, and questions which led to iterations that improved Prosper’s usability.
Revision 3
AFTER - Student Dashboard
AFTER
Desktop Low Fidelity Wireframes
Revision 1
During testing a participant asked the question, “What age group is this program designed for?” When I answered that this version would be for elementary school, she suggested that some of the text in the student dashboard may not work well for the younger end of that age group.
This was a quick revision that makes the student dashboard more child friendly. The suggestion reminded me to make sure each design is appropriate for all of the potential users so they can fully understand the content they are interacting with.
BEFORE
Revision 2
BEFORE
Revision 2
While testing a participant was looking at the navigation options on the left side of the dashboard designs. They were checking to make sure there was an option to view reports. Reports are vital for teaches to keep track of their students participation and progress.
I assured the user that the graph icon was selected for the reports section of this program, but the conversation made me think that the navigation design could benefit from labeling each icon. This revision added clarity and helps the user feel confident in their choices.
AFTER - Teacher Dashboard
Revision 3
While testing flow #2 (as a teacher, send a new message to the support team requesting a meeting), I noted that three of the six participants tried to send the message by clicking the “New meeting” button. Only after they found that button wasn’t active they found and used the circular send icon.
I realized after testing that the New Message element in the student dashboard didn’t need to have an option to start a new meeting. Eliminating the option for students to start a meeting fixed the problem on their dashboard. To fix the problem on the teacher dashboard, I chose to adjust the “New meeting” button to a stroke of blue instead of the full fill. I feel that this change will help to differentiate the buttons and help bring more attention to the send icon.
FINAL RESULTS
Looking back into this student project I am happy with the progress I have made as a designer. Creating a gamified responsive web design sounded like a daunting task, but I learned to look at the product broadly and focus on how the users would interact with it and what they need from the product.
The reactions I received from usability testing made me proud to have created this product. The participants all expressed a need and want for Prosper to become a functional product they can implement in their classrooms.
Prosper could make a real difference in the school environment and in the lives of countless students. It would significantly reduce distractions in the classroom, the workload of school behaviorists, and could even take the place of outdated school behavior strategies like detentions or suspensions. With more time I would like to create a light mode version and versions for middle school and high school level students. I believe that all age groups could benefit from this product.
AFTER