Leveraging User Research to Make Online Resources Identifiable for the Philadelphia Courts
Role
Designer
Project Type
User Research | Site Map | User Scenarios | Web Design
Art Direction
Bryan Satalino
The Philadelphia Courts partnered with Temple University’s third-year law students and Tyler School of Art and Architecture to redesign their website with a clear goal: make it easier for unrepresented litigants* to find and understand the resources they need. Focusing on users unfamiliar with the complexities of the court systems and legal language, we created an accessible, user-centered design for both mobile and desktop use. We streamlined the navigation and reorganized content to ensure essential information is easy to locate and understand.
*a person who advocates on their own behalf in court instead of an attorney
Project Goal
The Navigation
Our discovery phase further revealed that navigation further compounds the issue. The website’s menu presents an overwhelming list of options with little guidance or context, making it difficult for users to determine where to begin. Many links lead to lengthy PDFs filled with complex legal terminology, reinforcing confusion rather than providing clear, actionable direction.
Site Map
We began by synthesizing our insights from our user research to pinpoint the areas of the website that required the most improvement. Starting with the existing navigation, we mapped out the current structure to better understand its complexity and gaps. From there, we streamlined the experience by consolidating pages and reorganizing menu options, creating a clearer, more intuitive navigation system.
User Scenarios
We put ourselves in the shoes of unrepresented litigants through user scenarios to inform our design choices. My partners and I each took turns picking a scenario and trying to navigate the current website to identify the resources needed for our case. By the end of the exercise, we were able to find information for only one scenario out of all six. This confirmed how confusing the website is and the need to make it accessible for the primary users.
Identifying the Problem
Thousands of Philadelphians rely on the Philadelphia Courts website every day to navigate their cases, yet the site was not designed with accessibility or clarity in mind. Critical information is often presented in dense, legalistic language that is difficult for the average user to understand, creating barriers for those who need it most.
This challenge is amplified by the reality of Philadelphia’s literacy rates. While the average American reads at a 7th–8th grade level, 52% of Philadelphians read at a 5th grade level or below, placing the city in an “adult literacy crisis” and among the lowest literacy rates in the nation. As a result, much of the court’s existing content is misaligned with the needs of its primary users.
User Research
Based on our research, we determined that unrepresented litigants are most likely to access the site from their phones. We decided to prioritize a mobile-first approach before scaling the design to desktop. We focused on simplifying the experience through a clean, minimal layout that emphasizes clarity and organization. Guided by user behaviors, we placed a prominent search bar and FAQ section at the top of the interface, ensuring users can quickly find answers in the way they naturally prefer, searching first.
Low-Fidelity Wireframes
Our high-fidelity wireframes applied the visual system we developed to create a site that is both easy to read and intuitive to navigate, while directly addressing user needs. We made deliberate color choices to prioritize accessibility and clarity, using strong contrast between light and dark tones to improve readability. We also incorporated Philadelphia’s signature yellow and blue to create a visual connection to the community the site serves. Icons and buttons were designed to be bold, simple, and highly visible, with larger sizing to support users with visual or motor impairments across both mobile and desktop experiences.
High-Fidelity Wireframes
Working within a tight timeline, we approached this project as a focused sprint to deliver the highest impact by our deadline. As a result, we concentrated on redesigning the homepage and navigation, the areas we identified with the greatest usability challenges. While we developed initial concepts for key court pages that unrepresented litigants would need, we were not able to fully design them within the scope of this phase.
Moving forward, the next step would be to extend the system across individual pages and fully develop the destinations linked through the navigation. Despite these constraints, we achieved our primary objective: to significantly improve accessibility and usability for the average Philadelphian navigating the courts’ website.
Reflections
We successfully transformed a confusing, inaccessible website into a clear, user-centered experience with streamlined navigation and an intuitive structure. By grounding our decisions in user research, we ensured the design directly responded to the needs of the people it serves, making critical information easier to find, understand, and act on. In doing so, we improved accessibility and took a meaningful step toward a more equitable legal system.