Overview
Exploration
Accessibility
Research
Design System

SchoolHouse

An intuitive, inclusive, and accessible portal for Seattle Public Schools, catering to both students and guardians, seamlessly functioning across multiple platforms.

My Role

Conducted research and interviews, developed a design system, wireframe, and high-fidelity prototyping, with an emphasis on accessibility and inclusivity in design. Focused on user testing to refine the user experience in each phase and assisted my team in developing the website. My responsibilities also extended to designing all visual elements, including the logo and onboarding screen illustrations.

Duration

3 Months

Tools

Figma
Illustrator
Premiere Pro
Miro

Team

Athena Sfikas
Rebecca Ravetz

Overview

The existing Seattle Public School system uses a complex array of 7 portals, including Clever, Schoology, SeeSaw, The Source, and Office 365, primarily for students and guardians.

This unorganized, disconnected system requires multiple login credentials, making navigation challenging and lacking in inclusivity. Users struggle with the disconnection among these systems, the steep learning curve of each portal, and the lack of inclusivity for non-English speakers and differently-abled individuals.

The Challenge

How might we create an experience allowing students and guardians to use the Seattle Public Schools Systems that feels organized and easy to use?

For students ...

Boost efficiency - Helps students receive advanced reminders for assignments and quiz due dates, streamlining their academic planning and reducing the last-minute rush.
Proactive usage - The user-friendly and enjoyable user interface of the portal encourages students to actively engage, making it feel like more than just another dull learning tool.
Improve collaboration - Create an environment that supports collaborative learning and easy interaction among all parties involved.

For guardians ...

Navigational confidence - The portal's design is intuitive and user-friendly, ensuring that guardians can effortlessly navigate it. This allows them to synchronize notifications, access information, and view schedules without facing a steep learning curve.
Elevate involvement - Enhancing the portal to not only provide basic information but also actively involve guardians in the educational process.
Increase accessibility - Making the portal inclusive and accessible to a diverse range of users, ensuring that everyone can equally benefit from the features offered.

Exploration

New features preview

Guiding new users through its features and navigation. It highlights unique functionalities and updates, enhancing user engagement and building confidence by making the app more approachable and user-friendly. Additionally, aesthetic illustrations within the onboarding process are key in maintaining user attention and creating a visually appealing experience.

Customizable Dashboard

Offering flexibility and scalability, this approach allows for easy customization to suit individual user preferences. It utilizes a modular card design, creating a centralized hub for accessing all information and functionalities, thereby offering a tailored experience that allows students and guardians to personalize their portal according to their specific needs.

Smart To-Do List

Helps students organize and prioritize tasks, aiding in time management and boosts motivation through the satisfaction of completing tasks. It automatically displays all course assignments with due dates to prevent missed deadlines and distinguishes between unmodifiable course assignments and customizable tasks, which can be color-coded and easily synced to preferred calendars for efficient management.

Messaging in private or to group

Students and instructors can chat directly and send messages to more than two people, which will automatically convert into group messages to create in-class study groups for facilitating collaborative work. The system also supports voice messages for easy communication, along with the sharing of course materials and attachments for efficiency.

Inclusivity and Accessibility Design

Inclusivity and accessibility shape our design approach, tailored to Seattle's growing diversity, ensuring SchoolHouse is user-friendly and reaches the widest range of users.

Research

Existing System

Pain Points

Disconnection

Too many different systems trying to work together and each poses its own learning curve, making the overall experience inconsistent and confusing, resulting in frustration when looking for information.

Lack of User Accessibility

Little accessibility design and lack of other language support.

Design and Interface

The app currently has an overly complex interface with too many icons, making it unfriendly for first-time users.

Customization and Engagement

No customization is offered and the interfaces look boring to the young students.

Lack of Efficient Communication

Direct messaging or group chats are not currently possible and have to go through 3rd party solutions.

Survey & Interviews

Results from guardians

  • 80% guardians think multiple portals are confusing and non-intuitive.
  • 85% guardians only use one or two portals to access the most important information
    because it is too tedious to get to other portals.
  • 70% guardians use portal to check grades and assignments.
  • 80% guardians want to have a centralized place to get information and notification.

Results from students

  • 50% students are from middle school, 38% high school, 12% elementary school.
  • 100% students use portal dashboard to check assignments, quizzes.
  • 70% students use Schoology only for managing and submitting assignments.
  • 50% students often miss assignments deadline due to lack of reminders.

Design System

The interface design of SchoolHouse is intuitive, multi-functional, accessible, aesthetics, and minimal.

Color Palette

Utilizing harmonious colors like yellow, red, and deep blue, the design ensures a comfortable user experience with clear and readable contrasts for headlines and body text.

Logo image

Typography

In designing an inclusive app for various devices, clear, readable text is prioritized by using the San Francisco Pro typeface, adaptable across platforms, while avoiding hard-to-read ultralight and thin fonts.

Logo image

Ideation

Prototyping

User Flow Scenario

"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."

What I learned

Incorporating standard accessibility options not only eases guardians' minds about school but also helps them participate in their children’s academic success. Accessibility and inclusivity should be a standard across all public schools. Portals and other interfaces created with this in mind lead to the efficiency and success of all users, not just those who need it.

Next Project