The problem:
The U.S. Department of Education website is visually unappealing and difficult to navigate.
The solution:
I analyzed the website’s information architecture and came up with a new, more logical structure. I also improved the look and feel of the site, to make it more user friendly.
My role:
UX design, UI design (solo project)
Tools:
Adobe XD, InVision, Miro, Trello
You don’t need to be a trained designer to see that the U.S. Department of Education website is in need of a redesign.
The website, which was created in 2002 and updated in 2005, looks dated. If it has been redesigned in more recent years, it’s not obvious. Improving the look and feel of the website would be the easy part. Wrapping my head around the existing information architecture and reorganizing the content would be the challenge.
I began by exploring the website, taking stock of what’s there and redlining issues, including poor hierarchy, design principle violations, broken links, etc.
I conducted a heuristic analysis of the site and evaluated accessibility through screen reader and color tests. The website fared poorly across the board.The following color combinations found on the site failed to meet required contrast levels.
After many hours of exploring the website’s many, many pages of content, which were often difficult to find, I performed an open card sorting exercise with the goal of reorganizing the content in a more intuitive way.
I created a new site map reflecting my card sorting work.
After sketching out ideas for different page layouts I made low-fidelity wireframes, which I prototyped to gather user feedback.
I tested my prototype with three people (plus my dog). Based on these user tests, I increased the leading between my secondary navigation items, which were difficult to click on. I also put the searchable library of grants on its own page, eliminating clutter.
In rebranding the website, I drew colors from the official U.S. Department of Education seal, which I put into the header in lieu of their current logo featuring an ugly lime green color.
Turning my low-fidelity wireframes into high-fidelity mockups was also an iterative process, which involved constant testing and feedback.
My redesign retains most of the existing Homepage content, but features more prominently the dynamic content, such as news and blog posts, which will keep the page looking fresh.
Through user testing with education researchers, however, I learned that people have different ideas about what should be featured there. One person, for example, said the homepage shouldn’t be so news heavy. Yet, another noted that the site primarily directs people to other sites—even to apply for its own grants—so the News and About sections should be prominently displayed.
In conclusion, this round of testing underlined the importance of doing thorough research upfront to understand the user. Who visits this website and why?
