UI/UX DESIGN FOR KINDER APP
Kinder is a mobile app I designed that helps parents in Los Angeles find schools for their children.
View an InVision prototype of this app here.
If you live in Los Angeles, there are hundreds of public schools to choose from (magnets and charters included), and hundreds of additional private schools. Add in surrounding cities like Santa Monica, Glendale, and Burbank, each of which has its own public school system, and the sheer number of choices quickly poses a problem. Parents are left wondering what options are actually available to them, and how to make informed decisions among these options.
My hypothesis was straightforward enough: providing a single, convenient platform for parents to shop for and compare schools would empower parents and help them feel better educated about their options. In approaching this problem I conducted interviews and looked at existing research and resources. My objective was to gain a deeper understanding of how parents in Los Angeles shopped for schools, and what that experience was like.
I began by interviewing five mothers, three of whom had children in preschool approaching kindergarten, and two of whom had children that had recently started elementary school. The interviews were loosely structured, wide-ranging, and often sparked valuable digressions on LA neighborhoods, tuition rates, real estate, API scores, and apps they used.
While all of the mothers had spent time online researching schools in their area, none of them could point to existing resources that they felt were especially helpful. When comparing schools, the mothers I interviewed most often pointed to distance, performance, and price as the most important criteria. The fact that distance was an important factor made sense in a city where traffic often shapes behavior, and it was in line with other research on how parents shopped for schools, such as this 2015 study of parents in New Orleans. From these interviews I created the persona Amy, who would serve as my archetypical user, and whose story, needs, and pain points would inform the decisions I made later in the process:
Working Mother, Los Angeles
Married | 39 | One daughter, age 3.5 | no prior experience with schools in Los Angeles
Amy recently drove by an elementary school in her neighborhood and began thinking more about her daughter’s school options. She did some online research, but was frustrated because she couldn’t find the information she wanted. She also spoke to a coworker whose child attends a charter school.
“I don’t want to feel stressed out about my daughter’s education. I want to feel prepared.”
- Uses mobile apps for scheduling & fitness
- Family time in morning & evening, 45-minute commute to work
- Work/life balance with daughter means very little "down time"
- Difficulty finding reliable information
- Limited time to research options
- Wants an easy way to compare schools
- Not familiar with the system
- Wants to know all her options
- Wants to be able to compare schools easily
- Wants to feel confident that the information she finds is reliable and up-to-date
From the start, it was clear Kinder would be designed around search. Early on I toyed with the idea of scoped search (prompting the user to select criteria before performing a search), eventually deciding in favor of a simpler, more immediate search that could be pared down afterwards. Ideally, in addition to basic sorting and filtering options, the search would support auto-suggest, auto-correct (query reformulation), dynamic filtering, and saved filters (for the user that might search by similar criteria in multiple locations). I created the mind map below as a way of visually organizing features that might be included:
The mind map allowed for a certain flexibility in thinking about possible features before narrowing these down to key features that would deliver on the value proposition. My next step was to create a more precise site map and begin sketching versions of key screens, eventually refining the sketches into wireframes:
The wireframes below show screens for filtering results by various criteria:
I made a number of decisions about the visual elements of Kinder based on legibility, usability, and attractiveness. The first screen the user sees after the app is opened and loaded contains a search bar, the name and tagline, and an image. The search bar prompts the user to enter a home address, zip code, or school name.
The user sees results as either a map view or a list view, and can toggle between the two. Map tiles would be customized through an application like Mapbox using a darker palette to help color-coded pins stand out. In the list view a number of complete search results are shown with a teaser at the bottom showing a partial view of the next search result, inviting the user to scroll down further for more content. In both the list view and the map view the total number of results as well as the search terms are shown at the top.
Results can be sorted and filtered. The total number of schools listed at the top of the screen changes dynamically as results are filtered. Tapping on a school (from either the map view or list view) takes the user to a school profile page with more information. The user can then add the school to a favorites list and compare schools in the list across various metrics (class size, rank, performance, etc).
View an InVision prototype of this app here.