North Dakota State Government Website Drupal 7 to 9 CMS Migration & Redesign

A major focus of the redesign effort was to make it much easier to navigate to the desired content in less clicks. For example, after reviewing the analytics, one of the most common pages website users wanted to access was the current "regular" session. With the old website design, depending on where on the site you were, that took two to three clicks. After the redesign, the user can directly access the last ten regular sessions directly from the new megamenu. 

This logic was applied to other common pages to make getting to desired pages much faster than with the old design.

Main Menu Converted into a Megamenu

In the original design, the main menu was a mere 6 links, with the remaining important links requiring the user to scroll (sometimes quite a ways) to the footer:

With the new menu design, a multi column/section megamenu layout was applied that included links from the original main menu, footer links, and several new links that allowed visitors to jump directly to common pages.

Architecturally, the new megamenu structure takes advantage of the powerful Layout Builder feature built into Drupal core starting with Drupal 8. Use of the Layout Builder for the mega menu allows privileged site builders to easily add or rearrange menu sections with a drag-and-drop interface.

Footer

The old footer had several important links in it, which the user had to scroll to in order to access it (assuming they even knew to look in the footer).

Because the new megamenu incorporated several important links from the original footer, the redesigned footer was greatly simplified to show just a few rarely accessed links plus the contact information and copyright: 

The goals of the homepage redesign were to 1) Create a more visually appealing design with better use of available space; 2) Make the most important information desirable to website stake holders easy and quick to access, such as upcoming events from the legislative calendar.

Below are the screenshots representing before and after the design refresh for the homepage, respectively. Several design subsection below repeats this pattern of the original design screenshot first, and the new custom design second (where applicable).

Other desired homepage updates included the following:

1. Announcement bar: a dismissable message bar at the top of the website for important announcements a visitor would see on every page until dismissed. 
2. Announcements section was updated to support thumbnail images and allow the site builder the ability to sort the announcements in the desired order.
3. Calendar Section: The old design only supported three events, as you can see above. The updated homepage calendar splits events into "Today" and "Upcoming", and list more events using a scrollbar if needed.

With the original design for the legislative assembly session pages, when selecting a assembly biennium (e.g. 67th/2021), you were taken to a navigation page. Because this page didn't contain any useful information on it's own, the user had to click a link to get to the desired page (e.g. "All Members" discussed in the next section).

Assuming the original intent was to get details about the regular session (the most popular page), the visitor had to click the "regular" session link, which displayed many of the same links as the previous page and had details about the session mixed in:

The redesigned legislative assembly details page combined the menu "jump" page with the details page for the regular session, and breaks the details up visually by section into "cards":

Not only are all the links now in the sidebar, the session details can easily be scanned for the desired information or link.

With the original design, the links available from the legislative assemble session page required the user to select the house or senate member listing, or select "All Members" to view both chambers at once. There was no way to search the members by location, chamber, district, or party.

The design refresh added those capabilities, and shows members in a grid vs one long column. It also includes graphical indicators for new members and members that are part of legislative management teams, and a color bar below the member's photo to indicate political party. 

The redesigns members page highlights several search UX strategies, including the ability to filter and search one or more fields simultaneously.

The same redesign of showing members in a grid with more visual cues and more search filters was applied where possible throughout the site, including the biography listing page, legislative assembly committee pages, and several other member listing pages.

With the old design, the district page showed the members in a list like the first screenshot in the section above. It also showed a map of the district with a link to view a larger interactive map and featured a PDF link the user had to download or open in a separate tab to view. 

With the new design, the members assigned to the district are listed for several recent legislative assemblies (regular and special sessions). Accordion elements similar to the ones shown below in the Fiscal Agencies section allows site visitors to quickly scan the page for the desired information. The Interact Map and Population Statistics were added as tabs to the district information (e.g. District 1).
 

With the old design, there was no fiscal landing page, and the fiscal pages of the website were only accessible either from the footer, or by accessing a given legislative assembly, then selecting the budget information link. Once a visitor selected a link in the footer, they were often presented with a "flat" page of headers and links like the screenshot from Legislative Assembly Regular Session Details Page section above.

The redesigned fiscal section features a landing page that acts as a catalog to guide the site visitor to the correct page quickly. Many of the landing page links seen below are also accessible directly in the megamenu, which allows more seasoned visitors to go directly to the desired page. Also the new design elements, such as "cards" (also featured above in the Legislative Assembly Regular Session Details Page section) and accordions for pages featuring several different budget years for easy scannability. All new fiscal pages contain historical budget data where applicable.

Fiscal Agencies

With the old design, fiscal agencies were listed in a scrolling row, like on the Biography Listing and Biography Details Pages section shown below. There were two tabs to switch between "By Budget Number" and "Alphabetical" at the top of the page, and each featured anchor links to jump to a section of the page. Once an agency was selected, the visitor was presented with a scrolling list of budget document links sorted by biennium (see below)

The redesigned Agency Budget Information page features a search bar at the top of the page, and the agencies were broken up into either numbered "cards" if the user selected the default "By Budget Number" and alphabetically if they selected "Alphabetical". 

The listing page cards look similar to the one shown in the Legislative Assembly Regular Session Details Page section above, and added a contextual menu on the left specific to the Budget Information pages (which is shown on all budget information pages). The agency details page features accordion elements to more easily find/view the desired biennium agency budget information (see below).

As with many other original page designs, the original legislative committee pages sometimes required lots of scrolling to access the desired information, such as a committee member meeting information, or other documents. Members, meetings, and document were listed from top to bottom, which could be problematic for committees with lots of members and/or several meetings.

The new design breaks the information up visually into tabs for the members, meetings, committee information, and related documents. Members are shown in a four-column grid just like in the Legislative Assembly Member Listing section above. Meetings are visually divided by accordion elements so the user can more easily scan the page for the desired meeting date, then open the accordion to access the relative information. Related documents were placed in a separate tab, saving the user from having to scroll to the bottom of the page to access them.

The original biography listing page was an alphabetical list of member names in both houses in a single column, with the only filters being the ability to jump to a letter of the alphabet using the A to Z links at the top of the page and the ability to search for first or last name using a search form.

The new design kept the alphabetic filter and search box, but the search now allows the user to also search by city, assembly number/year, and other information associated with each member. The new design also displays five columns of members instead of just one, and added filters for chamber (house/senate), house and senate leadership positions, political party, and female lawmakers.

The original biography details page contained the member photo and contact information at the top, then their legislative history information was presented in reverse-chronological order, which could be quite long depending on how long the person had been an assembly member. 

The new design split the person's photo, biography, and contact information up into sections on the top half of the screen, and then provided tabs on the lower half to divide their legislative history up by (biennium) year.

A major goal of the new designs was to provide significantly more information in a smaller space using visual UX elements that made for simple scanning (vs scrolling), such as tabs and accordions. For example, with Representative Jim Kasper (shown above), with the original design, a visitor would've needed to scroll the entire page to see his legislative history. With the new design, you can instantly see how many legislative sessions he was a member of, and jump directly to a given year with zero scrolling. 

The original design for the legislative calendar simply listed the events in order of time, and navigating between months and years had to be done one screen at a time or by manually entering the month/year in the browser address bar.

The new calendar design features color coding for event types, and the ability to jump to a given month/year using dropdown selectors.

Individual events had virtually no visual highlights, so the user had to scan the page to find the information they desired. The new design uses icons and font coloring to guide the user to find information on the page quicker. 

With the old design, the visitor had to select a section of the century code first, then click on a chapter or article, then click the section within the chapter to get to a link where a PDF file could be downloaded.

Both of these sections converted this multi-page drill-down method to a multi-level accordion-style layout that allows for easier scanning:

The old website had a page called "Research Center" that was accessible from a link in the footer. When clicked, it took you to a page with a list of links and a couple headers. The links were a mix of other pages and PDF documents. 

The new design features a "Library and Research" landing page, which has a contextual menu for the library and research section, and breaks the library information into cards, similar to the ones shown at the bottom of the Legislative Assembly Regular Session Details Page section above. Like other sections of the website, many of the main pages in this section are also listed in the megamenu. 

Legislative Bill Histories

When the Legislative History was accessed on the old site, the first page was a list of house and senate bill histories listed by session (including regular and special sessions); see below.

Once a link was clicked, the user was presented with a massive list of legislative bills by bill number (e.g. "HB1001) in several columns, which was practically impossible to scan visually, forcing the user to use their browser's search function to find the desired bill.

With the new page design, all the bills are shown for the selected session (Assembly label in the screenshot below). The user may select a different session using the dropdown, select a chamber if desired, or even search directly for a bill by number (e.g. "1001" or "HB1001"). Thus you can view multiple bills in the history without navigating back to the biennium selection page like you might have to do on the old design.

In addition to the updates discussed above, there was a desire to have the following new design elements and features:

1. Legislative Council Staff: the old page was created manually, and had to be maintained each time a member was added or removed, or whenever someone was promoted. With the new architecture, a new page type was added (Legislative Council Staff Member), and the listing page that was previously manually maintained is now automatic. The sorting of members on the new page is done with a simple drag-and-drop UI. 
2. Find a Bill/Find my legislator: the old design (below left) only allowed the site visitor to enter a bill number without the associated year. The new design provides a year dropdown and a second block to allow searching for a legislator by zip code and/or house number.  
     
3. FAQ is a new page NDLC wanted to add to the website featuring accordion elements for the questions and answers.
4. Request for Proposal (RFP) is a new page type that features a landing page and details pages. The landing page is a list of RFPs by due date, with each item linking to a details page. The details page features a title, summary, and body section explaining the RFP.