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 comprehensive design system, and created wireframes and high-fidelity prototypes for the entire mobile UX and UI, emphasizing accessibility and inclusivity.
Focused on user testing to refine the user experience at each phase and assisted my team in developing the tablet's design.
My responsibilities also extended to designing all visual elements, including the logo and onboarding screen illustrations.
Duration
Tools
Illustrator
Premiere Pro
Miro
Team
(Tablet Design)
Rebecca Ravetz
(Tablet Design)
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.
Exploration
Direction 1
Direction 2
Direction 3
Direction 4
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.
Exploration
Direction 1
Direction 2
Direction 3
Direction 4
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.
Exploration
Direction 1
Direction 2
Direction 3
Direction 4
Inclusivity and Accessibility Design
Accessibility
Offer a menu with accessibility options such as a screen reader, adjustable text size, magnifier, and dark mode for people who need them.
Language
Offer language choices for speakers of other languages, featuring Seattle's top three languages and an option to add more; the system will save user preferences.
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
Logo
The SchoolHouse logo features a minimalist illustration with playful details like eyeglasses, creating a relaxed and engaging connection to the school portal.
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.
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.
Ideation
Personas
Empathy Map
Information Design
.jpeg)
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."
