What is VictimLaw?
VictimLaw is an online database that was created as a user-friendly alternative to remove barriers to accessing victims’ rights laws, court decisions, and attorney general opinions. VictimLaw aims to make a process that can be difficult for the general public easier to navigate ensuring more accessible information to rights information.
Team Setup
Challenge
The VictimLaw redesign project was part of an effort that began in 2017 with a completely different team of designers, researchers, and developers. During this first phase of the redesign, that team conducted a heuristic evaluation of VictimLaw and created customer journey maps to better establish the steps for key user groups.
Because VictimLaw is split into two views: the public view and admin view, research was performed on both each section with each view leading to specific conclusions, some of which were:
-
Content was redudant leading to user confusion
-
Presentation of content focused more on quantity instead of a minimalist layout.
-
Text was extensive instead of concise
-
Cluttered menu bar consisted of items at different levels of taxonomy
The 2017 project did not conclude with a full redesign due to budget cuts. For that reason, a few years later the project came back and the sole focus was a redesign effort.
After reviewing previous research and meeting with stakeholders, the project picked up right where it left off. The goal was taking a website with a difficult to navigate UI (that included) four different search experiences and condescending it into a modern experience.
Although the website was a .org, it did not utilize USWDS best practices. A major focus of this redesign was utilizing USWDS components to make sure that both the desktop and web experience were seamless. As seen above, the homepage was outdated and provided an inconsistent search experience that gave users 4 options: topical, term, contents, citation that all led to the same place.
For the admin side, the challenge was moderning the look and feel of this section. The structure, organization, and behavior of specific page types made it difficult for admins to create, modify, or delete records.
The Administrative side of VictimLaw had been neglected for a long time and many of its functions were broken or caused confusion even for long time, super users. Like the public facing site, the goal was to make this experience user friendly, utilizing web best standards.
Solution
As previously mentioned, the main goal of this redesign effort was the create a more seamless search experience.
Homepage
Beginning with the homepage, the difference between the new search experience and the old one is that we now gave users the option to search by citation, title, or keyword and also apply filters from the homepage. The previous process had citation, title, or keyword split into separate sections and then made users filter on different pages. We condensed the initial search experience into one page.
The homepage was also given more content to flesh out the journey and places a user could go to. A learn about victim’s rights section was added to the middle with call out links to each right within that section. Once clicked, a user could easily learn more about a specific right.
This homepage was the first iteration that I worked on that the stakeholders approved.
In later iterations, we worked with stakeholders to better understand what the best initial search experience would be. When I say "initial search experience", I am referencing the homepage and capabilities of user before clicking the search button. We wanted to provide them with the ability to filter on that homepage instead of having to search and then filter on the newly developed search results page.
Internal Pages
All other internal pages on the top nav follow a similar pattern of having jump links on the right-hand side. For users who want to read specific sections, jump links for in page navigation help remove that extra step.
One internal page that had a different layout was the the legal glossary. After meeting with stakeholders and analyzing other government websites, I made the decision to add a find topic by its letter at the top of the page. This new feature help users find definitions much quicker. Because of the large quantity of words in the glossary, this feature helped establish order to a page that lacked hierarchy.
Search Results Page
For the search results page, we wanted users to have full control of their experience. Once a user landed on the search results page, they could continue adding or removing filters or search by a new key word. The search results page mirrors several of the modern search experiences with filters on the left and full user flexibility on the right. Having one centralized location for search results and the ability to edit was a major improvement that the original website did not have.
Admin Pages
For the admin section, the main goal was adding order and structure to an antiquated system. The focus was making all pages easier to edit and modify for admins.
***One major note for the admin section is that it cannot be viewed without a username and password.***
Phase 2:
One page in particular that stood out as problematic was the Content Management page. On this page, admins could add new content chapters. The major problem was that form used a lot of white space and the correlation between the form fields was only noticed after a user made changes to options in the drop down. There was also a dropdown for “type of law” that could only be controlled by switching between choices within the type of law menu. When a user clicked “view of the table” of contents, a separate window appeared which negated the point of using a filter.
The way that we modernized this experience is by giving each section its own ability to move and rearrange entries. We added icons for “edit heading”, “edit content”, “add child” and “swap order”. Once clicked an admin could make changes on either an individual entry level or a group level. For example, “statuses” is a group. Once an admin clicked “swap order” they would be taken to a new page where they could move pieces and then save changes. Admins could also add new entries by adding a child or edit content and headings.
This new organization made the overall experience of an already complicated system easier to manage.
High Fidelity Designs
After I finished the wireframing and received approval from the client, I worked with the visual designer to help them understand the vision of these designs moving forward. I worked with the visual designer to implement changes from client meetings after the design hand-off date.
We worked together to establish a new color palette, that used the original website as an inspiration but also provided a new and improvement visual appeal. We also helped introduce USWDS to this website which was created before USWDS was established.
During all phases of the design process we QA our work and helped the engineers with 508 compliance testing.