top of page

Chicago Public School System
School Locator Application Research Case Study

Role: UX Researcher & Designer

Major Themes Explored in this Case Study:

  • Competitive analysis

  • Heuristic evaluation

  • AI wireframing

  • Responsive web site design

  • Android Native App Design
     

students.png

Project background

Families using the CPS school locator need a simple, accessible, and mobile-friendly way to quickly find accurate information about schools, including location, programs, accessibility, and enrollment boundaries. Their goal is to make informed decisions about their child’s education with minimal frustration. For CPS, the business goal is to provide one reliable, data-driven platform that increases engagement, supports equitable access to information, reduces calls to support staff, and builds trust within the community by delivering a seamless, user-centered experience.

locators.png

Methodology

  • Review current user feedback and analysis to determine pain points for users of the Chicago Public School’s profile screens.

  • Gain an understanding of the CPS user demographics and create  personas and user journeys.

  • Conduct a competitive analysis of similar applications.

  • Conduct brainstorming sessions and redesign the application​

  • Conduct user testing and revise the designs based on this.

Role of Generative AI

  • Generate Interview & Survey Questions: Quickly create draft questions tailored to your project goals.

    • Example: “Create a set of user interview questions for parents searching for schools online.”

  • Summarize Research Findings: Turn lengthy notes or transcripts into concise, actionable insights.

  • Competitive Analysis: Quickly analyze competitor websites or apps and highlight UX strengths and weaknesses.

  • Create Personas: Draft initial personas based on user data, then refine them through actual research.

  • Secondary Research: Summarize industry trends, accessibility guidelines, or design best practices.

  • Create Test Scripts: Write step-by-step usability test guides for both moderated and unmoderated studies.

  • Draft Scenarios & Tasks: Generate realistic user scenarios for participants to follow.

  • Analyze Usability Feedback: Summarize findings from recordings or survey data into actionable reports.

  • We used Chat GPT, Figma Make, and UX Pilot for our research and design.

User Demographics

Chicago public schools did not have any formal personas.  I utilized the existing demographic information, user interviews, and Generative AI to create essential profiles of our users.

  • Young population with numerous single-family households.

  • Diverse ethnically including many households where English may not be the first language.

  • The majority hold a high school degree or less.

  • The data is accessed by parents wanting to find better schools for their children.

  • The data is also used by teachers, administrators, and others in the course of their work and research,

  • many of whom have some type of education beyond high school.

  • I created 2 personas based on demographic data provided and Chat GPT.

Screenshot 2025-05-05 162829.png

Key Performance Indicators (KPI's)

It was essential that I ground this research in testable KPI's in order to measure any improvements we would make.  I worked with the Product Manager and school administration to create these:

  • Search Success Rate: Percentage of users who successfully find a school by name, address, or filters.

  • Task Completion Time: How long it takes users to locate relevant schools.

  • Mobile Usability Score: Success and ease specifically measured on mobile devices.

  • Filter & Overlay Engagement: Frequency of use for filters (program, grade, etc.) and map overlays (boundaries, tiers).

  • User Satisfaction / Usability Ratings: Post-use ratings or Net Promoter Score (NPS).

  • Accessibility Effectiveness: Percentage of schools with an accessible rating visible; user success for mobility-impaired users.

  • Drop-off Rates: Points where users abandon the search or don’t move forward due to frustration.

Competitive Analysis

In order to understand the existing landscape for similar applications  and their strengths and weaknesses, we conducted a competitive analysis.  This gained us important insights into what worked for other schools:

Key Comparison Dimensions

  1. Search Functionality

  2. Filter & Sorting Options

  3. Map + List Integration

  4. Mobile Responsiveness

  5. Accessibility Support

  6. Clarity of School Information

  7. Performance and Speed

​

Common Strengths Across the Best Tools

  • Split-screen design allowing map and list views at the same time.

  • Predictive search with auto-suggestions to reduce typing errors.

  • Location-based smart defaults (e.g., showing schools near the user’s home).

  • Clear, progressive disclosure of information (basic info first, deeper data later).

  • Filters that match parent priorities like program type, accessibility, or performance level.

​

Common Weaknesses Across the Tools

  • Mobile usability issues:

    • Map features not optimized for small screens.

    • Forced screen rotation or awkward scrolling.

  • Slow loading times, especially for maps and PDF-based reports.

  • Lack of accessibility focus:

    • Limited info for parents with mobility-impaired children.

    • Missing screen reader optimization.

  • Information overload:

    • Too many metrics displayed without hierarchy, leading to decision fatigue.

  • No onboarding or help features, leaving new users confused about filters and terminology.

​

Understanding the user journey of a parent

With the assistance of generative AI, the testing, and survey information gathered from school parent meetings, we created a user journey to help us brainstorm future solutions:

Screenshot 2025-09-11 110021.png

Identifying User Friction 

We conducted user testing of the existing CPS school finder applications utilizing seven Chicago parents using UserTesting.com. We created a script and decided on an unmoderated approach using the existing applications.  I then conducted a careful analysis of the outcomes recording the data in an Excel spreadsheet.  

Key Testing Outcomes​

​

  • Parents valued seeing all schools in one place and liked the map + list view when it worked smoothly.

  • Many were unsure how to start on the homepage; initial purpose was unclear.

  • Search results and map/list integration were confusing at times.

  • Filters were difficult to find and not always intuitive.

  • No side-by-side school comparison—parents struggled to evaluate options.

  • No way to save or favorite schools, making it hard to track choices.

  • Application steps were unclear; parents lacked confidence about what to do next.

“I found a couple schools I liked, but I don’t see any way to save them. Am I supposed to just write them down somewhere? That feels frustrating.”

CPS test participant
​

Recommendations

Here is a summary of some of the general recommendations that resulted from a Heuristic analysis of the existing sites and my analysis:

Clarify the Homepage Purpose

  • Add a short onboarding message or guided walkthrough to explain what parents can do.

  • Provide a clear “Start your search” call-to-action above the fold.
     

Enhance Search & Map Integration

  • Implement smarter address auto-complete with Google Maps–style suggestions.

  • Synchronize list and map views so selections highlight consistently in both.

  • Improve clustering and zoom controls to reduce map clutter.
     

Redesign Filters for Usability

  • Group filters into clear categories (e.g., Grade Levels, Programs, Services).

  • Use plain-language labels and progressive disclosure for advanced filters.

  • Show active filters at the top so users can easily add/remove criteria.

  • Remove unused filters to cut down on the number of choices.
     

Enable Side-by-Side Comparison

  • Provide a comparison table with key factors (academics, safety, extracurriculars, distance).

  • Highlight differences visually to support decision-making.
     

Introduce Save / Favorite Functionality

  • Allow parents to mark schools as favorites and view them in a “Saved Schools” list.

  • Provide the option to export or share lists (PDF, email, print).
     

 Streamline Next Steps / Application Flow

  • Add clear, consistent calls-to-action (“Apply Now” or “Learn How to Apply”) on every school page.

  • Offer contextual guidance about deadlines and eligibility.

  • Provide a simplified timeline view of the application process.
     

Improve Mobile Experience

  • Ensure filters, maps, and comparison features are optimized for small screens.

  • Use sticky buttons for actions like “Save” and “Apply” so they’re always accessible.

  • Use full-screen map with an overlaying list card on mobile.

  • Implement toggle or swipe to switch views.
     

 Boost Trust and Transparency

  • Show data sources and update dates for academic and safety metrics.

  • Add tooltips and plain-language explanations for jargon-heavy metrics.
     

 Modernize Visual Design

  • Adopt a cleaner layout with more whitespace and hierarchy.

  • Use consistent iconography and typography aligned with CPS branding.

  • Ensure full accessibility (color contrast, screen reader support, keyboard navigation).

Design

User Research & Insights

  • Conducted parent interviews and analytics review showing that most users access CPS tools on mobile and read at a 6th-grade level.

  • Identified top parent goals: find a better school, compare safety and performance, and trust official CPS data.

  • Observed confusion in the original tool (e.g., unclear filters, map overload, technical jargon).

​

Accessibility & Readability

  • Rewrote interface copy using plain-language standards (≤6th-grade Flesch-Kincaid level).

  • Increased tap targets, contrast ratios, and font sizes for mobile accessibility (WCAG 2.1 AA compliance).

  • Simplified icons and visual cues (e.g., school caps, badges, map pins) to speed comprehension and reduce cognitive load.

​

Design System & Visual Choices

  • Applied the CPS brand palette (deep indigo, white, and accent blues) to convey trust, stability, and academic excellence.

  • Used accessible color contrast ensuring all critical text and icons pass AA/AAA readability tests.

  • Selected a modern sans-serif font (e.g., Inter or Roboto) for clarity and readability on mobile screens.

  • Defined consistent component tokens for buttons, cards, and map overlays to unify the experience across devices.

  • Used subtle shadows and rounded corners to create depth and touch-friendly affordances.

​

Mobile-First Design

  • Designed initially for mobile behaviors since over 70% of CPS parents browse on phones.

  • Reduced navigation to a single search bar and three key quick filters (Performance, Safety, Attendance).

  • Implemented collapsible school cards and interactive map markers for easy exploration and comparison.

​

Responsive Layout

  • Built a flexible, grid-based layout system for seamless adaptation from mobile to desktop.

  • Ensured synchronized map and list interactions—selecting a school on the map highlights it in the list view.

  • Maintained a consistent header/footer hierarchy across devices for orientation and brand consistency.

​

Data Visualization & Trust

  • Replaced dense paragraphs with numeric indicators and clear rating scales (e.g., 95% Attendance, 8.5/10 Safety).

  • Added school addresses, Street View, and Directions options for real-world decision support.

  • Reinforced credibility through direct data sourcing from official CPS APIs and recognizable CPS branding.

​

​

The Wire Frames

Using UX Pilot accelerated the wireframing process by automating layout suggestions and component organization, allowing the team to focus more on user flow and usability rather than repetitive setup. The tool’s AI-driven templates helped quickly visualize ideas, test variations, and maintain consistency across screens—making early design exploration faster, more collaborative, and more aligned with user needs. Here is a portion of the prompt we used: 

As a ux designer, I want to create a series of wireframes for a school finder mobile website for Chicago public schools. The nape will be CPS school Finder.  It needs to be user friendly for parents trying to find a new school for their kids.  User would access the site and be presented with a map view of their zip code.  There should be markers that a user can tap on to get more information.  A user can toggle between a map view and  a list view consisting of cards for each school.  The cards will have  information such as school name, address, number of students, safety, grades served, and attendance.  There would also be a link to more information.  Another feature would be a filter to help find the right school.  This filter would have items like grade performance, attendance, safety, truancy, test scores and more.  It should be easy to use on mobile. It should have floating buttons for toggling between map and list views.  It should use cards for the list view.  Filters should be easy to locate and use. . . 

wireframe.png

The Responsive site

The redesigned CPS School Finder makes it easier for parents to discover and compare schools with confidence. Inspired by real parent feedback, the experience was built mobile-first to meet families where they are—on their phones. The responsive design adapts seamlessly across devices, combining a clear search bar, intuitive filters, and an interactive map. Every detail—from high-contrast colors to plain-language labels—was crafted to build trust, improve usability, and make school selection feel simple and empowering.

Color Scheme 01

Group 14.png

Color Scheme 02

colordif.png

The Native Android Application

To reach more CPS families and improve accessibility beyond the web, we designed a dedicated Android native app focused on speed, simplicity, and offline reliability. Many parents rely exclusively on mobile devices, and Android is the most common platform among CPS users. The native app leverages built-in location services and secure local storage to deliver faster search results, personalized school recommendations, and saved favorites without requiring constant internet access. Designed with familiar Android patterns—floating action buttons, system navigation, and material design components—the app feels intuitive, trustworthy, and consistent with the mobile habits of CPS families.

The Log in Screen 

login.png

A selection of Android screens

App.png

Empowering Choice — A Seamless School-Finder Experience

This project brought together mobile-first thinking, inclusive design, and trusted data presentation to create a user experience that places families at the center. By combining plain-language copy, accessible interaction patterns, and responsive layouts with clear visual cues and native app functionality, we helped ensure that every parent—regardless of device or reading level—can confidently explore, compare, and choose schools. The result is a design solution built for real-world needs, making school-selection not just possible, but empowering.

bottom of page