LARGE-SCALE RESPONSIVE WEBSITE
I led the UX team in the redesign of the public website for the National Assessment of Education Progress (NAEP).

We created a new visual design for the site, created a new information architecture to improve user access to information, and made the site responsive.
OVERVIEW / CHALLENGES
The NAEP web site is a large information site documenting the whole of the NAEP program and archiving all assessment results since the first assessments were administered in 1969. The site comprises over 6,000 pages.

The previous design of the site used inconsistent information architecture, was text heavy, and relied extensively on inline text links at all levels of the site, making it very difficult for users to find the information they sought.

Step 1: Develop Information Architecture

The biggest change from the old design was the information hierarchy (IA). The old design had a flat IA, due to the conventional wisdom that everything should be accessible within 3 mouse clicks, or users will get frustrated.

THIS WISDOM IS REALLY, REALLY UNWISE!

What the conventional wisdom ignores is the cognitive costs of a flat hierarchy. What causes users to give up or get frustrated is effort. Yes, multiple mouse clicks takes some effort, but not nearly as much effort as scanning a wall of text to find the right links, or worse yet, clicking on the wrong link and having to back out to try again to find what you were looking for.
To reduce visual search times and reduce navigation errors, the redesign structured the pages so that most of the textual information was on lower level pages, while the top level pages were designed around navigation.

To allow effective navigation in higher level pages, content of this site was divided up into a clear set of categories. There is no "best" number of content categories. It depends on the type of site, number of user groups, similarity of different user tasks, and other factors. Our process to determine the content categories involved the following steps:
  • Stakeholder interviews - determine goals and target user groups
  • User Interviews - Determine important tasks and information requirements
  • Card Sort - Determine information structure paradigms of stakeholders and end users
Hierarchical Information Structure
Content Categories

Step 2: Personas and Journey Maps

Nine different user groups were identified by NAEP stakeholders as important to their mission. These groups included parents of participants, education researchers, policymakers and the media.
User groups were defined by their prior knowledge of NAEP, preconceived notions regarding standardized testing, their goals for interacting with NAEP, and the level of information they would be attracted to.
User Group Profile - Parents of Participating Students
User Group –Parent of Participating Student
Initial Touchpoint – School letter regarding assessment
Prior NAEP Experience – None
Assessment Mindset – May be concerned about standardized assessments
Goal – Protect child from negative experience
Processing level – High level only. Little tolerance for statistical minutiae.
Journey Map

Step 3: Navigation Attractors

Each group had a different goal in mind when using the NAEP website, and some users might have multiple touchpoints throughout their NAEP-related experience. Site content and navigation was tailored to provide immediate identification of desired content and minimize distractions by competing content of no interest.
Mock attractors were used with a stakeholder working group to spur discussion on the transition from a label-based navigation system to one that is based on the needs of users.
Mock Attractors

Step 4: Navigation Structure

Multiple common elements were used across the site to give the users a consistent experience and support their awareness of where they were within the information architecture.
Some tasks that users were expected to complete would take them from one content category to another. In a simple website, one can design the site around these tasks so that there is no "cross-category" navigation. Too much of the content on this site is used for different tasks performed by different user groups.

in this case, we made two things very clear to the users:
  1. How to get to the next step in the task they are performing, and
  2. Where the next step in that task took them to, relative to the overall hierarchy.
The key common elements in the website are a global navigation bar, consistent linking mechanisms to lower levels in a content category, and cross-category links in a context-dependent sidebar.
Common Navigation and Information Elements

Step 5: Mobile Navigation Structure

Mobile can be even easier to ensure consistent navigation and information elements, because the reduced size imposes constraints on the number of different mechanisms that are usable on phone-size devices.
That said, global navigation and cross-category sidebar navigation were implemented using sliding menus. Key to their successful use is the ubiquitous availability of their triggers, and incomplete coverage of the body of the current page. This reinforces their functional nature and doesn't lead users down a rabbit hole of links that require overuse of the "back" function.
Mobile Global Navigation Bar
Mobile Crosslink Sidebar