Yellow Decorative Tape

NCES Redesign

Improving UX through streamlined navigation, clear typography, and a modernized color palette.

View Prototype
NCES Homepage and College Navigator Screens

My Role

UX & UI Designer


4 weeks
February - March 2023


Figma & FigJam
Google Suite
Adobe CC

The Problem

The National Center for Education Statistics is the primary entity responsible for gathering and analyzing data on the condition of the American Education system. However, their website is unusable in its current state. The site ID doesn't return you to the homepage. Clicking on the hamburger menu icon closes the menu instead of opening it. The navigation bar is hidden. Pages are cluttered, unorganized and overwhelming.

Original NCES Homepage

The Solution

My goal is to create a website where users can easily access educational data. The website should be organized, unobtrusive and a pleasure to use.

NCES Homepage on Laptop

The Starting Line

User Persona

Monica Clark, User Persona

User Path

Monica, a high school social worker, is looking to review data on the dropout rate of high school students in order to compare her student’s performance in comparison with the United States overall. This will help Monica to identify the gaps so that she can proceed with providing her students with the necessary resources.

In order to determine opportunities on the current NCES website, I identified the following user path to perform user tests.

National Center for Education Statistics Homepage
Annual Reports
Topical Studies
Trends in High School Dropout and Completion Rates in the United States Report

I conducted user tests with 2 subjects on both the existing mobile and desktop versions of the NCES website. These tests had a 0% success rate. Neither user was able to figure out how to open the current navigation. One user even accidentally left the NCES site while trying to return to the homepage. They clicked the site ID, and it took them to the IES homepage instead of NCES.

Evaluating the Existing Website

Heuristic Evaluation of NCES Website

In conducting a heuristic evaluation of the current website's visual design and organization, I determined that it could benefit from some modernization. The color scheme is minimal, but lacks contrast in areas making some elements of the website difficult to locate. Additionally, the pages should be simplified to improve the scan-ability of lengthy pages.

Determining the Scope

Card Sorting

Card Sorting Phase 1

I conducted 3 rounds of card sorting using digital sticky notes in FigJam. I started with the current items on NCES' navigation unsorted and then continued to organize each item into groups until I felt that each section would be clear to a user on the website. Also through this process, I visited each link on the existing website and removed anything that weren't being regularly maintained or utilized.

Re-navigating the Website

Proposed Sitemap of NCES

After 3 rounds of card sorting, I labeled each section and created my proposed site map. I used this new site map to create my initial low-fidelity prototypes.

Developing Solutions

Low Fidelity Prototypes

Low Fidelity Desktop PrototypeLow Fidelity Mobile Prototype

Using the existing yellow NCES logo from social media as my site ID and my proposed site map, I created the initial low fidelity prototypes of this redesign. My hopes were to make the mobile site more modern and easier to navigate. At this point in the process, i hadn't learned how to utilize atomic design within Figma and was working harder not smarter. My interactions for navigation were with overlays rather than variants at this point; which was a tedious process that didn't allow for easy iterations.

A/B Testing

A/B User Session over Zoom

I continued to tweak the visual design of my prototype and developed two versions of the site ID. Before iterating to high-fidelity I met with classmates to get feedback on both versions of my prototype. Feedback was generally positive– users were able to locate things without issue. I asked users which of the two site IDs users preferred and they noted preferring my second design from the A/B test. I proceeded with iterating on the second version as a result.

Finetuning the Experience

Post A/B Testing Iteration

Post A/B testing, I iterated using version B of my prototype. First updates included removing the darkened overlay behind navigation on hover to reduce the jarring effect and adding a highlight above the selected section of navigation.

I further iterated on the layout of the homepage, including:

  • Adding a section to feature key reports
  • Increasing the size of the hero space
  • Adding a space on the footer for social links
  • Establishing and implementing the primary color palette

UI Style Guide

UI Style Guide

I started with a mood board where Ui determined my general color palette and inspiration images for the vibe of my high fidelity website. From there, I further iterated and developed the visual identity for the new site, including fonts and iconography. I found the NCES logo on social media (which they weren't using on their website) and made color adjustments using Adobe CC so that it can serve as the site ID. Most importantly-- I learned how to implement atomic design in Figma and was able to quickly iterate each element.

5-Second User Testing

users tested
desktop tests
mobile tests
success rate

I conducted two quick 5-second user tests of my final prototypes after iterating. One user took a test on mobile; one user took a test on web. Each user’s goal was to locate the “College Navigator” page using navigation. These tests had a 100% success rate. Both users were able to quickly locate the College Navigator page without assistance.

High Fidelity Prototypes (Mobile & Desktop)

Hi Fi Desktop PrototypeView Mobile Prototype

What's Next?

What I learned:

What I would do differently:

What I would do with more time:

NCES Mobile High Fidelity Screens on iPhone