Department of Education
Agency Website Rebrand and Redesign - 3 weeks
The DOE is a government branch that establishes the policies and regulations to ensure that the children of America can be competitive in an increasingly global economy.
It ensures that schools are in compliance with departmental policy, receive assistance as necessary and aims to ensure all students have the opportunity to achieve excellence, are ready to compete in the global economy and to make sure they have access to an equitable education regardless of their personal background.
MY ROLE
UX Designer, UI Designer, Information Architect
This project is one of a few that I have worked on during attending a design bootcamp between November 2017 and April 2018. I worked on this project as a UX Designer, a UI Designer, and Information Architect.
This project was a solo case study so I took on full responsibility to define issues with the current website, redefine the brand and the brand voice for the website, reorganize the website, and finally make it appealing and attractive to users.
Current Website
Spotting the Issues
After speaking to teachers and students, I have discovered the following issues on the current website:
The navigation bar options and the card links are redundant
There are a lot of text blocks, which look overwhelming and boring
It is hard to navigate the site and find desired pages
Unnecessary links are given priority on the homepage and there is no clear pattern for hierarchy
The overall look of the website is outdated and unattractive
The logo does not completely reflect the brand voice of DOE
The brand of DOE is not clearly reflected in the website
Desktop Version
Tablet View
Mobile View
Organization
Features, Functionality, Benefits, and Priority
I have created a chart to sort the features needed for the website using Google spreadsheets. This chart shows the features that users will be viewing when they visit the site, the functionality of each feature, the benefits of having each feature in the website, and priority of building each feature.
Information Architecture
Whiteboard Sketches
Digital Wireframes
Brand voice
Styleguide
Logo Redesign
The first brand voice portal
Although it is not the official DOE logo, the photo on the left is displayed on the website as the logo of the website. It clearly does not reflect the brand voice. The logo on the right is designed to express the brand voice of the Department of Education. The book is representing knowledge and education, while the tree is representing growth. The colors are carefully chosen to compliment personality, tone, language, and purpose of the website. The navy blue is a color that represents knowledge and trustworthiness.
Hi Fidelity Mockups
Final product
I have created the website to be responsive and usable on web, tablet, and mobile. I have used the 70-20-10 color theory rule and chose to use more of white space to decrease tension and to better organize the website.
Reflections
I learned that UI and UX are inseparable. While UX is crucial for user retention rate, UI is critical for user attraction; especially first timers. working on rebranding and redesigning the DOE website, I was mostly focused on the UI and the organization of the website. From talking to potential website visitors, they were repulsed and overwhelmed that they had given up long before they find their desired page.
