Seattle Public Schools Portal
How might we create a streamlined, universal portal that students and parents can easily use for all their online learning needs?
11 weeks
UX Research, UX Design, Prototyping, and User Testing
Figma, Adobe Illustrator, Google Suite, Zoom
Mike Sylvester, Adrian Garcia Rodriguez
The students and parents of the Seattle School District have expressed concern over the current online learning portal. The system is difficult to navigate and requires multiple logins for different interfaces We were hired to unify these features into a single portal.
The online portal for Seattle Public Schools is notoriously difficult to use. This platform is a place where parents, teachers, and students are meant to track academic progress easily. Five main tasks are typically completed online: accessing grades and attendance records, tracking homework, paying for expenses and fees, signing permission for field trips, and checking school bus routes and arrival times.
While the convenience of accessing school information online is extremely helpful to busy families, the confusion of using five separate systems outweighs the benefits. Our goal was to create a streamlined, accessible, and delightful interface that makes parents’ lives easier regarding managing their children’s education process.
We felt this was a complex, nuanced problem requiring a heavy start of qualitative research. Before we began interviews, we did a site audit to understand the architecture of the existing site to prepare our questions for the Parents and students.
Next, we interviewed various parents of kids that attend Seattle Public Schools and screen-recorded the parents walking through the website.
What specific needs or tasks motivate you to use the school portal?
Can you describe your overall experience with the school portal, including any challenges or frustrations?
What features or aspects of the school portal do you find most valuable or beneficial for managing your child's education?
If you had the opportunity to enhance or redesign the school portal, what would be your top priority for improvement?
Please share an example of a user-friendly portal (e.g., student, vocational, or banking) that you find easy to navigate and interact with, and explain what makes it stand out to you.
What tasks or features do you use most frequently on the school portal, and how do they support your learning experience?
Have you encountered any difficulties or frustrations while using the school portal? If so, please describe your experiences.
How does the current design and functionality of the school portal affect your ability to stay organized and on top of your schoolwork?
If you could add or modify one feature of the school portal to better support your educational needs, what would it be?
Are there any other platforms or applications that you find particularly user-friendly or helpful for managing school-related tasks? What makes them stand out to you?
This helped us not only discover pain points for the Parents but also simply view the site's inner workings since we didn’t have access to our own.
Students get confused and bypasses most links
Students only go to exact locations when told to do so by their advisor.
Students think the functionality of the site doesn't match what he needs to get accomplished
Students often get distracted easily while moving from one portal to the next making it harder to get work finished.
Students simply just don't get things turned in because they don't know how or where to do so.
Parents feel classes, grades, and schedules are most important.
Parents think it would be helpful to see what’s due in one spot.
Parents want to be able to pay from the screen that displays the fees.
Parents are overloaded with the amount of locations to search for what they need
Parents simply just don't have enough time. Make it easy!
Next, we compiled our research into two user profiles to keep their needs prevelent in our design process.
Sasha is a busy parent of two children, ages 9 and 12. With a demanding job, she often feels overwhelmed and finds it challenging to keep up with her kids' school activities. She wants to help her children succeed but lacks time to be closely involved in their schoolwork.
Rodrick, a creative and curious 12-year-old diagnosed with ADHD, loves playing basketball and participating in the chess club. Despite his academic potential, he struggles with organizational challenges and information overload, affecting his performance and experience.
Too many steps for each task & unclear how to make a payment
Confusing navigation / Complicated amount of steps
Have to scroll to get any information endlessly
Lack of clear direction/labels & Little customizations available
Most convenient links are tailored to specific needs rather than all users
Mesh the features between The Source & Schoology
Improve the labeling system
Simplify the interface for accessibility
Streamline the most important information
Revitalized Calendar with familiar patterns
Based on the needs of our users, we identified the "jobs to be done" and created a list of features that our portal needed to include:
Access Grades & Attendance at a Glance
Easily Track Homework, handouts, & Assignments
Find & Pay expenses that are due
Easy Parent-Teacher / Student-Peer-Teacher Communication
Customizable dashboard for Language & accessibility needs
Quickly navigate a familiar & simple interface
Drawing upon the valuable insights from our interviews, we diligently planned the app's functionality to cater to user needs and preferences.
We each spent time ideating sketch wireframes that we felt would solve the problem and then came together to discuss the solutions we had come up with. This approach allowed us to have several different perspectives for the best solution and more opportunities to come to the surface.
Once we agreed upon design solutions from our wireframes, we began building our design system using the principles of Atomic Design.
By starting with these smaller elements, we could ensure that our elements had consistent measurements and spacing across all devices, like little pieces in an assembly line. These smaller elements allowed us to build a set of "lockups," which we use as the building blocks of the cards and navigation.
The cards and dashboard frame are the molecules of our design system, which we built with responsiveness in mind as the content changes through customization and different device breakpoints for responsiveness)
While developing the design system for the portal, there were concerns from our research that led to a green-field approach to accessibility. With a base of accessibility standards from Google’s Material Design, we were able to develop a portal that would pass tests on color contrast, text size, line height, touch target size, and iconography.
With an atomic design based system in place we made a prototype with user flows based on our jobs to be done.
Based on our Jobs to be done, we developed a set of user flows for our testers to follow.
As a student with ADHD, I want a simplified dashboard that displays only my homework and assignments so that I can focus on completing my tasks without getting overwhelmed
As a busy parent, I need a streamlined process for completing my child's sports permission slip, and paying sports dues, so that he can participate in basketball season without any delays.
As a concerned parent, I want to access my child's grades easily, view missing assignments, and access additional information so that I can assist him in improving his academic performance.
As a parent scheduling a dentist appointment for my child, I need to view his class schedule and coursework to choose an appointment time that minimizes the impact on his education.
As a parent who notices her child's falling grades, I want to access attendance records, communicate with teachers, and explore possible solutions to help my child improve their academic performance.
Having colors associated with classes as well as the status of assignments was confusing.
UI elements had little resemblance to eachother, feeling like it was compiled from contrasting design system patterns
The text size was hard to read in both mobile and on desktop
Too many compartments holding information / dashboard cards
Students felt the interface felt dated, even more-so than the existing online tools.
Parents and students realized they used mobile more than they used desktop, so the mobile UI needed more focus.
After making adjustments to the prototype from the user testing feedback, we landed on an updated branding style, more intuitive and familiar interface with common design patters, and a cohesive design system.
