Margaret Babington
  • Home
  • UX Design
  • Media Production
  • Skills
  • About




NYC Dept. of Education

Responsive Web Design | Content Strategy | Information Architecture

SMPLCT Lab

Responsive Web Design | Content Strategy

Hive

New Feature Creation + Design

NYC OpenRecords Hackathon | FOIL Requests

User Flow | Content Strategy

Copyright © Margaret A Babington 2017

Department of Education

center

ROLE:

Research Lead + Project Manager

Collaborators:

Eddie Shrake + Jenny Lin

Timeline:

3 Weeks

Project:

NYC SchoolFinder Progressive Web Application

Summary

In spring of 2017, I had the opportunity to work with the NYC Department of Education Department of Student Enrollment. I led the research efforts for design recommendations for NYC School Finder 2.0. We presented our designs to senior policymakers at the DOE headquarters in May 2017.

The Opportunity

In New York City, students are given the rare opportunity to apply to up to twelve programs in any of the 5 boroughs. Though students can list up to a dozen programs on their application, research shows that in 2016, they listed on average 6 or 7 – making it less likely that they would receive a Round 1 offer.

We had the opportunity to take SchoolFinder to the next level, making it not only an online, interactive directory– but also a guide.

How might we increase the number of programs families list, increasing their chances of getting a round 1 offer?


The Discovery


The New York City Department of Education is the largest school district in the U.S. serving over 1.1 million students in nearly 2,000 schools. New York City has more than 400 high schools and over 700 programs. And students apply directly to programs, not schools. Using books, articles, and previous research from the DOE, we discovered the complexity of the debate about the city and country’s education system.

In 2004 under Mayor Michael Bloomberg, a universal high school choice process was implemented. Under this system, all incoming high school freshmen are required to rank up to 12 programs they would like to attend. There is no default school assignment, meaning everyone has to choose.

  • Students can list 12 programs on their application.
  • Listing fewer than 12 programs works against you by making it less likely that you will receive an offer from your application.
  • 97% of students who listed 12 programs on their application received an offer to a choice on their application.
  • Existing School Finder Usage (9/12/2016 - 12/1/2016)

  • Total Users: 53,891
  • New Users: 44%
  • Mobile Users: 32%
  • Session Duration: 00:07:55
  • NYC Mayoral Policy

    Mayor De Blasio’s Equity and Excellence initiative meant that our designs must give everyone what they need to be successful. We worked within the perameters of limited accessibility and data usage for low-income families. New York City is socio-economically diverse, with 76.5% of students qualifying in poverty.

    We clearly defined the difference between equity and equality. Equality meant giving each student equal opportunity, while equity means factoring in the positioning and resources of a student, lifting up the student who needs it most. We measured each design choice to align with the mayoral equity policy.

    “It’s a priority for us at the Department of Education to make the enrollment process easier for families”…“That’s really a part of Equity and Excellence [the mayor’s education agenda], ensuring that families have access to quality information in as easy a way as possible so they can make the best choices for their kids.”

    – Josh Wallack, Deputy Chancellor, NYC Department of Education

    Smartphone ownership is often most financially tenuous for the subset of users who depend on their mobile devices most heavily.

  • As of 2015, early two-thirds of American adults 64% own a smartphone, up from 58% in 2014
  • Smartphone owners with income of less than 30,000:

  • 44% have had to let their service lapse at some point or another
  • 43% max out on data usage frequently
  • 19% do not have broadband at home
  • 24% have few access options other than cell phone
  • 13% are smartphone-dependent

  • The Process


    DOE Provided Research


    The DOE provided audio and transcripts of 24 past interviews and usability tests which led to the current MVP. We learned about the frustrations understanding the admissions and selection process. And that this was a pain point for educators, students and their families.


    Contextual Inquiry

    What: Round 2 high school admissions fair

    Where: Martin Luther King campus on Upper West City of Manhattan

    Observed firsthand how difficult it is to navigate and track programs of interest

    Learned nothing can replace seeing a school in person or speaking directly with programs representatives


    User + Stakeholder Interviews

    3 DOE staff members | 4 Guidance Counselors | 3 Parents

    BACKGROUND
  • Can you tell us a bit about your background and how you came to be a guidance counselor?
  • ADMISSIONS PROCESS
  • When do you typically first meet with families and/or students?
  • When you first meet, what are the students/families initial understanding of the admissions process and their options?
  • How do you educate families and students about the admissions process? What would help you educate them on the the process?
  • How do you motivate students throughout the admissions process?
  • What are the main factors families and students consider when selecting a HS program?
  • 12 PROGRAMS
  • How do you explain the 12 programs application to students?
  • How do you motivate and encourage families and students to list 12 choices?
  • APPLICATION DIVERSITY
  • What do you do when a student comes to you about their chances of getting into a specific program?
  • How do you break down reach/ target/ likely school options to students?
  • DATES + DEADLINES
  • What are key dates / deadlines that students and families need to know?
  • How are students/families reminded about key dates?
  • SCHOOL FINDER 1.0.
  • Tell us about your experience with School Finder since it was released.
  • At what points in the process do you use School Finder? How has school finder been useful to you?
  • What can be added to School Finder that would make your job easier?

  • FINDINGS
    We found that the needs across the 5 boroughs vary greatly based on location, socioeconomic makeup, ethnicity, and other factors.


    User Map of Admissions Process

    From our findings, we created a simplified user map and found students and families have questions throughout the entire yearlong admissions process.

    Summary of Research Findings


    DOE NEEDS

    Want families to understand the process and list more programs on the application

    STUDENT AND FAMILY NEEDS

    Want their questions answered throughout the process and easily track programs of interest

    GUIDANCE COUNSELOR NEEDS

    Want to educate students and families about the process and promote application diversity


    Feature Prioritization

    We ideated on a large number of possible features, using the Moscow method below to identify an MVP.

    Design Studio

    My team ran a design studio, where we rapidly hand sketched our initial design ideas in a collaborative fashion, deciding on a final first iteration together.

    Usability Testing


    We followed the golden rule– test early and test often.

    Using a survey and our networks, we identified 9 target users who have or will go through the NYC high school admissions process.

    We did 4 iterations and 4 rounds of testing.

    Design Recommendations

    Final Wireframes Spec (pdf)

    Feature 1: Admissions Guide


    Findings that led to feature 1:

    DOE Provided Research: Families relied heavily on word-of-mouth

    Expert Interviews: Guidance Counselors meet with students and families to explain the process even holding after hours workshops. Variety of factors affect why families choose programs; each carrying equal weight and importance

    Contextual Inquiry: Tons of DOE staff, principals, GCs, and current students accessible to speak with



    Change: Creating pages from current static Front of Book

    Benefits: Access to key info/questions about process

    Technical Requirements: Search function tagging

    Accordion function: Expand/contract

    Feature 2: Global Navigation


    Findings that led to feature 2:

    DOE Provided Research & Expert Interviews: Families need guidance and have a range of tech familiarity

    Expert Interviews & User Map: Students and families have questions during various steps of the process, each step is of equal importance

    Expert Interviews & Usability Testing: Increase findability of different pages; Favorites not accessible from main page

    Contextual Inquiry: 100% of users did not use NYC DOE logo to go back to main page




    About feature 2

    Change: Fully new feature

    Benefits: Accessibility and findability of all pages

    Technical Requirements: Add text and icons Front-end code to link pages Minimize navigation on scroll (Javascript)

    Feature 3: Key Dates and Calendar


    Findings that led to feature 3:

    DOE Provided Research: “I didn’t know this deadline was coming” is common complaint

    DOE Provided Research & Expert Interviews: Dates on physical HS application and GCs have to constantly remind students of key dates and deadlines

    User Map: Students and families need to know key dates and deadlines throughout the entire process

    Contextual Inquiry: Signing in at a school fair/open house might affect chances of getting an offer. Ended the fair with a handful of flyers with dates on them.




    About feature 3

    Change: Adding dates from directory and application to the homepage

    Benefits: Visibility of reminders for key dates and deadlines

    Technical Requirements: Add prominent images of key dates to homepage Move Google calendar link from the footer; make button for increased clickability

    Feature 4: Favorites Page


    Findings that led to feature 4:

    DOE Provided Research & Expert Interviews: Importance of promoting application diversity; both realistic and supportive with students and families.

    Expert Interviews: Wanted the ability to save and share program lists with students and families more easily.

    User Map: Program discovery lasted for several months. Contextual Inquiry: Flyers and email signs-up from fair were hard to track.

    About feature 4

    Change: Add Reach/Target/Likely sections

    Ability to reorder favorites

    Add copy link and share buttons

    Benefits: Improve diversity of programs on application

    Reinforces the R/T/L idea (and defines the terms) that you SHOULD apply to a range of programs.

    Technical Requirements: Javascript for drag and drop function; front-end code to add buttons






    The Met Concept Design

    Recommendations for existing information architecture and user flow

    Chania
    Chania
    Flower
    Previous Next


    See Project Details

    Check Out the Prototype

    NYC OpenRecords Hackathon

    Making FOIL transparent, efficient and human.

    Chania
    Chania
    Flower
    Flower
    Flower
    Flower
    Flower
    Flower
    Flower
    Flower
    Flower
    Flower
    Flower
    Flower
    Previous Next

    I worked alongside a web developer and network engineer to produce design recommendations for the Freedom of Information Law. Over 8 hours, we rapidly worked through the entire UX process from user interviews to design studio, submitting our mid-fidelity wireframes and a final prototype.



    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...

    Hive

    New Feature Creation: Turning Form Request Emails into Actions

    Currently being implemented by development team; live link coming soon!

    Summary: I worked with their CTO from research and ideation through to design studio and low-fidelity wireframes, creating a form creation workflow.

    Role: UX Design Consultant

    About Company

    Hive is a fast-growing teamwork platform used by WeWork, PWC, Uber and thousands of companies around the world.

    Read more about Hive

    How might we make creating request forms and managing those requests clear and seamless for two new clients with similar but distinct needs?


    The Problem

    The clients both internally need to create request forms and then automate the workflow within the existing Hive platform.

    Competitive Analysis

    Google Forms, Zapier, Wrike, Typeform

    Features we looked at:

  • Form title
  • Save button
  • Field toolbar
  • Publish button
  • Copy link
  • Next + Back buttons
  • Directing request
  • Directing request: Project
  • Directing request: Assignee

  • Feature Prioritization

    We quickly listed out all the possible aspects of the feature and prioritized the aspects. The chart positioned items by low and high effort along the x axis, and nice to have and must have along the y axis. In the end, we were able to narrow down the features to the blue items, as the MVP for Forms 1.0.

    Design Studio

    Using a method called Design Studio, we sketched in five minute intervals, diverging and converging to build off the other's ideas.

    Mid-fidelity wireframes

    .