The Philadelphia Courts: Landing Page Redesign
A UX Case Study about proposing and redesigning the landing page of the Philadelphia Courts website.
Methods
User Experience
User Interface
Branding
Team
Lead Designer: Brett Sweeney
Art Direction: Bryan Satalino
Team: Axxel David, Vy Le, Iris Brudi
Details
Fall 2021
Tyler School of Art & Architecture
Case Study
“Accessibility in the government is something that gets overlooked”
Introduction
Accessibility in the government is something that gets overlooked. The judicial system can be overwhelming for anyone involved, from judges and lawyers down to the average person. Unrepresented litigants often can't hire a lawyer for their legal matters. There isn't anyone to help them navigate the judicial system successfully. Trying to navigate how the divorce process works, how to avoid being evicted, or how to keep custody of kids is a relatively difficult process.
The current Philadelphia Court System website doesn't help the situation through outdated web design. We worked with Temple University third-year law students and The Philadelphia Courts itself to rework the look and feel of the site and help develop a more user-friendly content strategy.
Goal
Our goal was to create a fully functioning prototype of the Philadelphia Courts landing page. With accompanying inclusive, accessible design system including typography, color palettes, and web elements for the members of the Philadelphia Courts to consider for the new visual direction of the website.
Utilizing best web practices for designing municipal and governmental websites that could be easily incorporated into the current frameworks that exist on the philacourts.gov website.
“Dedicated a lot of time and effort to making the most accessible product we could.”
Our Team
For this project, I was selected to lead a team of 4 designers. From user research, designing the interface of the landing page, and presenting our work to the panel of Philadelphia Court members. I had my hands in every part of this process.
Working as a team on a large-scale project like this was a lot of fun and helped me learn valuable skills beyond design, like working on a team and presentation skills. As someone who is passionate about UX/UI and wants to pursue it as a career, this helped me learn more about the product design process from conception to deliverables.
Team Work
Alongside our design team, we worked with our professor Bryan Satalino each week to work on refining the website, utilizing the best UX practices to ensure we were meeting our target for this project.
Our team also worked weekly with Temple University’s Third-Year Law Students who helped guide us through the judicial system and provided necessary feedback on the design and the language we used throughout the design.
When revisiting this project for my final portfolio I was fortunate enough to work with Sara Hall, who doubles as a professor of mine and the director of Digital Services at the City of Philadelphia. Getting to work with her to elevate this project to the accessible standards that the city of Philadelphia utilizes was a great experience.
Research
Research Overview
We wanted to develop a sense of actionable empathy for people who are affected by difficulties of the usability of the Philadelphia Courts system.
Utilizing the Temple University law students and user testing we were able to refine the user experience of the Philadelphia courts by researching what is working in existing sites across the country and also breaking down what we can do to improve the overall experience of the site.
Secondary Research
Before we started designing ourselves we decided to see what was already out there and what stood out to us as good design practice. We gathered examples from judiciary websites from Delaware, Arkansas, Illinois, and New Mexico.
Though there were a lot of great examples out there, what we enjoyed about each of the websites we chose was their use of color, font treatment, and how each section of the website felt like its own block of content. Coming together to create a larger experience each section felt easy to digest on its own.
User Scenarios
The Temple University third-year law students helped us get in the minds of the users who would be using the Philadelphia Courts website. By defining user scenarios of what situations people might encounter and how they would use the Philadelphia Courts Website to help them along the process.
This was continuously helpful for our team as we were designing with those users in mind throughout the whole process.
Card Sorting
We worked as a team and along with the Temple University third-year law students by partaking in a card sorting exercise of the landing page of the Philadelphia Courts landing page. As designers, it was fascinating to see what the law students were able to come up with as they sorted through the information architecture of the landing page.
User Scenarios
With the existing site we needed to make some systematic changes from the original to make sure we were making changes that helped the site for the users. Hannah Lipski was gracious enough to share with our team her detailed site map that we used to take note of what needed to be changed and what steps we could take to make the site easier to navigate.
Wireframes
Since most of the content we were using already existed on the Philadelphia Courts website, wireframing became important to the redesigning process.
We started by wire-framing the existing site to get a better understanding of how information was handled and how we could effectively change the page without losing important features. By wire framing the existing site we could take inventory and make necessary changes to make a better experience when we moved to the redesign phase.
Branding
Team Work
Alongside our design team, we worked with our professor Bryan Satalino each week to work on refining the website, utilizing the best UX practices to ensure we were meeting our target for this project.
Our team also worked weekly with Temple University’s Third-Year Law Students who helped guide us through the judicial system and provided necessary feedback on the design and the language we used throughout the design.
When revisiting this project for my final portfolio I was fortunate enough to work with Sara Hall, who doubles as a professor of mine and the director of Digital Services at the City of Philadelphia. Getting to work with her to elevate this project to the accessible standards that the city of Philadelphia utilizes was a great experience.
Design System
Working on a large team, having a solid design system that my team could pull from and utilize when designing was important. Each member had access to this and could add and edit as they saw fit when they were designing. This really helped speed up the process when we got into the actual design.
Interface
Proposed Refresh
Utilizing the research we gathered we decided the best course of action would be to redesign using elements that made the Philadelphia Courts page stand out. By taking the standout portions and expanding them into what you see we were able to make necessary changes that wouldn't affect the overall migration when it comes time to change the layouts. Since this is a government website we wanted to take into account the cost, time and consideration it would need to make this overhaul work.
Before
After
Mobile Interface
Before
After
Conclusion
This project was an eye-opening experience as a designer. Being able to design for real stakeholders and users was a great way to step out of my comfort zone and lead our presentation for my team to present the final website to the panel of Philadelphia Court members.
This project was a unique design thinking exercise because we needed to make necessary changes that would help affect the overall use of this website and that meant not utilizing the creative freedom that most art school classes allow.
This helped us become better designers by designing with an audience and accessibility in mind.
Credits
Lead Designer: Brett Sweeney
Art Direction: Art Direction: Bryan Satalino
Design Team: Axxel David, Vy Le, Iris Brudi
Institution: Tyler School of Art and Architecture — Graphic and Interactive Design
Class: Senior Design Workshop