Chicago Public School System Usability Case Study
Research & Analysis
About the CPS Responsive Web Site
Chicago Public Schools launched a website that provides detailed profiles for all 634 schools in the district. It serves a wide audience—parents use it to explore and compare schools for their children, while educators and administrators rely on it for data-driven insights and reporting. I was brought on as a UX consultant to evaluate the site’s usability and identify opportunities to improve the user experience across key tasks like school selection, data interpretation, and navigation.
My Goals
-
Review and analyze all existing research.
-
Conduct a heuristic evaluation of the existing site.
-
Create personas and user journeys.
-
Evaluate the content.
-
Offer solutions to any usability issues.
-
Create wire frames and high fidelity designs.
-
Create a final research report.
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.
-
Review the provided feedback data from CPS meetings, Google Analytics, and website surveys
-
Review the screens in context of UX best practices.
-
Make recommendations based on the following themes:
-
Content
-
Wayfinding
-
Layout
-
Chart usability
-
UI design
-
User Demographics
-
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.
Design Challenges
-
Creating an environment that appeals to parents looking for quick information to promote their children's education and future. They want accurate information that can help them make decisions. However, they are not uncritical. Many want to know how data is collected and processed.
-
Accommodating the needs of those users who require a higher-level experience and are accustomed to the terms and acronyms associated with education as well as complex statistics can add content to the page that can distract or confuse low literacy users.
-
I had to work within the CPS design system, so radical redesign was not an option.
Identifying User Pain Points
My research included reviewing committee meeting minutes, surveys, Google analytics, and a heuristic site evaluation. We found the following areas of friction for users:
-
Content is written at too high a level for low literacy users. This is followed by the use of too much educational jargon, and unexplained terms and acronyms.
-
User were unable to easily locate information they needed.
-
School data needs to be presented in an easily understood manner.​
-
Charts and graphs need to be explained to users.
Workshop Session with Chicago parents and administrators
We set up several workshop session online with teachers and parents in order to discover what our users needed the most. During these sessions we divided into groups and conducted affinity mapping exercises and "How would you" sessions.
​
During this session we also:
-
Asked users to participate in a First-click test. We Showed them a screenshot and ask: “Where would you click first to learn about test scores?”
-
As a group we completed a 5-second impression test. We Flashed the page for 5 seconds and then asked: “What do you remember about it?”
Identifying User Friction with UserTesting.com for quick wins!
We followed this workshop with a quick usability test using UserTesting.com with five users. These results were then gathered into a PowerPoint presentation that was then delivered to development to get them started on fast actionable changes that could become quick wins for the team.​
Understanding the user journey of a parent
We created a user journey for our parent, Sarah, who wants to search for a better school for her child. We based this on demographic information, surveys, and interviews. This helped us in understanding her goals and empathize with her.
Content Evaluation
Problem:
Content proved to be the biggest pain point for many users. Some of the content was written at too high a reading level for some CPS users, who are low literacy readers. The text on the left below has a Flesch Kincaid score of 59.10 (10th-11th grade level) and is described as “Fairly difficult to read”.
Solution:
-
I suggested re-writing their content at a 6th grade level and reducing the amount of text as much as possible. The should adjust the writing to a 6th grade level for lower literacy readers.
-
Removing Jargon
-
Explaining acronyms
-
Using effective white space and headers
-
Bulleting text when possible.
-
We tested Figma prototypes in unmoderated test sessions with different text examples.
​
Provide clear directions/ resources on how to navigate the site.
I am very visual, so having something like arrows can be very helpful when navigating the website. Graphics that direct parents.
​
CPS survey participant
​
Way Finding
Problem:
-
Users had challenges finding the information they need.
-
Navigation was not clear or easy to understand within the context of user goals.
-
The terminology made little sense to Chicago parents.
-
Some users did not understand that what they needed was accessed through this menu.
Solution:
-
Redesign the menu insuring that headers were easily recognized.
-
Rename menu items to make more sense to parents.
-
​Indicate that this is the menu that they need to use to explore school data.
-
Create popup call-outs that teach the user where items are located.
-
Suggested a dynamic search using "plain English", so users could find the exact information they needed.
-
We presented various examples to our users to get there feedback during our workshops. We asked each participant to arrange the content in a manner that made sense to them. Then we asked them to decide on what menu labels made the most sense to them and how would they change them to improve usability.
Workshop Example:
Left Menu Changes:
Onboarding Example:
Dynamic Search Proposal:
Discoverability
Problem:
-
Users were frustrated when they could not immediately quickly find the information they needed.
-
They had already landed on the main CPS page, used a megamenu to access the profile search screen, and searched for their school. Following this, their expectations were to see relevant data.
Solution:
-
Anticipate their needs by showing users some the most requested school details on the "Profile" screen and make it obvious how to continue their search.
-
Add a series of tags to the most popular metrics.
-
Create a dashboard that includes the most important metrics for parents.
•More color and pictures
CPS Design Survey Participant
Design
Problem:
-
During my analysis of user feedback one of the re-occurring comments was a request for: "More color and pictures” and "Use pictures to sustain interest AND help to explain complex ideas, e.g different out of school categories”
Solution:
-
Clean and simple design was preferred by users.
-
Conduct a competitive analysis to see how others are designing their educational sites.
-
Careful use of design elements like color, images, and art can set users at ease and delight them, encouraging them to return.
-
Use design to draw users’ attention to important information.
-
Use fun and attractive artwork and photography to increase user delight and instill confidence.
Data Visualization
Problem:
-
The core of the CPS site are the metrics. These are intended to assist parents in choosing a school for their child. Unfortunately, users were confronted with complex charts, educational terms that they did not understand, and buried information.
-
I was only able to make minor changes to existing charts.
Solution:
-
Some of the chart content is written at too high a level for some users.
-
Many terms need to be defined for the user.
-
Need to avoid academic jargon if possible.
-
Charts need to be labeled simply and carefully.
-
Ask the question: Does the chart tell a story for the user?
-
Create call-outs explaining important concepts.
User Education & Help
Problem:
-
Users have a difficult time understanding the data visualization required
Solution:
-
Create short instructional videos that can explain the data simply to users.
-
Proof of concept developed in Adobe Premier Pro, Adobe Photoshop and Revoicer.
-
Still in beta testing with users.
-
View example below:
Putting it all together!
-
Below you will see two screen redesigns, combining many of my recommendations for design, layout, content, color, accessibility, and navigation:
-
I was limited by existing branding and design standards. As a result, a radical redesign was out of the question.
Conclusion
-
The Chicago public schools UX evaluation was a challenge due to limitations imposed on marketing by development constraints, the larger bureaucracy, and the Chicago political landscape.
-
​However, I believe that within those limitations I gave the marketing a number of suggestions that could raise their positive survey numbers and help Chicago parents find the information they need for their children.
-
The final research report was presented to the stakeholders in a .PDF document.
