overview

I redesigned the government website belonging to the U.S. Department of Education (ED). Most government websites on the Federal level have recently undergone dramatic, and much needed overhauls. They adopted flat design layouts and attempted to capture a much cleaner, more modern look. While the ED’s new website is certainly an improvement on the old one, it still falls short in the areas of usability, responsiveness, and visual design.

Here's a link to the current website: www.ed.gov

Screen Shot 2017-11-01 at 11.17.20 AM.png

 

Part I: Usability Redesign

1/5

Screen Shot 2017-11-01 at 10.24.46 PM.png

 

2/5

Screen Shot 2017-11-01 at 10.25.11 PM.png

 

3/5

Screen Shot 2017-11-01 at 10.25.35 PM.png

 

4/5

Screen Shot 2017-11-01 at 10.25.50 PM.png

 

5/5

The original website had a moderately intuitive home page with content that followed a flat design template. The first thing that struck me when browsing the site was poor navigation. It has links to various types of content scattered across the page without any obvious hierarchy, and at the top there are two horizontal nav bars. There’s no reason to split the links up and it seems that one of the nav bars may just be left over from a past iteration of the website. The nav bars help you find your way back in the case of a misclick, but they could definitely be implemented more effectively.

Once you navigate away from the homepage, efficiency of use and memorability become the main issues. All the content is heavily text based and it would be helpful if there were pictures and better organization to help you filter through the information. The lack of organization hampers learning because you have to carefully comb through each individual topic heading in order to find the information you’re looking for. Again, better organization would make it easier to navigate directly to the desired content when revisiting the website

By adding pictures and consolidating related information, I was hoping to improve organization and establish a clearer hierarchy of information. It can be helpful to have visual cues, such as pictures, when searching for information, so I made sure to include more of this type of media. Pictures also make websites more engaging, and the topics more relatable, while also conveying information more quickly than written words. I believe such content will increase ease of learning, efficiency of use, memorability, and even subjective satisfaction.

 

Part II: visual Redesign

Screen Shot 2017-11-01 at 10.26.19 PM.png

With the visual redesign, I wanted to make the hierarchy of information more distinct. I used fewer fonts and applied them in a way that would help identify the type and functionality of the related content with greater clarity. I combined the two navigation bars into one and attempted to consolidate related information in a more organized manner. The website is cleaner and more streamlined, and users are able to navigate the website and identify pertinent information more efficiently.

 

Part III: Making it Responsive

Screen Shot 2017-11-01 at 10.26.32 PM.png

 

Desktop

Screen Shot 2017-11-01 at 10.26.41 PM.png

 

Tablet

Screen Shot 2017-11-01 at 10.26.53 PM.png

 

Smartphone

Screen Shot 2017-11-01 at 10.27.09 PM.png

 

As the screen grows increasingly narrower, the content begins to stack and less important or repetitive information is deleted. The mission statement, while well intentioned and inspiring, isn’t critical to providing relevant information to the user, so it’s the first to go. The clickable pictures lead to pages that can be accessed through the nav bar, so they don’t make it onto the mobile phone platform. I think some people respond better to pictures than text, which is why I decided to include repetitive links, but they aren’t necessary for the functionality of the website. The content stacks and resizes in order to maximize visibility and deliver full functionality to the user regardless of the size of their device.