Leveraging User Research to Make Online Resources Identifiable for the Philadelphia Courts
The Philadelphia Courts contacted Temple University’s Third Year Law students and Tyler School of Art and Architecture to redesign their website to be easier to navigate. The website is most visited by citizens who are unfamiliar with court systems and it's language. The Philadelphia Courts wanted a new layout that helps unrepresented litigants* access the resources they need.
Our job was to create an user-centered design for mobile and desktop that focuses on accessibility and clearly identified resources. We also improved the navigation’s organization to make it easier to access essential information.
*a person who advocates on their own behalf in court instead of an attorney
Role
Designer
Institution
Temple University, Tyler School or Art and Architecture
Art Direction
Bryan Satalino
Deliverables
Branding
Layout
UX/UI
Web design
Team
Hanna Lipski, Phillip Lee, Sana Kewalramani, and Lydia Hurtado
Identifying the Problem
Accessibility is essential for government websites to ensure they can be understood by average citizens. The Philadelphia Courts’ website is inaccessible and has a very complicated navigation. The menu is an overwhelming list that leads to long pdfs that use confusing language.
The secondary pages do not give information on what each section is about. This creates confusion for unrepresented litigants who are trying to find help.
The website’s logo was a problem as well. The current logo is a website url but not the Philadelphia Courts’ website actual url. It is misleading as it is not really a logo at all.
The Plan
We began this process by breaking into three groups to create multiple design options to present to the client. Each group paired up with a third year law student at Temple University’s Beasley School of Law to get their insight on the layout based on their knowledge of the target audience. My group consisted of Phillip Lee, Sana Kewalramani and myself as the designers and Lydia Hurtado, a third year law student.
User Scenarios
We put ourselves in the shoes of the unrepresented litigants through user scenarios to inform our designs. Phill, Sana, and I each took turns picking a scenario and trying to navigate the current website to find the resources we needed. By the end, we were able to find information for only one scenario out of all six. This confirmed to us just how confusing the website is and the need to make it simple and more organized.
Site Map
Our process began with taking information we gathered in our user research to identify the parts of the website that needed the most attention. This started with taking the current tabs in the navigation menu and creating a site map. We reorganized the navigation by combining pages and menu options to simplify it.
Low Fidelity Wireframes
After researching, we concluded that an unrepresented litigant would most likely access the website on their phone. We started by with a mobile first layout and then translated it into a desktop design. We simplified everything as much as possible to create a minimalistic and organized layout. We included a search and FAQ section at the top because our user research concluded that searching was one of the first things visitors did on the website.
High Fidelity Wireframes
The high fidelity wireframes incorporated the style we established to create a website that was easy to read and navigate while meeting the needs of people that visited it.
Conclusion
The final deliverable is a fully designed mobile and desktop landing page for the Philadelphia Courts website with a simplified navigation. These initial designs will act as a starting point for the rest of the website to replace the current one.