Improving UX through streamlined navigation, clear typography, and a modernized color palette.
View Prototype
UX & UI Designer
4 weeks
February - March 2023
Miro
Figma & FigJam
Google Suite
Adobe CC
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.
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.
.png)
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.
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.
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.
.png)
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.
.png)
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.
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.
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.
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:
.png)
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.
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.
.png)
