Schoolio: A Creating a School Comparison Website
The Problem
The schools we choose for our children have lasting impact, which makes it an important-- and difficult-- decision. Parents and guardians need a way to navigate the school system, from sources they trust.
The Goal
Our mission is to create a responsive website that connects parents with resources and information they need to make the right education decisions for their kids.
My Role
Research, wireframes, mockups, high-fidelity prototype (Adobe XD)
Duration: August 2022-September 2022
This is a learning project for Google's UI UX Design Course
Executive Summary:
Findings show that users value other parents and staff--social proof-- for insight into school culture is the most important factor in choosing a school is location.
I created a site that emphasizes community opinion, and has a robust map search feature.
See the prototype here.
Elementary:
Research Findings
-
The Stakeholders
-
Research
-
Personas
-
User Journeys
Research: Findings
Schoolio is a database at it's core, with a given individual school as it's main "bucket" of data. And education generates a lot of data: not only test scores and demographics, but philosophies of teaching, reviews, funding, after school programs, safety, neighborhood statistics, and more. A word that kept coming up from parents was "overwhelmed", understandably.
Close, Safe, and Reputable
I hoped to find the most powerful factors that parents consider to make their decisions. I started with online research to get a read on the kinds of categories of information parents valued the most.
This poll from EdChoice.org,
'Schooling in America: Polling Dashboard" found that location, safety, and academic reputation are most valued, and surprisingly test scores and diversity rank fairly low.
Parent Survey
The next step was reaching out to parents with a survey. I polled folks on the same data sets the EdChoice white paper used (see above) just to confirm their findings, and also asked some open-ended questions about what frustrated them about entering the school system.
Location and Diversity
An interesting discrepency: location remained to be the most important factor, but diversity proved to be equally important to the participants in my survey. I cannot account for this, but it's simple enough to include diversity data in the finished product.
The Inside Scoop
This question proved to be the most revealing in my investigation-- it highlights how parents value input from people "on the inside"-- other parents, staff, and online parenting groups.
Parent Voices:
Common themes that came up for parents when asked about frustrations in selecting a school:
-
navigating the system
-
learning about the administration
-
learning about support systems in place
Personas
Aggregate affinity diagrams
Aggregate affinity diagrams
Users are looking for three types of information:
-
Specific schools
-
Neighborhood and district information
-
Inside information: reviews
Based on the finding that parents trust information from real people, rather than hard data provided by the school district, I wanted to include a user persona of a that represented a valued asset to Schoolio: the commenter.
New Mom Mavis
Age: 31
Education: College
Occupation: mom, writer
Family: Husband, son
It’s time to make a decision on a school, but there are so many things to consider.
I'm an overthinker, but I'm making important decisions"
Goals
-
wants a way to compare all the options of local schools
Frustrations
-
Overwhelmed by everything involved in the enrollment process
-
concerned about safety
Mavis is an involved mother of a 4 year old who is really concerned about making the right decision for her son’ school. She finds herself worrying about how to weigh all the different factors that go into school choice! After all, elementary school will last 6 years, and they might want to move to a good area soon.
Papa Bear Bert
Age: 35
Education: BFA
Occupation: animator
Family: two daughters
Bert needs to enroll his kids in a new school. He’s determined to find the right one, but he needs specific information, since one of his daughters has special needs.
"I'm not afraid of moving on if it's not working"
Goals
-
Wants to be sure his kids have a good experience in school
-
Needs details on programs before he moves them
Frustrations
-
Administrators left him feeling skeptical about the previous school they attended
Bert won’t settle for less. He wants a good, nurturing school nearby so he can take his kids to school before work. He moved them from their assigned public school because he wasn’t happy with the way it was going for them there, but he’s optimistic about finding a better environment for them.
Teacher Talk Trish
Age: 27
Education: MA
Occupation: teacher
Family: lives alone
Trish wants to comment publicly but anonymously, and can’t find a platform for that.
"To be helpful, you have to be honest"
Goals
-
Wants to leave honest feedback about the school she works at
-
Wants to help families make informed decisions
Frustrations
-
Needs a way to tell the truth without risking repercussions
Trish is a well-loved teacher who advocates for her students. Many parents ask her what she thinks of the school, but she doesn’t feel comfortable being totally honest publicly. She has many good things to say, but also thinks some changes could be made.
User Journeys
In summary:
Users trust other parents, staff, and other real-world sources for information on schools.
Aside from location information, users want to know how safe a school is, and how the school culture reflects their values and needs. The reputation of staff, students, and academics show again how community voices are the strongest influences.
Middle School:
Starting the Design
-
Ideation
-
Wireframing
-
Lo-fidelity prototype
-
Usability Study
Ideation
Given the research findings, I started with some "How Might We?" questions, and began creating a site map.
Sitemap
I'm not going to lie, this sitemap had me going in circles! The school page, which is the main product of Schoolio, has a lot of data sets that could link elsewhere in the site. Then I decided to add another data set of neighborhood info, along with a robust review section.
A Note on Ethics
Sites like Schoolio often have strong advertising partnerships with real estate agencies, which is not a problem in itself. However, overrating schools in more affluent neighborhoods drives home prices up significantly*, and devalues schools and districts that have a higher need population.
Addressing this is certainly beyond the scope of this student project, but it bears mentioning. In the 2017, a leader in the school comparison field needed to revamp their ratings system due to this bias.
Wireframing
A few examples of paper wireframes. I recently took a class on infographic design, and learned a lot about clearly presenting complex data with strong color choices and visual hierarchy.
School data page
Search results page
Comment page
Mobile home page
Key Features
Starting up the wireframes, I wanted to include these important elements:
Home Page
Location information, presented by district (named neighborhoods), to address the users' top priority.
A new parent explainer, in order to give parents an overview on the processes of applying, lottery systems, etc.
Results Page
A search results page with lots of avenues to pursue:
-
CTA: write a review
-
map showing schools of search queried area
-
reviews- not just of schools, but programs, teachers, and neighborhoods
-
school cards with community ratings
School Site Page
The main event: the school site page:
-
safety information
-
visual data
-
did someone say reviews?
Wireframes
Above is the "wired" lo-fidelity site, below is the mobile version.
Click to expand
Click to expand
Lo-fidelity prototype
This first mockup, created in Adobe XD, shows the basic user flow. Watch the video below, or test it out here.
Usability Study: Findings
I conducted a user test study on the first prototype with seven people, to get a read on what needed to be enhanced.
Questions and tasks:
1) from the homepage, conduct a search.
91% successful click-through
2) Find out more information on one of the schools.
90% successful click-through
3) Is there anything you don't see that would be helpful?
Maps, pictures, videos (4/7 participants requested)
4) From this page, find where you would write a review.
90% successful click-through
5) Would you feel comfortable writing a review?
100% yes (they liked the anonymous feature)
6) Find information on how you would apply to schools.
100% successful click-through
7) What did you think of the search results page?
56% loved it
22% liked it
11% it was ok
11% it was too complicated
Standout quotes:
"I'm a sucker for maps. Maybe add one here with information about the area?"
school page
"Is there information about the neighborhood and surrounding area? I like to know about resources for students and what they'll see going to and from school each day."
general comment
search results page
"Good flow but a lot of information for one screen."
"I think it's pretty comprehensive. I would also add more photos/videos with the school."
school page
Insights:
Based on the theme that 4 out of 7 people found the search results page somewhat difficult to read, we should organize it better.
MAKE RESULTS LESS CLUTTERED
Based on the theme that 3 people requested more visual information, pages should have a portion for photos, maps, and attractive graphics.
MAKE IT APPEALING
Based on the theme that 3 people mentioned a need for more info on neighborhoods,
MAKE THE NEIGHBORHOOD CARDS VISIBLE, and PAGE ROBUST.
Thinking...thinking....
High School:
Refining the Designs
-
Shaping the details
-
High-Fidelity prototype
Shaping the Details
Before I started changing elements of the site design, I wanted to start out with a general look and feel. The vivid RGB colors of 70s and 80s color televisions inspired me. Is it too rainbow bright? Probably. I definitely had to tone it down as I iterated on the design, but I wanted to take some risks, especially since the site is so data-heavy.
Mood and Asset Generation
Major Screens
The Home Page:
I chose a layer cake method to creating the home page, which I wanted to be cheerful, reassuring, and informative.
The main features and CTAs are prominently featured- namely the search feature, followed by the neighborhood cards, how to apply, the review page, and a parenting section to help drive traffic to the site.
The Search Results Page:
After the user feedback, I really needed to keep it simple. The search bar has a sort and filter function to simplify the results.
Prominently featured is the map, with interactive markers showing where each school is located.
Underneath the map are the neighborhood cards, which correspond to the area searched for in the query.
To the right is the list of school cards, with color coded ratings and basic information, along with check marks to show they are in the district for the search query address.
The School Page:
Yes, it's a beast. The top section features a video for the school.
There's a sticky menu on the left to create easy navigation between the sections.
Starting with the map and neighborhood, it's designed for the user to get their bearings first.
There's a robust section on safety per the research, including metrics on bullying and locked door policies.
Each section addresses user priorities, and the data visualization helps make the numbers easy to comprehend.
The reviews below are tagged and relevant to the school.
The neighborhood page features points of interest, crime statistics, and walkability scores.
The profile page keeps favorites schools, blog posts, and neighborhoods.
The High-Fidelity Prototype
Watch the site in action below, or try it out for yourself here. I'm particularly happy with the micro interactions, like the hover feature on the map. Tell me what you think!
Responsivity:
A mobile mockup here shows how the same information can be converted to be legible on a small screen.
Graduation
-
Takeaways
-
Next Steps
Takeaways
I appreciate the amount of thought that people put into choosing a school for their children. I learned that creating a fully fleshed out responsive website is more than just links, it's really considering how all the parts interact with one another. From graphics to ethics to data to search queries, they all need to work together to make a great website.
Impact:
Study participants liked the breadth and depth of information, the colorful maps and graphics, and the ability to read reviews, especially the ability to leave an anonymous review!
What I learned:
The design system I created and stuck to at the beginning of the hi-fi prototype helped immensely. I also learned that clear, interactive graphics are extremely important in engaging users.
Next Steps
-
Test out the review function, to really be sure we would get quality input.
-
Consider advertising partnerships, and how we could accommodate their needs.
-
Consider more deeply the quality and source of data users need.
