Seneca Harper | UX/UI + Visual Designer

Overview

Branch is a User Experience project centered around the re-design of Seattle Public Schools’ online portals.

Timeframe

11 Weeks

Sept 28 – Dec 7th, 2021

Client

(School project)

Roles

UX Research, UX Design, Prototyping, User Testing.

Tools

Adobe Illustrator, Figma, Notion, Zoom.

Collaborators

Gabi Garcia Greco, Carly Cregg.

———

Problem

The online portal for Seattle Public Schools is notoriously difficult to use.

This platform is a place where parents, teachers, and students are meant to easily track academic progress.

There are five main tasks that are typically completed online: accessing grades and attendance records, tracking homework, paying for expenses and fees, signing permission for field trips, and checking school bus routes and arrival times.

Unfortunately, these features currently exist in five separate locations. While the convenience of accessing these things online could be extremely helpful to busy families, the confusion of using five separate systems possibly outweighs the benefits.

Solution

The goal is to create a streamlined, accessible, and delightful interface that makes parents’ lives easier as it relates to managing their children’s education process.

Our team aimed to unify these five tasks into one single portal that is easy and convenient for families to use.

Research & Demographics

We began our process by conducting an audit of the current Seattle Public Schools portals.

We took note of things that felt awkward to us, and functions that we thought were necessary.
(Screenshots of Seattle Public Schools portals here)

Audit of the current Seattle Public Schools portals.

Next, we interviewed parents of students in public school systems.

Cumulatively, we interviewed five parents. Three parents had children currently in the Seattle Public School system. One of the parents that I interviewed had moved to Alaska public schools and was able to share her experience in both states. The other parent that I interviewed had experience in Montana public schools.

We asked the parents:

- Why do you use the school portal?
- What has been your overall experience with the school portal?
- What do you find helpful about the school portal?
- If you could change one thing about the portal, what would it be?
- Can you give an example of a student, vocational, or bank portal that you find easy to use?

Some of our key findings were:

- The portals are often confusing to use, and not all parents are tech-savvy.
- Multiple logins for multiple children is a hassle.
- Separate portals for the different tasks requires multiple logins and creates frustration.
- An online portal is a great idea for a busy parent, if the online portal worked properly it could be of great value.

Next, we compiled the needs of our interviewees into two user profiles.

Parent needs:

"As a parent who isn’t great with technology, I want a streamlined experience so that I can spend more time looking at my child’s grades and less time trying to find them."

"As a parent of multiple children, I want an easy way to switch back and forth between accounts so that I don’t get confused by multiple logins."

"As a person whose second language is English, I want an easy way to switch to my first language so that I can understand the information more easily."

"As a working parent, I want accurate bus time information so that I know when my kids are going to arrive at school."

"As the parent of a younger child, I want online field trips and medical forms so that I see them before the day that they are due."

"As a parent, I want to be able to check absences and attendance so that I know immediately if my teenager skips class."

Process & Work

We used the pain points and needs of our parents to inspire our Key Value Proposition:

“Our vision for this new platform is to deliver a streamlined, accessible, and delightful interface that makes parents’ lives easier as it relates to managing their children’s education process.”

Based on the needs of our users, we identified the "jobs-to-be-done" and created a list of features that our portal needed to include:

• Grades & attendance
• Assignments
• Payment
• School bus schedule
• School calendar
• Covid protocol
• Supply & field trip payment
• Language translation
• Profile modularity (Netflix style logins)

To help guide the structure of our information architecture, we used an affinity diagram to sort tasks by natural relationships.

Affinity diagram.

According to what we learned from our interviews, we carefully laid out how our app should work.

Information architecture.

I made a series of Lo-Fi wireframe sketches that would later be brought into Figma and refined further into Hi-Fi by the rest of the team.

Annotated wireframe of the desktop version of Branch.

Wireframe annotation.

Using the principles of “Atomic Design”, Carly began the design system in Figma.

I worked on adapting our system and marrying it with parts of a UI kit from the Figma community; to serve as our mobile-sized options.

I used Figma’s “Autoanimate” function and some sleight of hand to make a search bar with a flashing cursor that appeared to be interactive.

We were careful to check color contrast, text size, line height, touch target size, as well as iconography suggestions according to the current Web Content Accessibility Guidelines.

Color blindness audit.

Color contrast audit.

While Gabi translated the first flow in order for the user to be able to change languages, I wired the second user flow.

The prototype was ready to test! We conducted two usability tests on the first version of the portal. In the initial round of testing we learned:

• Users weren’t utilizing the search bar in the calendar.
• Users became a bit confused in areas where the prototype wasn’t fully wired.
• The language translation system needed to be clarified. Users felt that this should be accessed through settings.
• Users were a bit unclear on how the grade cards should be read.

I rebuilt all of our calendar screens so that the search bar was more apparent and the hierarchy of information was more clear.

Carly rebuilt the grade screen so that a tab system was used rather than the less clear dual table system that we had originally implemented.
(Calendar screen here)

Branch calendar screens after my rebuild.

The mobile version of Branch.

We conducted a second round of user testing on two more people.

This time, users breezed through all three flows. They navigated the platform smoothly and were delighted by how quickly they were able to do so.

Video walk-through of three user flows in Branch.

Takeaways

Working with two other people was integral to the success of this project.

Having more brains working through the design process ensured that our users' needs were considered at all times. Though we were working specifically on the Seattle Public School portal, hearing from parents who have experienced other school portals was invaluable.

If we were to do this project again, we would make more time for additional rounds of user testing. This would allow us to further streamline the interface. We might also approach our use of color in the UI differently, keeping it simple and harmonious.

We were confident that we could unify the original five tasks into one single portal that is easy and convenient for families to use, and we did just that!

If developed into a full application, “Branch” would be a streamlined, accessible, and delightful interface that makes parents’ lives easier as it relates to managing their children’s education process.

← ASESO

VAIN Salon →