9 weeks
Becky Ravetz
Claudia Tang
UX, Web, App Design
User research, wire framing (desktop), prototyping, user tests, design system, and information hierarchy map
The current school portal system consists of 7 separate portals: Clever, Schoology for students, Schoology for Families, Seesaw, The Source, Office 365, and Tech Support for Families. A common pain point for all users is needing to remember login credentials for all portals in order to log in. Within the system, it’s common for users to feel disorganized and unsure of how to complete the tasks they need to in order to contribute to their student's success.
How might we unify essential portal features into a single, multi-modal experience that is accessible through the browser and the mobile app? How might we build a portal with inclusivity and accessibility in order to benefit users from all demographics and backgrounds?
Building with accessibility and inclusivity as a foundational priority in mind, develop a singular portal that allows the user, whether it be a student or a parent, confidently complete all jobs to be done within one intuitive space.
Parents want their kids to be successful. The proper tools like school portals shouldn't be a hindrance to the academic success of a child’s education, and the need for a singular portal design that is accessible and intuitive for students and parents is essential now more than ever.
The WCAG (Web Content Accessibility Guidelines), and Laws of UX were referenced and used throughout our design process.
Our first interviews gave us perspectives from the parents and students to understand their pain points using the portal and walking us through their experiences over Zoom.
A summary of the initial interviews.
Tim and Jenna are based on actual user interviews and represented the types of users the portal system is designed for.
The jobs to be done user test exercise allowed us to understand the thought process and priorities of parents and students.
Click the photo on the left to see two user test exercise examples. The photo below is our final organization of jobs to be done based on user testing.
I developed a system flowchart based on the post-it user exercise categories as a starting point to create user flows. Click the photo for a closer view.
.jpg)
First, we made a rough sketch of how we could organize the home page off of the elements outlined in the informational hierarchy map. Click the photo on the left for a closer view!
Based on our research, user interviews, and empathy map, we came up with user stories for two types of users; parents and students. These stories specifically addressed their strongest pain points to give us direction on what our user flows should be.
Students:
Parents:
Once we decided on what the user stories were, we were able to imagine ourselves as the user and create a rough prototype of how they would accomplish their tasks. This would give us a baseline before bringing up the fidelity up in Figma. Click the photo on the left for our rough prototype screens.
Desktop User Flows:
Mobile App User Flows:
As we chose to create one single unified school portal, we needed a name, logo, and mood-board to create a baseline for the design system. We chose friendly, academic colors appropriate for all ages, and the typefaces were specifically chosen for the highest accessibility and usability. Our choices prioritized functionality; we wanted the user to not be distracted by any overwhelming branding.
As we chose to create one single unified school portal, we needed a name, logo, and mood-board to create a baseline for the design system. We chose friendly, academic colors appropriate for all ages, and the typefaces were specifically chosen for the highest accessibility and usability. Our choices prioritized functionality; we wanted the user to not be distracted by any overwhelming branding.
As a parent who is visually impaired, I want to check my child’s grades for specific assignments so I know what areas I can help improve their grades.
As a parent who is a non-native English speaker, I want to have up to date information about my child’s academics and school’s status, so I am informed what is happening in real time.
As a student who has trouble using my fingers to type, I want to message my teacher questions about assignments myself so I don’t have to ask my parent to help me use the system.
As a student, I want to customize my portal so I can have a personalized space and build my own to do list screen and express myself by sending messages to my classmates or group.
Note: Claudia Tang was in charge of building this part of our solution within Figma.
Involving users from the beginning only improves products and solutions. Prioritizing empathy for the user and maintaining an open dialogue with them throughout the design process increases accessibility and inclusivity, which benefits all users.
This project was successful by conducting user tests throughout the entire design process, leading to intuitive and efficient user flows that allowed users to contribute to a student’s success. Users also felt confident knowing how to navigate the portal. The success metric here lies with our user testing and their feedback; they felt like the flows were intuitive and appreciated their pain points being addressed. Most importantly, they felt heard.
There are many more steps SchoolHouse could benefit from. Bringing up the desktop flows to an even higher fidelity, creating more user flows, and conducting more user tests would give even further insight to any details and jobs to be done we could have missed that felt intuitive to us, but not to the people actually using the app. After more user tests and other editing was done, we would then recommend bringing the portal to launch. It would be ideal to have how-to walkthroughs and videos for those learning SchoolHouse, and it would be recommended to have learning sessions in-person and/or remotely to help users learn the portal.
