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 unfamiliar with court systems and their language which the current design did not reflect. They wanted a new layout that helps unrepresented litigants* access the resources they need.
Our job was to create an human-centered homepage for mobile and desktop that focused on accessibility and important resources along with improving the organization of the navigation. We also updated The Philadelphia Court’s brand identity as well.
*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
The Plan
Our class began this process by breaking into 3 groups so that there would be three design options to present to the client. The goal was to create three different layouts but keep some similarities between them and the original website. 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 myself, Phillip Lee, Sana Kewalramani as the designers and Lydia Hurtado, a third year law student.
Identifying the Problem
Accessibility is important to government websites to make sure the site can be accessed and understood by all citizens. The entire website is inaccessible and has a very complicated navigation. The menu is overwhelming from too many options that lead to lists of long pdfs that were not written for the general public.
The secondary pages also do not give information on what a section is about. This causes confusion for unrepresented litigants who are trying to find help but do not understand everything.
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.
Site Map
We began the process of creating a new layout by gathering the information we needed to construct an accessible and easy to understand webpage. This started with taking all the current tabs in the navigation menu and creating a site map for it. With this, we reorganized the menu and combined pages and menu options to create a more simple menu.
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 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.
Logo
To start the design process off, we began by focusing on creating a new logo. All three of us created initial sketches for ideas with focus on icons that represented a court and were easy to understand. We ultimately settled on a simple and bold design of a court house as we felt it was an iconic symbol the average Philadelphian would understand clearly. We made sure to match the typeface and logo by picking a clean and bold sans serif font that is easy to read.
Style Exploration
Colors:
We took careful consideration into the colors we chose as we wanted to keep the idea of accessibility and clarity at the front of our minds. The colors we chose varied in light and darkness to add a lot of contrast to the website to help it be more readable. We also made sure to incorporate the colors of Philadelphia, yellow and blue, into the design to connect the website to the location it is representing. Many of the colors were found in the original website as well to keep a sense of familiarity in the designs.
Buttons and Icons:
The icons and buttons were designed to be big, bold, and simple. The goal again with these was reliability which is why they stand out the most with the use of yellow for them. They are also quite large on the page to take into account people with site issues or mobility issues so that they will be easier to click on both the website and mobile designs.
Low Fidelity Wireframes
After researching, we concluded that it would be more likely that an unrepresented litigant would be accessing the website on their phone than a computer. We started by making decisions that supported a phone’s layout and then taking those and translating them into a desktop design. We worked to simplify everything down as much as possible and create a clean and organized layout. We included a search and FAQ section at the top because based on the user scenarios, searching was one of the first things visitors did when going to 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. The high contrast allowed for readability and accessibility for those that needed it.
Final Deliverables
The final deliverables is a fully designed mobile and desktop landing page for the Philadelphia Courts website with a menu bar. These initial designs will act as a starting point for the creation of the rest of the website that would replace the current one.
Conclusion
Following the completion of this project, each of our groups and the law students presented the designs to the Philadelphia Courts for them to view and consider for their new website redesign. This project was very informative and a great opportunity to design with the focus of accessibility and a target audience in mind. Our class practiced new UX processes to inform our work and get in the heads of the unrepresented litigants we were designing for.
