REDESIGN ED.gov
Background
To improve service to and communication with stakeholders and the general public, the Department of Education (“ED” or “Department”) plans to modernize its public facing website. Accordingly, ED is seeking small-scale prototypes for a redesign of ED.gov,
Challenge
Contact Information: Title (Mr./Ms./Mrs./ Dr.): Mrs First Name: Organization Name: IC2
Amy
1609 Taylor Gaines Street, Austin
addsimpson@gmail.com
Email: Facebook:
Twitter:
Last Name: Simpson Position: Senior Student Researcher
Texas
78741
Phone: 512-876-7415 Instagram:
Questions Indicate that the submission includes: Prototypes for six (6) design pages, created in Drupal, Wordpress, Adobe XD, or a similar design application. Wireframes (see “Supporting Information,” below). Mock-ups (see “Supporting Information,” below).
Y/N
Y Y Y
Design details and parameters (see “Supporting Information,” including: open-source CMS used, development language(s), browser(s) supported, mobile compatibility, screen resolutions (including responsive for mobile), operating systems, assistive technologies, and text sizing.
Y
Indicate that the prototypes utilize: Y/N Creative redesign using non-traditional improvements that maximize user experience in terms of form and function. Existing ED color scheme and seal. New adaptations and innovations in color, layout, typography, animation, illustration, video and photography. New technologies and innovative tools, i.e., plug-ins. Clean, simple, modern aesthetic. Easy-to-navigate interface with a quick response time. Integrated social media, video, photography. Compliance with federal standards and website requirements.
Y Y
Y Y Y Y Y Y
Template Prototypes Provide links to the following prototypes. You may submit designs in Wordpress, Drupal, or design applications, such as Adobe XD. 1. Homepage: 2. : 3. Informational page: 4. Grant page: 5. Contact page: 6. News page:
Attach Supporting Information: Please limit total submission, including this form, to a maximum of 20 pages using font sizes no smaller than not be considered. •
Wireframes that present the site layout and navigation.
•
Mock-ups that include the layout and navigation from the wireframes but with brand and site colors, logo, images, content blocks, typography, etc.
•
Other information such as open-source CMS used, development language(s), browser(s) supported, mobile compatibility, screen resolutions (including responsive for mobile), operating systems, assistive technologies, text sizing, etc.
Submit this completed form to Challenge@ed.gov by June 15, 2020.
DESIGN REPORT / DOCUMENTATION FOR REDESIGN OF ED.GOV TABLE OF CONTENTS Executive Summary
2
Vision
2
User Research and Problems with the existing website:
3
Design Strategy and Process
4
Wireframes
4
Mockups
4
Layouts
4
Design System
4
Accessibility
4
The Prototype of the redesigned ED.gov
5
Features overview
5
Navigation
5
Aesthetics and UI
6
Communication
6
Usability
6
Header & Footer
7
Design of the Pages
8
Homepage
8
Program office page
8
Informational page
8
Grant page
8
Contact page
8
News page
8
Mobile Compatibility
8
Usability and Validation:
8
Implementation:
9
Security
9
Speed
9
Supporting Information
9
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
Executive Summary This report describes and provides the documentation for the redesign of The United States Department of Education website (ed.gov) as part of the ED.gov Redesign Challenge. The work enclosed is part of an entry to the competition done by a 3 person team consisting of Amy Simpson, Sai Sashank Macharla, and Radhika Ravindran. It will cover the initial concept of the redesigned website, problems with the existing website, user groups, vision, innovations and design features, details of the technologies used, and a summary of the implementation strategy. The report will also describe the team’s user research, which consisted of an 11-question survey that was sent to a small user pool of the website that included students and educators. The results from this survey were used to concretize and define the problems in the existing website and to understand the preferences, purposes, and expectations that different user groups have from the ED.gov website. The results were used to inform the conceptualization of the redesign to help users find information, resources, keep up to date with news, apply for grants and more in a highly intuitive and easy to navigate way. The report will show some of the redesigned features as is relevant to the section (eg. The navigation on the header and footer section). Since prototype by Adobe XD does not support a responsive mobile view, the report will show a sample responsive mobile view for 3 different screens to give a lucid idea on how the mobile responsiveness works for the resigned website. Besides the mobile responsiveness mockups, the report will also show wireframes and mockups of the desktop versions. It will also discuss the team’s usability testing research, conducted with 10 users, which was used to validate the design choices made for the redesigned website. Finally, the report will discuss the implementation summary of the website’s redesign and touch upon the technical details of the implementation including speed, security, development frameworks, and innovative technologies included.
2
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
Vision The ED.gov website is the portal into the United States Department of Education and has seen over 20 million visits in just the last 3 months. The website is primarily a hub for information and link to information, forms, websites, and resources, which can be vital in assisting someone to begin, continue and explore new avenues in their education and empowerment. The U.S. Department of Education helps Americans create better opportunities and lives for themselves and it has to reflect that on the website. With this in mind, we came up with this vision: The vision for the Ed.gov redesign is to have a website that reflects and stands for the empowerment education can create. This means a website that is modern, clean, engaging, easy to use, and aesthetically pleasing while being secure, accessible, responsive, and fast. This has been attempted through a variety of design strategies and functionalities, along with using some advanced plugins in the WordPress ecosystem. But before we attempted to solve the problems mentioned in the brief of the competition, we wanted to get a first-hand experience of users’ experience with using the current website. Towards this end, we did a quick survey and interviewed some users who are familiar with the existing website.
User Research and Problems with the existing website: Few problems with the existing website were mentioned in the challenge brief. To validate those, and to find problems that may have not been included in the brief, we decided to conduct some user research to understand the pain points of users when they sue the website and how they are rooted in the website’s existing design and user behavior. We surveyed 10 users of the ED.gov website including teachers, students,and university staff and asked about their single biggest pain-point with the website’s use
3
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
Fig. 1 User Research Survey Results for Biggest problem with the existing ED.gov website
Keeping these issues along with the problems mentioned in the design brief in mind, we set out to create a design strategy to address these problems as well as to elevate the user experience of the website to a much higher level.
Design Strategy and Process The strategy for the redesign was very simple and was more focused on maintaining a balance between retaining the familiarity of the ed.gov website, while upgrading it in terms of the information architecture, UI, navigation, and other issues we had found in the user research. We also upgraded the layout and responsiveness of all the pages and implemented the capability to display large sections of media content on some pages. For example, the news page now can display thumbnails of the blog posts and supports embedding videos into the page as well. This can be a feed from the YouTube channel of the U.S. Department of Education. All of the screens and pages have been designed keeping in mind responsiveness, accessibility, and other kinds of standards that the website has to adhere to.
4
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
Wireframes and layouts:
5
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
Mockups:
fig3.Mockup views of the redesigned pages through a laptop browser view
6
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
Design System: To keep the ED.gov website well within the ecosystem of the U.S. Federal Government web
ecosystem, we used the U.S. Web Design System v2.7.0 (USWDS) for the redesign. By using this system, we ensured that the redesign is compliant with the USWDS Design Principles, and support and reflect the important guidance codified in the 21st Century Integrated Digital Experience Act. Accessibility: Accessibility is a key factor that we had in mind when redesigning the website and we have been committed to complying with the standards of section 508 of the Rehabilitation Act of 1973 and WCAG requirements as well while designing our website. For the UI, we made sure that the text and background color contrast ratios were well beyond 4.5:1, the zoom ability on the website is 200% without breaking up the content, which was achieved through responsive design. There is also an emphasis on visual consistency, navigational hierarchy, and tags all through the website. On the functional side, we made extensive use of alt-tags (which describe an image through screen readers), added captions to tables, used closed captions for media, used the ARIA (Accessible Rich Internet Applications HTML attributes) HTML attributes and made keyboard navigation possible for the entire website across individual pages and site-wide. This ensures that the website is accessible to assistive technologies like screen readers and is well beyond compliant with all requirements while maintaining its design aesthetic and delightful user experience. Moreover, The website is accessed by people all over the world, which calls for multilingual support. The redesign will provide multilingual support with the use of a WordPress plugin that allows for the building of multilingual websites in WordPress itself, which doesn’t support it natively.
7
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
The Redesign Prototype This section of the report focuses on the final redesigned version of the ED.gov website and provides a high-level overview of the different features and functionalities of the website. Navigation Within a page: The website uses a completely reimagined and innovative new navigation system for local on-page navigation. The anchor points to various sections on the page are contained on the header of the individual page and users can navigate to the section they are looking for by clicking on the title of the section in the header menu. Most pages on the website are text-heavy and users require help navigating to the section and to the information they are looking for. This kind of navigation helps users quickly get to the part of the website they are looking for, and find the information they need. Across pages: The ED.gov website has a complex architecture and there are numerous links and pathways to navigate from one page to another. In the redesign, we simplified the pathways and limited them primarily to the header and footer navigation bars, with exceptions on the home page and a few other pages where users can use buttons to quickly access certain areas or functions on a different page. Aesthetics and UI: With the majority of the users on the ED.gov website being members of younger age groups, it is vital that the design of the website is attractive and engaging enough in terms of UI and interactions to provide a delightful user experience for the users. While we used the USWDS and the existing color scheme of the website, We used techniques such as gradient fills, shadows for buttons with accordion menus, screen-wide strips to
8
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
make the UI look clean, attractive, and easy to navigate, while keeping it compliant with all the accessibility requirements. Communication: The ED.gov website is a plethora of information and resources, including press releases and blog posts that are constantly updated. All of these elements point to how vital the function of communication is to the entire website’s functionality. We used RSS feed icons, and widgets in the redesign to emphasize on the new updates news and blog posts while keeping the elements clean and well balanced in the visual heterarchy of the pages. Usability: While a lot of the factors discussed above play a key role in affecting the usability of the website, in the redesign, we focused on micro-interactions, clean navigation, and modern UI to make sure the website was usable on multiple levels including on a psychological and cognitive level. The minimization of links clusters, consistency of elements through the website, use of light colors punctuated with dark colors in the UI reduces the choices given to the user, and the hierarchy of information they need to focus on and lessens their cognitive load, leading to better user experience and higher usability of the website itself. Header & Footer: The header is the main element in terms of hierarchy in a website and must house the most important functions that are used throughout the website. For the redesign, we decided to go with a floating header that is aesthetically pleasing, minimal on screen-space, and has a minimal interface with integrated search and language options. Towards the left, we added a hamburger menu that nests all the different links and sublinks of the pages into a single menu. This allows for more familiar users to navigate to the exact pages they want without making the navigation heavy and complicated for a first time user. Furthermore, in text-heavy pages, we added anchor points in a collapsible header that the users can use to jump to specific sections of the page.
9
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
fig4.View of the header before and after collapsing with on-page navigation
The footer of the website has been redesigned visually as well as cleaned up functionally with most of the sub links removed and just the pages of the website retained. We used the blue from the website’s color scheme made into a gradient in line with the most contemporary UI design trends and complemented that with the watermarked grey logo of the Education department. In our user research, we found that none of the users were using the links from the footer to go to the individual sections and functions within a page. For this reason, we removed the sub links nested within the main pages on the website from the footer. Moreover, we added an email subscription widget inside of the footer which was a clickable link earlier. Design of the Pages
1. Homepage The homepage has been completely redesigned with more emphasis on the vision, imagery, and the purpose of the Ed.gov website. The image with text on the screen primes the users about the ed.gov website and the mission of the ED, while providing a clean and aesthetic look to the home page. Users can access the 4 main links from the top navigation bar as well as by scrolling down the page. The secretary of Education’s profile has also been given prominence along with the press release towards the bottom of the page.
10
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
2. Program office page The program office page / U.S. Department of Education Principal Office Functional Statements page is a relatively text-heavy page that, on the existing website relies on the text matter to help the user navigate through it. In the redesign, we organized the text into sections under accordion menus so that it is easier to navigate through it. All the information on the page has been organized under a section with a heading that nests under a subheading pertaining to the topic of the information.
3. Informational page This page consists of the most important information for a student to know how to apply for an educational loan as well as the loan forgiveness programs. There has been a lot of innovation in terms of design and information access in this page - When a user clicks on the section of a loan process step, they are automatically given the details and relevant information for that step and so on. This system would make the navigation, usability, and search for information very intuitive for the users to understand.
fig5.View of the innovative information architecture system that nests relevant information and links within sections
4. Grant page The grant page in the zero state (or in the view that it first opens in) contains a large image to give the user a primer about what is contained on the page. The header is collapsible and contains names of the topics covered in the page (aka ‘On this Page’). This serves as navigation where people can skip to parts of the page that theta re looking for. Moreover, Information such as eligibility and previous funding has been highlighted by strips along with contact and legislation information.
11
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
5. Contact page This page is the point of contact for the users with the administrators of the website and the department. The redesigned page has a header with anchor points to navigate to specific parts of the page, and information about the mailing address, phone number, and FAQ as cards. The links have been changed into buttons to reduce cognitive load and enhance usability. The large sections of text have been nested under headings and categories in an accordion menu on the body of the page. The fraud, waste, and abuse hotline information have been highlighted with the use of color and buttons to take immediate action.
6. News page The news page houses relevant links from 4 different kinds of sources - press releases, blogs, speeches, and media advisories. These four categories have been segregated into sections, and have an RSS feed icon on top to indicate that they are being updated and are live links from their own sources. All these sections are in containers which ensures their responsiveness across different screens and devices. Support for video clips directly from YouTube has also been provided in the redesign - This can be used to showcase speeches and press releases as an archive as well as live on the News Page on the Ed.gov website. Moreover, users can click on the existing links, or on +more to view the entire history of the links, and can use the search bar on the main navigation bar to search for specific news items and speeches as well.
fig6.View of embedded media and videos onto the news screen
Mobile Compatibility According to the statistics on the Ed.gov website, 30% of all users access the Ed.gov website through a mobile phone, and 1.8% through a tablet. With mobile users on the rise, the
12
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
redesigned website needs to be mobile-ready and responsive to different mobile screen sizes in addition to the desktop screen sizes as well. While this specific prototype is not interactive for mobile platforms, We designed a few screens for the mobile view. The responsive nature of the website will adapt itself to any device and screen resolution including all kinds of mobile phones, tablets, and desktop screen sizes as well. The adobe XD prototype link that has been submitted does not support the responsive design of the website because of the limitations in Adobe XD prototype sharing, but the website design will comply with mobile responsive design as shown by the few sample screen designs below -
fig7.Mobile responsive view of the redesigned prototype showing the footer, programs and contact us pages
Usability and Validation: The prototype of the redesigned website was shared and tested for usability scores and feedback with the same 10 users that we had recruited for the initial user research for defining and exploring the problems with the existing website. We received some good feedback from the users and also some test scores from the SUS (system usability survey) which is the most popular test to determine the usability of a website. Here are the results. 13
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
Fig. 8 User Usability Score comparison between the existing website and redesign prototype
Implementation Summary: Security The fact that security is paramount to the ED.gov website and must be given the highest priority is indisputable. Although WordPress provides some level of security inhouse within the WordPress ecosystem, there is a need for additional level fo security and firewalls for the website. Towards this end, the redesign of our website when implemented will be using a popular WordPress plugin called Sucuri, which monitors and protect the site from DDoS, malware threats, XSS attacks, brute force attacks, and to a very large extent, from every other type of attack. Speed A slow website impacts the usability and user engagement of the website to a large extent and is one of the most important things to keep in mind when making the website design heavy with a lot of visual content. To deal with this aspect, we would be using the WP Rocket plugin which is effective in implementing and optimizing WordPress caching settings like gzip compression, page cache, and cache pre-loading. Moreover, features like lazy loading images, CDN support, DNS pre-fetching, minification, etc can be used to further improve page load times, resulting in a website that loads very quickly and drives up engagement, usability, and user experience.
14
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
Supporting Information a. Open Source CMS used: Wordpress, along with Drupal would be used in the implementation of the website. It is the most trusted among the open-source CMS and complies with the requirements of the department in the implementation as well. b. Development Languages: HTML5, CSS, Javascript are the primary development languages that will be used to build the website. While HTML and CSS play a key role in the design, information architecture, and the aesthetics of the built website, Javascript will be used for the advanced animations, functionality and data, content management on the website. c. Browsers supported: The redesign supports all the major websites that drive traffic to Ed.gov. These include Safari, Google Chrome, Chromium-based browsers, Microsoft Edge, Internet Explorer, Mozilla Firefox, Microsoft Edge, and Android Webview d. Mobile Compatibility: The website is designed to be compatible with mobile devices and mobile screens as well. The report has a few screens that show the mobile responsive view of the pages of the redesigned website. e. Screen Resolutions: The website has been designed to be responsive to different kinds of screen sizes and resolutions and would support widescreen (16:9 aspect ratio) resolutions from, as well as older resolutions of (4:3 aspect ratio).
15
REPORT FOR REDESIGN OF ED.GOV CHALLENGE
A SIMPSON | S MACHARLA | R RAVINDRAN
f. Operating Systems: The website is designed to run on the most common operating systems used today including but not limited to Mac OSX, Windows, Ubuntu, Chrome OS for the desktop, and Android, and iOS on mobile devices. While the OS itself might not have an impact on the access to the website, the browsers that run and are used to access the website will depend on the operating system of the devices. g. Text Sizing: Text sizing allows the website to scale and adjust to different screen sizes and resolutions. The website is designed to be responsive and thus integrates text sizing as necessary. The text sizing also follows the standards set by the USWDS. h. Assistive Technologies: There are a few innovative functionalities in the website redesign such as the intra-page anchor based navigation system that would be built with javascript. There would also be Plugins on WordPress embedded into the website for doing specific functions such as performance enhancement, security, etc. The plugins we plan to use include Sucuri for security and to protect against all kinds of attacks, WP Rocket for caching and improving the speed of the website. Seedprod for maintenance issues and leading people to still useful resources while the site is in maintenance mode. WPML for creating websites with multilingual support since WordPress by default does not allow for the creation of multilingual websites.
16