• Overview
The Seattle School Portal brings together several e-learning services such as The Source, Clever, Schoology, and School Pay. Each service helps students and parents manage a portion of the tasks related to the student experience. Unfortunately, these products require users to visit multiple URLs with many different logins making it complex and hard to navigate.
The Problem
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 causes frustration and confusion. Many users avoid using the site altogether.
The Solution
We were able to create a new web portal design that was streamlined and simplified to ease the cognitive load of the users. We distilled the interface to have one location that can be customized to serve every user's needs.
Role
Research, Concept, UX, Visual design,
Prototyping
Prototyping
Timeframe
8 weeks // 56 hours
Fall 2022
8 weeks // 56 hours
Fall 2022
Collaborators
Donnie Drake
Adrian Garcia Rodriguez
Adrian Garcia Rodriguez
Tools
Figma, Illustrator, Zoom, Notion
Client
School Project
• Research
User Interviews and Field Study of the existing site
Our team conducting a field study. The user is navigating the existing SPS site over Zoom
"MAKE IT EASY! Parents are overloaded. help us out."
-Parent
-Parent
As part of our UX research, we interviewed a parent who was using her child's school website to find information and complete tasks such as making payments and communicating with teachers. Here are the key findings from our interview:
Key Pain Points
• The site is confusing to navigate
The parent found the website difficult to navigate and was often unsure where to find the information she needed.
• Difficult to find what she is looking for
Even when she knew what she was looking for, it was often difficult for her to find it on the website.
• Uses search function for navigation
To overcome the difficulties with navigation, the parent used the search function on the website to find the information she needed.
• Difficult to find where to make a payment:
One specific task the parent struggled with was finding where to make a payment. This information was buried deep within the website and was not easily accessible.
• Endless scrolling required:
Another issue the parent faced was the need to endlessly scroll to find the information she was looking for. This was particularly frustrating when trying to find important information quickly.
• Needs a better way to communicate with teachers:
Finally, the parent expressed a desire for a better way to communicate with her child's teachers through the website. The current system was clunky and didn't allow for easy back-and-forth communication.
These findings demonstrate that the school website is not meeting the needs of its users, particularly parents who are trying to navigate the site to complete important tasks. Based on these findings, we recommend implementing changes to improve the site's navigation, make key information more accessible, and provide better tools for communication between parents, teachers, and students.
"I only go here when I'm told"
-Student
-Student
Existing Site Audit: The good, the bad, and the ugly
The Source
Schoology
As part of our UX research, we conducted a thorough site audit of the existing site information architecture. The audit aimed to evaluate the current organization and labeling of the site's content, assess its usability, and identify areas for improvement.
We started the audit by mapping the site's navigation and categorization scheme. We analyzed the main menu, submenus, and footer links to understand how the content was grouped and labeled. Based on our analysis, we identified several issues with the information architecture that were impacting the site's usability and user experience. Some of the key findings include:
Issues
• Overlapping and confusing categories
We found that some of the content on the site was duplicated or placed in multiple categories, making it hard for users to see what they were looking for.
• Inconsistent labeling
We observed that the site used inconsistent labeling across different sections, which could confuse users and create cognitive load.
Opportunities
• Simplifying and streamlining the category structure
We proposed consolidating some categories and eliminating redundant ones to create a more intuitive and coherent organization.
• Establishing consistent labeling conventions
We recommended adopting a consistent approach to labeling products, services, and content across the site, using clear and concise language that users can easily understand.
Overall, our site audit of the information architecture provided valuable insights into the strengths and weaknesses of the existing site and helped us develop a roadmap for improving its usability and user experience.
• Synthesis
Personas
Based on the research we developed some personas to guide our design solutions. We aligned our design decisions with the needs and expectations of our target audience, resulting in a more user-centric solution.
Northstar
Our goal is to develop a seamless and accessible web portal for the Seattle Public School District, which simplifies the user interface and unifies the experience of accessing key educational resources such as grades, attendance, homework, handouts, assignments, expenses, and forms. By prioritizing accessibility needs, we seek to create an intuitive and inclusive platform that empowers all users to manage their academic journeys with ease.
Empathy Map and Jobs-to-be-done
After conducting research with parents navigating their child's school website, we created an empathy map to better understand their needs, desires, and pain points. This helped us to identify the Jobs-to-be-done that we would focus on in our redesign.
The following JTBD emerged from our empathy map:
• Access Grades and Attendance at a Glance
Parents want an easy way to quickly see their child's grades and attendance records without having to navigate through multiple pages. We aim to provide a dashboard that allows them to see this information at a glance.
• Easily Track Homework, Handouts, and Assignments
Another important need for parents and students is the ability to track homework, handouts, and assignments. We plan to make this information easily accessible and organized in a way that makes it simple for everyone to see what needs to be completed.
• Find and Pay Expenses That Are Due
Parents also expressed frustration with finding and paying expenses that were due. We will make this process more streamlined by integrating it into the dashboard and sending reminders to parents when payments are due.
• Incorporate Student, Parent, and Teacher Communication
Communication between students, parents, and teachers is crucial for academic success. We will make it easy for parents to communicate with their child's teachers and for teachers to send updates and messages to parents.
• Clean, Simple Interface to Reduce Cognitive Load
Finally, our research showed that parents want a clean, simple interface that reduces cognitive load. We designed a user-friendly interface that is easy to navigate and visually appealing.
User flows Statements
Having established our personas, Northstar statement, and Jobs-to-be-done, we are now ready to delve into the User Flow Statements of our design solution.
1. As a student, Rodrick only uses the site to check his homework and get assignments. He gets overwhelmed with all the other information and would like to minimize the information on the dashboard.
2. As the parent of Rodrick, Sasha wants to be able to complete a sports permission slip so that he can play basketball. She also wants to be able to find and pay his sports dues so that he can play in the upcoming season.
3. As a parent, Sasha wants to check her son's grades. She notices his grades are falling in a particular class and then she notices he has not completed the homework for that same class. She wants to learn more about the assignment so she can help him with his homework
4. Sasha is making an appointment for one of her sons and they have an appointment at 11 am on Wednesday, and 1 pm on Thursday. She needs to see what coursework and class he would be missing to choose the least impactful time for him to miss.
5. Sasha checks John’s grades and notices he’s falling behind in a class. She decides to check his attendance to find out if he’s missed any classes. She sees that he’s missed a few classes and wants to ask the teacher if there is anything he can do to bring his grade back up.
By aligning our User Flow Statements with our personas, Northstar statement, and Jobs-to-be-done, we can ensure that our design is tailored to meet the needs of our target user and that the experience is optimized for efficiency, clarity, and ease of use.
• Ideation
Our sitemap: Building the skeleton
Our team brainstormed the information architecture
We created a sitemap, which outlines the structure of the new website and how the information will be organized. The sitemap included the main pages of the website, such as the dashboard, homework tracker, and communication tools, as well as sub-pages and links between pages.
Our team worked collaboratively to create an information architecture. By focusing on Jobs-to-be-done and organizing the information in a clear and intuitive way, we aimed to create a site that would be easy for the user to navigate
Wireframing
Once our team had finalized the information architecture for the site redesign, we moved on to building wireframes. Wireframes are visual representations of the layout and functionality of a website, and they allow us to test and refine the design before moving on to the visual design phase.
These low-fidelity wireframes allowed us to focus on the layout and functionality of the site without getting distracted by colors, fonts, and other visual elements.
No need to reinvent the wheel
We explored existing apps that we felt had already solved some of the issues so we borrowed those solutions to include them into our designs. This can also help the user because these are existing UI patterns that they may already be familiar with using
We decided to build a series of responsive cards that would easily adapt from desktop to mobile.
We also considered how the site would be navigated, and decided to include a persistent navigation bar on the left side of the page that would allow users to easily access key areas of the site. We also ensured that the site would be easily searchable, with a prominent search bar at the top of every page.
Design System
Before we could create the high-fidelity prototype, we needed to build a design system that would provide us with a toolkit to work with. We chose to use Atomic Design principles in Figma to build our design system.
We began with Brad Frost’s system of atoms, molecules, and organisms by creating our atoms, which included basic UI elements such as buttons, icons, and form inputs. These atoms were then combined to create molecules, such as form fields and responsive cards. Finally, we combined these molecules to create organisms, such as navigation bars and page layouts. This helped us speed up the building process and to ensure uniformity.
Atoms
The atoms of our design system (Click to image enlarge)
Molecules
The molecules of our design system (Click image to enlarge)
By using the same design elements across the site, we were able to create a sense of visual harmony that would help users navigate the site more easily.
• Prototype
High Fidelity Prototype
Throughout the process, we kept the key pillars of the site in mind and made sure that our revisions would support those pillars.
• Accessing grades and attendance at a glance
• Easily track homework, handouts, and assignments
• Finding and paying expenses
• Incorporating Student, parent, and teacher communication
• Providing a clean and simple interface to reduce cognitive load
Outcomes and Lessons Learned
By focusing on the key features uncovered during our user research, we were able to create a simple, streamlined, and easy-to-use site that aims to solve the most glaring issues with the existing web portal.
I learned many lessons throughout the process like the importance of qualitative research at the beginning of the design process, Clearly defining project timelines, and the value of managing team member's schedules and expectations at the onset of the project.
