AfterSchool 

An online platform which connects parents to after-school activity providers, and offers a seamless experience from exploring extensive

out-school after school programs to make informed decisions

Client-based Project

Expected to launch in April 2020

 

2019 Sept-Oct (6 weeks)

UX/UI Designer | 3 people (2 Designers &1 PM)

 

The Challenge

In America, 96% of fathers and 75% of mothers with school-age children work full time. However,

  • The school day ends 2 hours before the workday

  • In-school programs are often overenrolled or have strict eligibility guidelines

Finding suitable out-school after-school programs a logistical headache for working parents.

 

Solution

Discover Programs

Show real time search trends

Don’t care to travel?  Tap what’s near me only

Check out  the programs open now

Search & Save

Grasp the program by first glance

Narrow down the result by filters 

Like it? Mark it

Filter & Sort

Explore programs for specific age range?

Bad sense of time?  Filter programs around your schedule

Too far to travel?  Sort by distance

Map View

Switch between list view and map view

Swipe to explore what’s nearby only

Display routes for navigation

 

Process

RESEARCH
DEFINE
IDEATE
DESIGN
VALIDATE
Literature review
User Interviews
Competitive audit
Problem scope
Hierarchy of user needs
Product roadmap
Feature narrative
Design principles
Journey map UX flow
Information Architecture
Low & High-fidelity wireframes
Interactive prototypes
Stakeholder reviews
Field testing
Designer critiques
 

Research

Needfinding to frame the problem

We conducted both quantitative and qualitative research to get a thorough understanding of our target users. Due to the technical constraints, we narrowed the project scope to only focus on after-school programs run by externally funded non-profit or commercial organizations. 

         Literature Review

  • Survey data by The Afterschool Alliance

  • Report by Youth.gov

Quantitative Research

The quality of programs can have a great effect on children’s success

One analysis of 68 studies of after-school programs found that students enrolled in  high-quality  after-school programs have better attendance, higher scores on tests than their counterparts 

Kids (6-12)

  • Improve academic performance

  • Contribute to social and emotional wellbeing

Teens (12-18)

  • Quality aftercare is even more important

  • Focus on the cultivation of skills

Parents

  • No need to concern about safety

  • Missing less work 

How do parents search for after school programs?

We conducted 19 in-person interviews with parents and 4 in-person interviews with teachers to discover how they search for after school programs. 

19

+

4

In-person interviews with parents

In-person interviews teachers

We found out that google search is the top 1 choice. Other choices like visiting the community centers, asking friends or colleges, visiting the organization websites. They will also use google map to see where the school, how can they arrive there and use Yelp to see the reviews and ratings before making any decisions. And after all of this research, they will choose  4  after school programs they are interested in to conduct the second round research.

How do parents feel during the search?

Searching for an after-school program is time-consuming

Hard to save and organize the information gathered

How do parents decide whether or not enroll in the after-school program?

During the second round of research, they will text other parents to learn more about the after school programs. Then share all the gathered information with their spouse and discuss who is available for auditing the first class. At last, they will call to make an appointment and pay a visit to check whether the environment is safe and whether their kids are interested in this program.

Parents  are really looking at convenience factors like 

Location

Time schedule

Distance

Homework

Safety

User Journey Map

We created a user journey map using the findings from research for further analysis and synthesis. We identified users’ touchpoint and pain points at each step of the step of the search process, and discovered some opportunity gaps.

Define

 

Identity Models For Target User Groups

From the 19 interviews with parents, we found out that most working parents who have kids aging 6-18 can be categories into two identity models. One is explorers who search for after school programs aimlessly, another is seekers who already know what they want and search with cleat goals.

Refined Design Goal

Create an online platform that enables parents who have kids aging 6-18 to make informed decisions by

  • Searching for after-school programs of interest efficiently 

  • Encouraging exploration with the various recommendation

  • Scheduling with organizations conveniently

  • Sharing experiences and liking each others’ stories

Product Roadmap and Success Metrics

Meanwhile, we created a product roadmap with features presented in order of priority in terms of development, investment, and importance to user goals. We also added metrics to gauge the impact and effectiveness of such attributes on the app.

IDEATE

Low-fi Wireframes to Map Out Solutions

 Primary User Flow   Search for the program you are interested in and save it

 

Challenge 1

How might we satisfy seekers' and explorers' needs simultaneously on the first screen?

The first challenge we met in ideate session is how to offer useful and interesting information for both seekers and explores. In Version 1, we used a standard search bar that allows both text and voice input with a real-time trending search just below it. We also organized the content by several criteria in the waterfall style. In Version 2, we used a really call-to-action search bar and displaying the current location on the upper right corner as a high visible default filter. Also, we offered popular categories of different afterschool programs. Users really like it "If I can tap, I would not choose to type! " They also mentioned they would like to see more categories to have more guidance and a better understanding and of what kinds of programs I can find here.

Developers proposed some technology constraints that all the changes for the search box can only be made in the same components on each page. So instead of choosing which search box is better, we reframed our problem into which search flow is more user-friendly. Then we found out that, although Version 2 really calls to action, there is no need to call to action on each page, especially when you finished searching and only want to focus on the search results. This occupies to much screen space, and not economic enough for explorers (15 parents of the 19 interviewees are explorers ) or people with small screens.

From the research result, we find out that there are advantages and disadvantages in both Version 1 and Version 2. So we analyzed and synthesized the user needs behind, also take into the technology constraints and designed Version 3.

Users have different understandings toward the program “Categories”

One thing that caught our attention during the research is that users have different understandings toward the program “Categories”

Categories are the simplification of content which allows users to efficiently find the programs they are interested in.

To ensure the categories we provide are reasonable and understandable, we conducted an open card sorting with 7 users. The 22 types of activities are extracted from ActivityHero, and we asked the users to sort them into groups that make sense to them. In the meanwhile, we checked the types of after-school activities defined by authorized organizations including The Youth.gov, Afterschool Alliance, and The Wallace Foundation, and then consulted with 2 education professionals after analyzing the card sorting results. Eventually, we reached the categories as shown below.

8 Categories generated from research

Mid-fi User Journey

Challenge 2

How might we help users search effectively with filter and sort values?

 

In our first version. We list the 6 filter values as detailed as we can form the top to bottom based on priority. However, the feed back from users is this is too overwhelming and they would like to see all the filters within one page. They felt a little confused when select which filter values to apply for not intuitive enough.

We got three options to users input the age of their kids. In America, the most family has at least two kids, this will cause too much friction if we let users input during onboarding. It's also unnecessary to manage three kids age in my profile for no one would like to see the search results for three kids on the same page. So age should be designed as a filter to choose rang instead of specific numbers.

 Age Filter

 Category Filter

Before conducted card-sorting, we tried various classification but still cannot find a good one. For showing too 28 options can be overwhelming, and users said they feel cheated if they only see 4 options. Then we conducted literature research and get the finding that the sweet spot is probably 8 to 15 choices.

Distance Filter

We offered two options in our usability testing. One is to let users select a specific value,  the other is to choose  a range between close and far. However, during the research, we found out that users live in New York have a different perception of distance compared to users live in San Fransico. Also, instead of choosing the distance, they prefer to see the school is on a map, which would be more intuitive.

There is one American policy that education products cannot display the price on the cover. Users feel really confusing when they applied price filter with on price relevant feedback offered.. So we think instead of as a filter, using price as sort value might be a better choice.

Price Filter

The Main pages and interaction process

Visual System Guideline

DESIGN

 

Encourage Search

When conducting user tests with using our mid-fi prototypes, we discover many users don’t have specific search goal in mind, so they don’t know what keywords they should enter in the search box. In the meantime, overly specific searches could lead to few or no results found. Filtering through categories and giving the results a quick scroll tend to be more effective in the above cases. Therefore, we decided to use dynamic hot search keywords to guide search and display the categories on the home page for quick exploration.

Detect users' location automatically.

Also can be changed manually.

Real time search trends to offer dynamic

search entry

Popular categories for quick exploration

When users search for keywords, the texts entered will become a manually added filter, which will be shown in the filter tags on the next page

Filter & Sort

When conducting user tests with using our mid-fi prototypes, we discover many users don’t have specific search goal in mind, so they don’t know what keywords they should enter in the search box. In the meantime, overly specific searches could lead to few or no results found. Filtering through categories and giving the results a quick scroll tend to be more effective in the above cases. Therefore, we decided to use dynamic hot search keywords to guide search and display the categories on the home page for quick exploration.

Filter button  with high visibility to narrow down the results

Default type set to "All".  Users can select classes or camps if they have a specific type want to search

Slider bar to choose certain age range

Filter the courses match your schedule by date, week and time.

List View First, then Map View

According to the user testing results, using the language “list view/map view” is clear than using icons that symbolize the same meanings. Also, although distance is a big concern for many users, they care more about relevancy when first seeing the search results. Therefore, we decided to show the list view first, which allows users to view more results by sampling scrolling down; and if they want to have a more intuitive feel of how far they are from the program, they can switch to the map view.

Tap on the "location" icon to select the program users are interested in.

Easily switch between two view modes

Users can swipe left/right to look at more results fluently.

View more on desktop

Next Step

 
  • Refine the languages used in the program categories through multivariate testing

  • Add tutorials and tooltips in the onboarding process

  • Design a community feature for users to share ideas, stories, and experiences with topics related to after school programs

View Other Projects !

Cosmos

Orienta

© 2020  by  Scarlett  Wu - All rights reserved.