Department of Education Website Redesign
Improving the user interface design, information architecture, and responsiveness of a government website
THE PROBLEM
PROPOSED SOLUTION
The US Department of Education is committed to providing every child with a quality education. Unfortunately, their website is outdated, unattractive, and hard to use. It is essential that the site be efficient and accessible for anyone who visits it seeking information.
A review and analysis of the current website, as well as a complete redesign of the information architecture and user interface. My goal was to redesign the UI so that the site becomes a beautiful, easy-to-use resource that feels less like work for users.
TIMELINE
2 weeks (June 2019)
MY ROLE
Lead UX/UI Designer (individual project)
TOOLS USED
Adobe XD, Invision, Trello
USER INTERFACE ANALYSIS
The US Department of Education website is an important resource for educators, parents, and especially children, but these users don’t gain any benefit from a website that is difficult to use. If the users can’t find or access the information they need, they can get frustrated or even miss opportunities for learning about educational resources and funding.
I analyzed and annotated the following pages from the website:
-
Home
-
About
-
1098, tax forms
-
Every Student Succeeds Act
-
Betsy DeVos
-
Press Releases
-
Student Loans, forgiveness
USER RESEARCH
I also interviewed a few users to get a sense of how different people interact with the site. My own site analysis, coupled with this user research, led to the following insights:
​
The site is resource-heavy but lacks an information architecture that is intuitive for users to find what they need. There is a search bar, but it provides no suggestions or help for those who aren’t sure what they should search for. The alternative is to browse the homepage to find the correct information. Unfortunately, the homepage is covered with text that is mostly the same size and color. This lack of hierarchy and readability makes it very difficult for users to navigate the site.
​
Aside from the poor information architecture, the Dept of Education website is ultimately dated and has a “boring government” look and feel. I wanted to redesign this site to make it a more useful and delightful resource for the educators, parents, and young minds it strives to help. Government websites often have the reputation of being old, dull, and no-frills, but that doesn’t mean they have to be depressing or unusable. With these initial findings in hand, I organized my thoughts in an affinity diagram and created user personas.
USER PERSONAS
I made two user personas to represent the two main types of users that would be navigating the Dept of Education website: a teacher and a parent.
HEURISTIC EVALUATION
Looking more closely at the existing website with my users in mind, I performed a heuristic evaluation and did a task analysis of the search process. Overall, the site was not intuitive to use and looked dated. Upon closer inspection, I found that the menu was confusing and the only way to know what a link meant was to click on it, thereby navigating to your destination through trial and error. The site was very text-heavy and hierarchy was not clear. There were several sections of links on the page, but with no real indication of where the user should look first or how they should use the page.
IA CARD SORTING
The existing website had a lot of links in disjointed sections and menus, so I used card sorting to reorganize the links in a more intuitive way.
Many of the headers had unclear titles, making it hard to predict what could be found in each menu item. Using Trello, I sectioned all 53 links into six main categories and renamed them using more user-friendly language. I predicted that certain categories would be more trafficked than others, so the next step was to lay out the page and make sure all the information could be displayed in a clear and simple way.
SITEMAP
Using this organizational system, I created a new sitemap.
SKETCHES & WIREFRAMES
Next, I sketched out a few screens I wanted to redesign. I made these into wireframes on Adobe XD and created a prototype to test.
STYLE GUIDE
I identified the brand voice of the Department of Education and created a style guide to direct my UI design decisions.
RESPONSIVE MOCKUPS
Using my style guide, I translated my wireframes into high-fidelity mockups. I made the designs responsive for tablet and mobile, which was something the original design lacked.
USER TESTING
I tested my prototype with 5 users and compiled some actionable design changes from the feedback I received.
USER TESTING
I tested my prototype with 5 users and compiled some actionable design changes from the feedback I received. The tasks I had them complete and key takeaways are as follows.
TASKS
-
First impressions of homepage
-
Perform a search
-
Find information about the Every Student Succeeds Act
-
Find and download the 1098-E tax form
-
Contact the Department of Education
TAKEAWAYS
Generally positive responses with a few suggested changes:
-
Secondary menus (Loans, Grants) can be simplified to main header because everything can be found on one page
-
Add card with phone numbers, addresses to Contact Us page
-
Align “More” buttons at bottom of homepage
ITERATION
I iterated on my mockups, taking into account the results from my user testing and making changes where necessary.
I took out some of the secondary menus (such as those under Loans and Grants) because the items found under those headers could actually all be found on one page, therefore did not need to be separate menu items.
I added a card to the Contact Us page that had phone numbers and office addresses so that users could contact the department in other ways.
I aligned the “More” buttons under the cards at the bottom of the homepage, and realigned the footer so the hierarchy was clearer.
HI-FI DESKTOP WALKTHROUGH
FINAL THOUGHTS
The Importance of Navigation
After trudging through the immense number of links and menus on the DoEd website, it was clear that a navigation redesign had to be a priority. The existing hierarchies were hard to understand, and the users I interviewed had a hard time finding things or knowing where to start. After card sorting and mapping out new navigation, I was able to find a less confusing way to display all the information so that users could easily find what they were looking for.
Responsive is Key
The current Department of Education site is ugly on desktop, but almost unusable on mobile. In a time when almost every adult owns a smart phone and internet traffic is increasingly mobile-heavy, it is imperative that all sites are responsive. I made sure my design translated to mobile easily and intuitively, and created a few iPad screens as well. I also made sure to test these designs on the proper-sized screens to check font and button sizes.
Changes to Style Guide
I created the style guide before I started designing the hi-fi mockups, and while it provided good direction for me when designing, I realized that I wanted to make some changes to the elements as I was designing. Certain things needed to be a different size, looked better with slightly different spacing, etc. I learned that some style decisions might adapt and change while you work. Creating Components in Adobe XD allowed me to easily change certain elements across all my screens and to test out my changes quickly.
