ThreeMobileScreens2 (1)

As part of a User Experience course through General Assembly I designed a mobile app that helps parents in Los Angeles find schools for their children.  Below I discuss the design process, and some of the insights I gained along the way.

To view a prototype of this app in InVision, click here.

 

Dot1

The Problem

“Parents are finding themselves in the uncomfortable position of knowing very little about education while making critical judgments about their children’s schooling.”

Peg Tyre, The Good School

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.

 

Dot2

Discovery

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.

ThreeQuotesBlue

 

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:

 

AmyCircle-2Amy

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.” 

3columns2

 

Dot3

Early Stages

From the start, it was clear that the app 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 against it 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 in the app:

MindMapWebsite-2

 

 

Dot4

Wireframes

The mind map allowed for a certain flexibility in thinking about possible features before any actual implementation. From those possibilities I created a more precise site map and began sketching versions of key screens, eventually refining the sketches into wireframes:

DrawnWireframesWebsite

The wireframes below show screens for filtering results by various criteria:

WebsiteWireframes3 (1)

 

Dot5

Visual Exploration

UPDOWNRLScreens4
I made a number of decisions about the visual elements of the app 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 search by 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.

 

LastThreeScreens-3

 

Results can be sorted and filtered (the screen on the left shows criteria for filtering).  The total number of schools listed at the top of the screen changes dynamically as results were filtered.  Tapping on a school (from either the map view or the 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 favorites list across various metrics (class size, rank, performance, etc).

To view a prototype of this app in InVision, click here.