What is the problem?
The Seattle School Portal brings together several e-learning services that help students and parents manage tasks, grades and overall performance. Unfortunately, the current SPS portal is dated and hard to navigate and consists of multiple unique URLs.
What is the solution?
Redesign the portal to make a clear connection between services, and add a simple, user-friendly navigation. The single platform should be easily utilized by busy and overwhelmed teachers, students, and parents. The solution should unify the software into one unique URL and mobile app, guided by principles of accessibility and inclusive design.
Tools
Figma
Photoshop
Illustrator
Skills
UX Research
UX/UI Design
Team
Maya Suzumura
Tristan Pierce
Timeline
09.2021 - 12.2021
or 9 weeks
Users and audience
There are 3 main groups of users of this service: teachers, students (from kindergarten to 12th grade), and their parents.
Design thinking process
Emphasize
Interviews, Seattle School Portal audit
The Seattle School Portal serves the needs of users throughout the greater Seattle area. It is a multi-component platform that includes several different services such as The Source (grade checker), Schoology (assignment management), School Pay (payment system), Clever (useful learning apps), and bus notifications.For the research, we decided to use a qualitative approach in order to get a deeper understanding of the pain points of users, and the biggest problems with the current portal.
Five initial testing sessions and interviews with current portal users gave us the basic understanding of:
- How the whole system works
- Main users’ problems and concerns throughout their interaction with it
The Source
The Source is mainly used for checking grades, reviewing any missing assignments, paying for fees and reviewing checked out books.
Paint points:
- Side bar has too many options that take you to entirely different URL’s
- Side bar includes external URLs that users often don’t visit
- It’s hard to access information about given grades - have to click through 3 pages to get to information
- Overuse/misuse of icons creates confusion
Schoology
Schoology is an app that allows parents and students to manage their upcoming assignments.
Paint points:
- Assignments don’t show up in one clear place foreach teacher, and they can often be in different categories
- No clear way to return to previous pages
- Different use of listing types lead to confusion (list vs block)
School pay
School Pay is an external link found in TheSource and is used for paying any balances you may accumulate from field trips to books.
Paint points:
- Only payment method available is credit cards
- Interface looks completely different from The Source.
- The School Pay login feels disjointed from the rest of the other portals
- No confirmation of payment
- Previously bought items on the same list with items needed to buy
Clever
Mental model for clever is the apple app store. For teachers to allow access and curate apps for students to use.
Paint points:
- Layout is overwhelming, it’s hard to tell which teachers are using what apps
- Hard to find apps currently in use
That's annoying that I need to use several different services instead of using one system.
When I'm paying for fees I never receive confirmation so I'm not sure if the fee was actually paid.
Can’t find assignments in the same place.
Seattle School Portal audit
SPS has limited access and can be used only by approved users as teachers, students and their parents. During out interviews, we asked them to demonstrate how service works and created a Flow chart based on these information.
.jpg)
Summary
Service needs visual and usability cohesiveness and reduction of extra functions.
Main problems
- Interface is overwhelmed with unnecessary functions
- No clear understanding of how to navigate
- Services are using different web addresses, logins and passwords
- Accessibility and diversity aspects aren’t represented
Solutions
- Define the most popular functions for users and highlight them all details that are easy to break
- Make a cohesive simple navigation system and use the same interface for all services. Thus, the system user will be able to navigate all of them
- Put everything in one platform and unify access to all services
- Apply accessibility and diversity standards
Ideate
User flows
There are 3 main groups of users of this service:teachers, students (from kindergarten to 12th grade), and their parents.
Based on this data, we created 3 main personas:
User flows
By combing user pain points, main problems and previous research we created 3 main user flows:
Prototype
Wireframes
We decided to focus on a dashboard and a calendar view set as a default for our users. After defining this principle, we moved to a lo-fi wireframe stage.
Test
Usability testing
After making wireframes for flows and creating prototypes, we had a series of usability testing sessions with real portal users for each scenario. This gave us useful results because users had already used the previous portals.
Using this feedback, we refined our wireframes.
Main problems:
- Assignment: creating and adding information problems
- Review orders and billing are the same screens
- Unclear calendar purpose: is it for assignments or for class/school activities?
- Troubles with understanding icon’s meanings
I feel attendance wasn't very necessary for me as a teacher and I won’t consider using it that much.
It looks like the card I use more often is already selected. Why is he lower than the other? It's usually different.
Why do I have due today and due in purple color? It will be better to have a deadline time instead.
Final flows
Parent flow
As a parent, you are looking to complete any payments owed to the school.
Cart. Payments
Cart includes payment, pay later, search and history tabs. The pay later option can be used by users who meet financial requirements.
Dashboard. Pay
Starting from the dashboard, parent can seethe calendar and his tasks according to the dates. User’s tasks are color-coded, which makes it easier to orient between them.
Teacher flow
As a teacher, you are looking to post a math assignment for your students to complete.
Dashboard. Create
Starting from the dashboard, parent can seethe calendar and his tasks according to the dates. User’s tasks are color-coded, which makes it easier to orient between them.
Assignment. Create
By clicking side bar menu, user can go to the assignment page where she can check due dates and also create a new assignment. After it’s done, it’ll auto-populate on the calendar.
Student flow
As a student, you are looking to mark your upcoming math homework as completed.
Dashboard. Check
On the home screen of the dashboard, user can see assignments color-coded by different classes. He can click on the unchecked assignment to see details.
Assignment. Check
User check assignment as completed and it auto-populates as checked on the calendar view.
Design system
The portal should look simple and clear, but also have bright accents to keep children’s attention. To follow these principles, we decided to use mainly light background colors with color coding accents.
Accessibility
Using multiple tools in Figma, we made sure our color choices, type sizes and typefaces were inclusive and accessible for everyone. We checked the colors to make sure they worked for color blindness. We also wanted to make sure we included options during the onboarding process to customize the platform to whatever language you need.
Reflections
Deliverables
Designed and prototyped screens illustrating the concept of redesign of a Seattle School Portal. A new design, that solved all main user problems.
- It is cohesive, with a simple design and navigation system.
- The most demanded functions are in focus with fast access to them.
- Satisfies accessibility and diversity standards.
Future exploration
Review its accessibility for different user groups. In the future iterations we want to:
- Develop assignments: make them more understandable and functional for users.
- Develop a color-coding system.
- Add more actions for users to add specific calendar events.
