Web Design | MArch, 2020

COVID-19 Response

Superior Court of Orange County

Web Design Case Study

My Role
UX Designer,
Web Designer / Developer
Tools
Bootstrap, jQuery, Sublime Text, WinSCP, MS Teams
Timeframe
1 Week
The Superior Court of Orange County needed a way to share and update general notices, administrative orders and press releases with the general public, as well as other state and local agencies, during the COVID-19 pandemic to quickly communicate information regarding court closures and procedures. Users had to be able to access information, search and download documents separated by department as some would stay open while others would close, offering only remote or online services.

Problem

The existing list of Public Notices on the Courts' website was one big long list which was not separated by department and was not specific to how the Court was responding to the COVID-19 pandemic.

Solution

Create a landing page linked from the homepage where users could go to relevant department pages to conveniently find and search through general notices, administrative orders and press releases so that the general public and other state and local agencies could stay updated on Court closures and procedures during the pandemic.
Due to the rapidly changing pandemic situation in March, 2020, this site update required extreme flexibility and patience. No one was sure exactly what was going to change - but they knew it would. Communication with the public as well as state and local agencies regarding Court activities was paramount and also an important legal obligation of the Courts.

New content added to the Court's OCCourts.org website is typically a process decided on by Committee, however, this was set aside due to the pandemic and the need to rapidly disseminate information to the public.

The project itself came together very quickly and I was required to strictly conform to the existing layout and design while finding ways to add content and functionality.
Constraints:
  • New content had to exactly match the existing theme and layout
  • Scope was limited to the COVID landing page and department pages only, no work was done on the homepage or other pages
  • Content had to be accessible by all types of internet users, large font, easy to use, etc.
  • Time was of the essence and project completion was closely monitored
  • Not able to follow the Design Thinking Process due to timeline
Assumptions:
  • Departments would add new content as it became available
  • Some departments would convert from offering in-person to online services and their pages would need to accommodate this transition
  • Everything could change at a moments notice

Landing Page Card Links
To maximize usability, I designed the cards on the landing page as buttons that link to the individual department COVID update pages to be oversized, with large, readable font and an obvious hover interaction to clearly indicate they are clickable.

For fun, and an added bit of design, I included icons related to each department and created a Neumorphic look to the cards in an effort to stay within the style and theme of the existing website while separating each card-link from the background.
Collapsible / Sortable Sections
One requirement was to make all of the Administrative Orders, and other documents posted to the main landing page, sortable so users could find what they're look for.
The ability to sort each collapsible section by the headings at the top of each column was achieved by utilizing the List.js library.
After the variables are defined in var options, we initialize a new list with var covidList. This enables each of the columns identified in var categoryField to be sortable when clicked.
The collapsible sections can also be filtered. Users can type in a keyword and the list will auto-update, or they can click a commonly used keyword on top of the search box. This functionality was achieved by utilizing the jQuery.FilterTable, written by Sunny Walker, thereby reducing the users' need to scroll through a long list of documents.
This first line of the function $('table').filterTable adds the filter feature to all tables on the page with a class of .table. The list of clickable phrases to quick fill the search are added with the array quickList: ['Closure', 'Emergency', 'Order', 'Rule'].
These two features can be used together. Users can filter the list then sort it by column header. It was decided that the filter feature was only needed in the tables on the main landing page. The tables in the linked department pages would only have the sort feature.
Each row in every table has a highlighted background color added on-hover. The entire row is also clickable to make it as easy as possible for the user to open the corresponding PDF document, which opens in a new window. This was achieved by adding the class .js-clickable to each row in every table, then adding the javascript below:
An inherent issue with Bootstrap collapsible tables is that they don't preserve the scroll position once the section is expanded and collapsed resulting in the screen jumping and the user having to adjust their scroll position manually. A solution for this was to animate the section back to the top of the browser window once the section was clicked open. This was done using jQuery's .animate and .scrollTop() effects.
The first line of the function targets the .collapse class on the Bootstrap collapsible section, then creates the variable $card which is set to the closest section with the class .card. When the user clicks on a collapsible card section, the top of the table section is moved to the top of the viewport using .animate and scrolltop at a speed of 300ms.

Conclusion

This project was put together under an incredibly short deadline, had significant constraints, open ended direction, and its progress was closely monitored by staff at the highest levels of the Court.

Ultimately, the project was completed on time, included all of the requested features and functionality and the stakeholders were very pleased with the final result.

Next Steps:
  • Continue to post documents as the Court responds to the challenges of operating during a pandemic
  • Work with the IT department to ensure these pages function as expected