Better School Choice
A Mobile Website Design
Role: UX Researcher, UX/UI Designer
Duration: 1 month
Project Brief
Every child has their own unique strengths and weaknesses, and the idea that one school fits all is not enough for many families. Better School Choice is a product that provides guardians with all the resources they need to find and research schools PreK-12 that best serve their kids’ needs. I was tasked with designing a solution for critical pain points identified through user research. User research was provided by the Flatiron curriculum in the form of user interview transcripts.
The Result?
A high fidelity mockup that provides an accessible solution to our user’s most frustrating challenges.
Landing page with easy access search feature
Marketing pages to learn about courses and explore free learning materials
A simple, short step-by-step registration process
A fluid continuation from registration to onboarding for student class access
Design Process
Empathize & Define
Understanding the users and recognizing problems
Research
I dug into user interviews, turning conversation into insights with affinity diagramming and empathy mapping. I implemented the JTBD (Jobs to be Done) framework to form job stories that I could model my user flows on.
Fig. 1: Infographic summarizing interview responses
Figure 1 depicts how many interviewees mentioned each search criteria, summarized from my affinity diagram. This helped me understand what features were most important when selecting schools.
Target Users
Target users were defined as tech-savvy guardians, with children that they considered to be in need of better education, and guardians who were inclined to be more involved in their child’s education.
Pain Points
The biggest problem emphasized in all user interviews was the struggle in searching for a school that met the family’s specific criteria. Location, price point, class size, specialty programs, and teaching philosophy were the top focus of families searching for schools. Most parents also found the process to be fragmented, forcing them to piece bits of information from multiple sources in order to vet schools.
How Might We…
Help guardians find the right school for their children in a way that is:
Simple
Inclusive
Comprehensive
Quick
Competitive Analysis
Since I had no personal user experience, I spent a lot of time using and researching the sites of direct and indirect competitors. I performed a SWOT analysis on each to find areas of opportunity that would give our product a competitive edge. It also gave me some design inspiration.
Ideate & Prototype
An iterative process of developing potential solutions
I drafted an exhaustive list of potential features, prioritizing them with the MoSCoW method. I started with some rough ideas on paper, sketching important features and diagramming user flows. I then reproduced my sketches in low fidelity on Figma, readying them for user testing.
Rapid Sketches
Lo-fidelity Wireframes
Task Scenario
User: You are looking for a school that meets your specific criteria. Find the least expensive private school that meets the criteria below and “favorite” a school.
< 5 miles away from your location
Grade level: K-6
Private
Max of $6k tuition
Student:teacher ratio: < 12:1
English primary
> 4.0 star rating
Criteria:
Test & Implement
Moderated usability test on low-fidelity prototype
Hypothesis
Users want a highly customizable search feature, with the ability to save schools from a search.
Results
Non-critical errors: During the usability test, users were confused by the layout of the search form field. Users also attempted to “heart” (favorite) a school directly from the results page, versus viewing the school’s page and saving as a favorite there. I made some changes to the design, based on these results.
Iterations
Improve architecture of form with single column layout and increased spacing
V. 1
V. 2
Increase image size to encourage exploration and discoverability
V. 1
V. 2
Style Guide
After results-based iterations were implemented, I developed a style tile to apply to the prototype. These design choices were inspired by my previous competitive research and were crafted to represent a sense of optimism and calm for a sometimes stressful and frustrating process.
The End Product
Impact & Reflections
The goal of the Better School Choice project was to simplify the complex and overwhelming process families face when choosing a school for their kids. This study showcases the early stages of a product that provides users with a comprehensive, inclusive, free and accessible tool that allows families to explore and discover information about schools. With this, families can have confidence in their results with Better School Choice.
As a young designer, this project taught me the importance of working through specific exercises in methodical order to inspire ideas on a topic I’m not personally connected to. I was also able to exercise my agility and flexibility, by continually incorporating valuable user and instructor feedback to expand the reach and understandability of my work. In the future, I’d like to improve my version documentation and general organization of my process, to better showcase the journey.
Next Steps
Considering my limitations on time and resources, the Better School Choice platform has much potential to move forward in development. Some next steps might include:
Interview early users on experience and success using the product
Analytics mining
Next in line priority features to brainstorm: a comparison tool, a review page with Q&A section (the “social” aspect of the product), and a notes tool.
Develop responsive designs for multiple devices
