desktop view
mobile view

CADRE

The The National Center for Dispute Resolution in Special Education (CADRE) website was housed on a 17-year-old custom-developed Cold Fusion platform with multiple databases of content. CADRE awarded TrestleMedia the contract to re-architect, design and build the site based on our deep experience in Drupal development and work in the nonprofit and government space. We have worked with CADRE to modernize the site design, streamline navigation and create a single site-wide database of content managed through taxonomy and dynamic views.  

Approach

We began by identifying each audience and their needs, while concurrently reviewing the multiple databases of content on the existing site. This allowed us to create a prototype of the site structure which was used to test with CADRE users at their bi-annual Symposium.  Critical to every audience was the ability to swiftly find the appropriate resource in CADRE’s thousands of pages of content. We resolved for this issue by combining all resource databases into a single library, filterable by multiple taxonomy terms in a faceted search display.

Use Cases

We created use cases to better understand CADRE’s users and how they interact with site content. After receiving feedback from CADRE and testing, we refined use cases by audience and typical tasks users would be trying to accomplish.

Use case example
Use case example

 

Content Inventory & Sitemap

Much of CADRE’s existing content was organized in a confusing way -- many navigation and category links lead to long pages with more nested links to detail pages or PDF downloads without much context. A large part of our task was to understand what types of content were on the site and recommend intuitive categories that gave users more context. We started by creating a content inventory spreadsheet, so we could be sure we were including all content in the new IA. Much of the site content was example program materials from other agencies, webinars and conference session videos, and guides/regulations. We recommended a resources section to hold this type of content, with search and filter tools.

Resources site map
Resources site map

 

Wireframes

Another challenge of this project was defining content types that would consolidate multiple data models in CADRE’s existing content databases. CADRE was entering some resources two or three times into their legacy system to display them in multiple sections of the website. We sought to create a single administrative interface to manage all resources, using taxonomy to define where each resource displays on the site by audience and topic. In the wireframe phase we concentrated on diagramming page templates (detail pages) rather than landing pages (views.)

Detail Page Wireframe
Detail Page Wireframe

 

Usability Testing

We got to know CADRE’s users first hand at CADRE’s professional Symposium. This gave us an opportunity to test a Drupal prototype on actual users with a variety of professional roles who would be using the site to find resources and information. For each usability test we read a scripted introduction and asked subjects to perform tasks and talk us through their understanding of each screen. Each session was recorded for future reference.

Clickable Test Wireframes
Clickable Test Wireframes

 

Taxonomy

Taxonomies on the existing site had a lot of very similar lists, with small differences. To simplify data entry and get all the site resources under the same roof, we worked with CADRE to develop a consistent terminology for all content. We created a spreadsheet showing similar taxonomies side by side, to help CADRE identify preferred terminology and to map data migration for our development team. In the new site users can filter by multiple facets, such as type of resource, topic, conflict resolution process, and system function.

Graphic Design

We started the graphic design phase with style tiles rather than mockups. A style tile is more refined than a traditional identity mood board and less detailed than a website mockup or comp. It helps define components like color palette and typography that our development team can refer to during the site theming process. 

Our next graphic design deliverables were full mockups of home and key interior pages. With the design mockups, style tiles and wireframes our development team started the technical build. We selected colorful iconography to solve the issue of a lack of quality imagery for some areas of the website as well as to identify related content within the design. Next we sourced quality imagery focusing on people to make a personal connection with the viewer. These two elements, iconography and imagery, helped to create rhythm within the layout of the website and active interest on pages with a great deal of information.

Home and Interior Page Mockups
Home and Interior Page Mockups

 

Before and After

Home Page Information Hierarchy

The original site had overwhelming content on home page without a clear information architecture. New users couldn’t tell where to start, or what services CADRE offered. User testing indicated that most site visitors used the search feature rather than navigation to find content in the site. 

The new CADRE home page focuses users on key resources, clearly identified by audience and type. The architecture separates information about CADRE and their conceptual models from the resource library. We used dynamic content blocks to direct specific audiences to content they need with jargon-free language, i.e., “Find State Agency and Parent Center Information.”

Before & After: Home page information hierarchy implemented
Before & After: Content reduced and organized.

 

Taxonomies

Resource categories and tags were confusing because facets weren’t separated into logical groups. For example, “Espanol” was on the same level as “Mediation” under the “Select A Topic” menu. Some of the left column terms were also facets of resource taxonomy, like “CADRE Webinar” and state resources versus parent center resources.

Now resources have one location in the navigation, with sub sections for various types. Facets are grouped logically with meaningful headings.

Before & After: Categories and tags organized with headings
Before & After: Categories and tags organized with headings

 

HTML Tables Changed to Filters

The table organization for state resources and parent center resources was not responsive, and was hard for new users to understand. The site navigation disappeared in this section of the site, making it challenging for users to orient  themselves within the site.

Site is now responsive, with a consistent UI across all resources. The filtering allows users to find the same results as the previous table organization. Site navigation is consistent and accessible from all pages.

Before & After: Filtering has replaced the confusing and not-responsive HTML tables
Before & After: Filtering has replaced the confusing (and not-responsive) HTML tables

 

Important Content Made More Discoverable

The information about system design and example practices was buried deep in the site structure. It was not in the site navigation and users had to click a column heading in the state resources table to find it.

The new site shows CADRE’s model of system design in the navigation. Users can drill down through the system functions in the sub navigation to find examples of real practices from state agencies.

System design moved up in the IA
Before & After: System design content is now prominent in the main navigation under "Improving Your System"

 

CADRE's Professional Conference

CADRE sponsors a professional conference on dispute resolution in special education every other year, but there was no place for the conference information in the information architecture. Users could only find conference information by using site search, or clicking a graphic on the home page or in a side column when a conference was being promoted.

The conference pages now have a permanent home under the “Resources” section, where users can find information on upcoming conferences, and videos of presentations from past conference sessions.

Conference pages now have a place in the IA, instead of being promoted on the home page and then disappearing
Before & After: Conference pages now have a place in the IA where users can find presentations after the event

Success Measures

Prototype testing demonstrated that our recommended navigation was clearly preferred to the previous site structure, as users were better able to self-identify and find content. We will continue to track success by reviewing Google analytics and tracking going forward.