UI/UX DESIGN, DRUPAL WEB DEVELOPMENT, ACCESSIBILITY
Office of the New York State Attorney General
BACKGROUND
The Office of the New York State Attorney General (OAG) serves to protect the legal rights of the state’s citizens, businesses, and natural resources. As both the “people’s lawyer” and the state’s chief legal officer, the Attorney General advises the Executive branch and handles cases both on behalf of and against the state.
Over 5 million users visit OAG’s website each year to report fraud; file complaints about workplace and consumer issues; find information about civil and consumer rights; and learn about charitable, consumer, and real estate investment decisions.
PROJECT CHALLENGES & GOALS
OAG’s previous site was nearly 10 years old. They wanted their new website to be driven by plain language and accessibility, in both the site’s navigation and its content, to better serve all types of users.
OAG sought to improve the site’s navigation and search functionality to help new and regular site visitors access their desired content more efficiently. Additionally, the new site would need flexibility to accommodate mobile access and newer technology and content updates.
SOLUTIONS
We wanted to build a fully user-driven site for all possible users, whether they were individuals, businesses, or organizations. Therefore, we focused on the site’s organization, users, and support staff. By creating user personas during our Discovery process, we knew the new navigation system needed to prioritize intuitive ways to find commonly requested information and forms.
We shifted away from the internal bureau-based structure and created a navigation system oriented for both individual, first-time visitors and organizations. Our new taxonomy system of hubs and subhubs categorized resources, documents, and press releases under intuitive headings to make relevant information easier to find. Integrating Storybook allowed us to use Drupal components to their fullest potential and provide a resource for future site updates. Throughout the site, we implemented consistent branding and improved overall accessibility.
RESEARCH & DISCOVERY
Through our analysis of the site’s over 12,000 pages, we learned we needed to build a site that was flexible and fully responsive on mobile devices, and that was readily accessible to a first-time visitor.
A further exploratory phase of our site audit was the creation of four user personas, representing different demographic groups with specific needs. Our takeaways from these personas reiterated OAG’s primary goals: the new site needed simpler language, more direct funnels to common action steps, a higher level of accessibility for users with disabilities, better organization of forms and documents, and a comprehensive search function.
NAVIGATION, LAYOUT & DESIGN SYSTEM
The original site’s navigation system followed internal organization that hid common actions under bureau categories. We created a new system of user-intuitive hub categories with an internal taxonomic system to tag documents, publications, and press releases. Custom libraries of documents and legal resources cater to frequent site users.
Additionally, we built a full-site search tool and created multiple avenues for search and access which catered to the average first-time user. An “I Want To…” dropdown menu lists the most common reasons for site visits. A “Popular Actions” menu contains direct links to the top actions. A new “File a Complaint” page sorts all complaint forms into hubs.
DEVELOPMENT, INTEGRATION, & CUSTOMIZATION
We integrated Storybook to document a design system that worked for both our web team and OAG’s. Storybook gave our web team a place to build, test, and experiment with different components and styles. Since Drupal is heavily component-based to allow for more page customization, having a library of all the components we used will make it much easier for the OAG team to update the site in the future without affecting static parts of the site.
In the website’s UI/UX design, we utilized OAG’s existing style guide to develop a visual design system. Where applicable, we updated the guidelines to improve accessibility while retaining consistency with the brand.
RESULTS & STATISTICS
OAG’s new site uses Drupal 10 CMS. After building the site in Drupal 9, we then provided updates, migration, and support when Drupal 10 was released so that the live site would be using the most current software. 10,550 pages of content and press releases were transferred from the previous site, and 3,500 documents and publications were uploaded to the new site with appropriate tags. The site translates into 12 languages and meets WCAG 2.0 accessibility standards. In a 28-day period, the site will see anywhere from 200-300k users.
