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
Designer: Axxel David
Designer: Vy Le
Designer: Iris Brudi
Year
Fall 2021
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 don't have the ability to 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 all relatively difficult processes.
The current Philadelphia Court System website doesn't help the situation through its 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, as well as help to 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.
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.
"Helped guide us through the judicial system"
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 decide 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 really enjoyed about each of the websites we chose was their use of color, font treatment, and how each section of the website felt like their own block of content. Coming together to create a larger experience but each section felt easy to digest on its own.
User Scenarios
The Temple University third-year law students helped us get in the mind 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.
Sitemap
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, wire framing 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
Design Approach
Our approach to this design was to keep within the same style as what exited but play up the elements that we saw were important. In most government website we looked at we noticed that there was a heavy use of blue and black. We wanted to keep on the theme because as a government website you don't want it to stand out and you want it to feel trusting.
Design System
With working on a large team, have 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
Before
This is the site interface as we see it today
After
This was our proposed redesign we presented to the stakeholders
Interface
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.
Existing Interface
This is what the site is currently at. Besides the overarching information architecture issue with this site, there are many things that need to be updated like the overall theme being consistent. Which is what our team decided to focus our time considering for our pitch with the stakeholder meeting at the end of the semester. The main thing that we needed to fix was the fact that the colors and imagery are not being consistent with the theme of the site. We also wanted to reorganize what needs to be seen first and what deserves the space.
Proposed Interface
This is the interface we proposed to the stakeholders at the Philadelphia Courts. The largest UX change was the introduction of the "how can we help you" header and the helpful services tab so unrepresented litigants can get the information they need quicker. We also updated the font to a modern san serif and expanded the card system that was already in place with a more consistent theme. We also rearranged some of the information so the users would get what they need first.
Mobile Interface
Before
This is the mobile interface as we see it today
After
This was our proposed redesign we presented to the stakeholders
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 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: Bryan Satalino
Design Team: Axxel David, Vy Le, Iris Brudi
Class: Senior Design Workshop
Institution: Tyler School of Art and Architecture — Graphic and Interactive Design