SchoolHouse

A single, responsive, unified school portal for Seattle Public Schools

Timeframe

9 weeks

Collaborators

Becky Ravetz
Claudia Tang

Project Type

UX, Web, App Design

Role

User research, wire framing (desktop), prototyping, user tests, design system, and information hierarchy map

Overview

An improved school portal experience

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. 

Challenge

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?

Solution

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. 

My Role/Responsibilities
  • Research
  • Wireframing (desktop)
  • Prototyping and users tests
  • Design System
  • Informational Hierarchy
  • Presentation
Tools
  • Pencil and paper (sketching)
  • Figma (wire-framing, desktop design)
  • Miro (remote group collaboration, brainstorming)
  • Google Slides (presentation of deliverables),
    Google Sheets (record of hours)
  • Adobe Illustrator
  • Adobe Photoshop
Process

Process

Research

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.

Seattle Public School Portal Analysis

The Source

  • Parents can access administrative information online
  • Difficult to navigate for first time users and parents who aren't tech-savvy
  • Lacks accessibility features
  • The design needs to be intuitive, accessible, and easy to navigate

Clever

  • Colorful UI to attract students to use it
  • Unfriendly for the first-time user: too many icons on the UI interface

Schoology

  • Portal for both parents and students; easy for students to use, difficult for parents to use
  • Most accessible for students out of the other portals
  • Parents like the ability to see their child (or children's) academics with real time updates, although hard for first time users
  • Time consuming and confusing for parents to get access codes and sign up

Seesaw

  • Customizable: change module color, fun, attracts younger students
  • User friendly: easy to navigate
  • Complete features
  • Lack of privacy: no direct message or message groups
User Interview 1

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.

Empathy Map

A summary of the initial interviews.

Users and Audience

Tim and Jenna are based on actual user interviews and represented the types of users the portal system is designed for.

Jobs To Be Done

The jobs to be done user test exercise allowed us to understand the thought process and priorities of parents and students.

Ideation

Information Hierarchy

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.

User Stories

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:

  • As a student who has reading disorder or impaired vision, I want to be able to check my classroom’s dashboard and track my assignments so I know when they are due to keep ahead in class.
  • 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 calendar screen and express myself like sending messages to my classmates.

    Parents:

    • As a parent who is blind, 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.
      User Flows

      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:

      • As a parent who is blind, 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.

        Mobile App User Flows:

        • As a student, I want to customize my portal so I can have a personalized space and build my own calendar screen and express myself like sending messages to my classmates.
        • As a student who has Reading disorder or Impaired vision, I want to be able to check my classroom’s dashboard and track my assignments so I know when they are due to keep ahead in class.

          Creation of Assets

          Moodboard

          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.

          Design System

          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.

          Solution

          Final Deliverables

          Desktop User Flow 1

          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.

          Desktop User Flow 2

          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.

          Desktop User Flow 3

          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.

          Mobile App User Flows

          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.

          Reflection

          Outcomes and Lessons Learned

          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. 

          Success Metric

          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. 

          Next Steps

          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. 

          More Case Studies

          A picture of 4 cans, each a visual representation of the 4 flavors Heyday offers for their summer drinks with the text "seize the summer" under it.