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.
