Redefining user-centric legal access for ILAO with UX design and Drupal

The challenge

ILAO faced numerous usability and navigational challenges with its Drupal 7 website. This presented a significant issue for individuals in distress seeking time-sensitive legal information.

The Legal Information section was disorganized, creating difficulties for both legal professionals and ordinary individuals in need of legal information. The search for necessary information was challenging, and the website lacked mobile-friendliness, creating challenges for users accessing information on their phones.

The approach

To address the challenges encountered by ILAO users, we collaborated with stakeholders and chose to prioritize content, adopting a design-first approach.

Our emphasis was on enhancing the overall user experience, optimizing workflows, and refining the content architecture and strategy. The objective was to elevate user satisfaction and ensure effortless access to ILAO's comprehensive range of services and resources.

The solution

Discovery

During the discovery phase, we conducted workshops and thorough user research with the goal of understanding and empathizing with the users. We delved deep into their pain points, motivations, and needs.

Through empathy mapping, we discovered that users often felt lost when dealing with legal matters. They struggled to find the necessary information and felt overwhelmed. This increased their distress and impeded ILAO's mission to provide clarity and guidance to individuals seeking legal assistance.

During stakeholder interviews, we identified that the existing site presented difficulties in comprehending the systems of the civil court. There was a lack of clarity in the content hierarchy, and the organization of the content within the legal information section created confusion between the general public and legal professionals. These challenges made it difficult for users to interact with the ILAO website, resulting in a higher drop-off rate.

Information architecture

We started by identifying key content formats and their basic functionalities. Then, we structured and organized the content in a logical manner based on user preferences, informed by our research. We prioritized what users would ideally need first when they landed on the platform.

To improve navigation, we set up an information hierarchy and streamlined existing data. We designed a navigation system that is intuitive and efficient for users to find information.

We used clear and concise labels for navigation items, considered hierarchical structures, and implemented breadcrumbs for easy navigation. To ensure accessibility, we provided alternative text for images, ensured keyboard navigation, and used semantic HTML.

The key approach was to define the relationship between the website's content and functionality, resulting in the development of a comprehensive information architecture.

User-friendly interface

Our objective was to strike a balance between conveying essential information, providing services, and maintaining a professional yet friendly visual language for diverse audiences. This includes the general public, legal professionals, and donors.

To achieve this, we designed the homepage with interactive elements to engage users and created a dedicated section that is prominently visible and specifically addresses donors.

Keeping the people of Illinois at the center of the process, the overall layout was designed to be intuitive and user-friendly, ensuring that important information is easily findable and usable.

UX writing

A great example of collaboration between words and design was the simplification of call-to-actions on ILAO's homepage. Our design team facilitated a compelling solution to encourage users to request and receive legal assistance, achieving the goal of actionable UX writing and fulfilling the primary purpose of the website.

Concise and impactful language was strategically placed alongside visually engaging elements. Clear and persuasive calls-to-action guided users seamlessly toward the assistance request process. The team successfully enhanced the website's effectiveness in encouraging users to seek legal assistance.

Drupal migration

The migration of ILAO's website from Drupal 7 to Drupal 8 was a substantial endeavor. It encompassed transferring around 1 million custom entities, nearly 500,000 nodes, various taxonomy elements, a select number of user profiles, and numerous files. The goal was to ensure a smooth transfer of revisions and translations.

During the transition to Drupal 10, the front-end and design teams collaborated to implement a component-based design approach. This approach accelerated project delivery and significantly improved the overall flexibility and efficiency of the migration.

Toolbox

The toolbox feature simplifies the legal process by breaking it down into manageable steps. It offers a checklist within the website's design and structure, allowing users to track their progress and stay organized while navigating the legal system.

Content translation

To improve ILAO's website SEO, we used a Drupal-contributed module that added keywords and descriptions to enhance search engine ranking. We implemented support for importing and exporting XLIFF files to improve the efficiency of content translation, enabling seamless integration and collaboration between different translation tools and platforms.

Design system

The implementation of a scalable design system has proven to be a valuable asset for ILAO. It has contributed to the long-term sustainability and adaptability of the site by ensuring consistency in design elements. This has streamlined the design and development process, resulting in improved efficiency and cost-effectiveness.

ILAO's design system has allowed for the seamless integration of new features and has facilitated migration while preserving the overall design integrity of the website throughout our ongoing partnership.

The outcome

The outcomes of our collaboration with ILAO were a result of a smooth integration between UX design and Drupal. This association resulted in easy-to-use navigation, improved search function, and a simplified process for users to comprehend their legal choices and pursue justice when necessary.

We effectively implemented practical UX enhancements, expanded translation capabilities, an improved mobile experience, and heightened security and loading speed. These improvements offer a seamless browsing experience for website users. Optimizing the website's performance will contribute to enhancing user satisfaction and engagement.