Reframing Information Architecture
The Team: Berta Oliveira (UX Research), Nate Jolley (UX Research, UI Design)
The Solution: To design a fresh responsive website that updates the user interface and introduces a new information architecture (IA) to improve site navigation and content organization.
My Role: Research, Wireframes, Usability Testing, Prototypes
The Problem: ED.gov is described as “out of date” and needs a redesign to make it current. The information architecture also needs to be refreshed to improve content clarity.
The Tools: Miro, Adobe XD, Usability Hub, Zoom
Current Homepage Testing & Analysis
We conducted six usability interviews to gather feedback on the current website and discovered that while people believed that ED.gov looked official they also felt the website looked dated and needed to be refreshed.
Participants in the interviews struggled to find content and were confused between financial aid options, particularly the difference between searching for grants and those looking for student loans. Some participants didn’t readily know the purpose of the Department of Education and felt its mission statement should be moved up on the homepage.
We performed a heuristic analysis evaluation to see how user friendly the website was. We discovered that:
Some elements failed accessibility color guidelines.
The three navigation levels on the homepage detract from the content and cause confusion.
The use of abbreviations instead of full program names or laws creates a situation where site visitors have to click a link to discover if it’s the right resource for their need”.
Card Sorting
We employed a cart-sorting technique to discover the site’s Information Architecture (IA). We used Miro.com to collaborate while reviewing the site and created a digital stack of cards based on the site’s content. Based on our review, we created several content-based categories. Each card was then reviewed and assigned to the best-fit content category.
During the review process, we discovered that the use of acronyms for laws and programs was common throughout the site. We also discovered that some primary content, such as K-12 resources, was hard to find; effectively buried deep within the site.
Sitemap Redesign
The results of the card sorting created the framework on how to categorize the content. We were also able to use the results of the card sort to provide a reference point on which to build out the new sitemap. Originally, the sitemap included two navigation menus but after discussion we eventually pulled all content together under a single navigation.
Other Improvements to the sitemap included:
Removing utility menu and brought all content under a single menu
Renaming some menu items for clarification
Re-organizing content under menus
Classifying content so that it is easier to find
Sitemap Version 1
Final Sitemap
Lo-Fi Wireframes & Guerrilla Testing
In our designs, we changed the navigation system around dropdown menus and introduced a hero section to focus on the main aspects of the website. We also moved the mission statement further up the page to clearly state the purpose of the Department of Education.
After completion of the lo-fi wireframes we conducted a Guerrilla test of the homepage to quickly gather some feedback on the direction of our designs and received responses such as:
"I notice that loans are front and center.”
“The menu makes sense.”
“I thought loans and grants go together?”
“One thing that threw me off - I didn’t know there was more below the fold.”
Adding Some Style
With wireframes in hand, we analyzed the self of the Department of Education and determined that the color scheme represented in the seal was ideal of our design. Additional style choices include:
Roboto Slab & Roboto fonts for their reputation as both classic and reliable
The font sizes for heading and body text
New icons were selected including a new grad cap icon
Button styles and yellow background to signal a clear call to action (CTA)
UI gird layout specifications
Creating the UI
Once we had created a solid design, with a style guide and lo-fi wireframes, we prepared hi-fidelity mockups and limited-interaction prototypes. These prototypes were then used to perform then used to perform iterative user testing. User feedback, including a five-second test on Usability Hub, helped spot areas of improvement for the UI. The test also confirmed the favorable opinion participants had of the designs. In particular, the test demonstrated that user recognition of the site’s objectives increased significantly over the current design.
Key Takeaways
Information Architecture (IA): Information Architecture is foundational in all good site design. Developing the IA was, therefore, the essential and informative first step before we did any site design.
Be aware of contrast. After receiving feedback from users, we made changes to improve contrast issues in both the original site as well as our initial, new designs.
Typography matters. In an early prototype, we used a Serif font for body text. Through feedback from usability testing, we learned that using a Roboto typeface improved readability.
Adjust spacing. Early usability testing highlighted the need to increase spacing between certain design elements to make the site more accessible.
Improved Sitemap. Usability tests showed users appreciated updates to the site map and navigation.
Excessive text. The Department of Education site contains a lot of information. Even with the improvements we made in accessibility and usability, there is still too much copy on many pages.