EPA Website Redesign
The United States Environmental Protection Agency
EPA Purpose
Users visit the EPA’s webpage to learn about what steps both the national and local American governments are taking to educate, regulate, and promote the health of the environment and the American people.
Future UI Gole
- Clear and simple for all age of people to be able to navigate.
- Should keep the interest of users so, they feel they want to explore and learn more.
My Role
The research phase was done with the help of two other designers and I did the user persona, card sorting, site map, brand word characteristics, UI guidelines, wireframing and prototyping.
Tools
Adobe XD - Adobe Illustrator - Adobe Photoshop - Lucid Chart - Invision
The Process
Research
Assessing the Current Website
With the help of 2 other designers, a website brand audit was conducted to assess the current brand direction.
First, With Usability Testing, we informed which part of the site is more complicated for the users.
Second, we conducted a Heuristic Evaluation on the current site to point out the present issues in terms of appearance, content, navigation, and efficiency.
Based on the user testing and research, we did the Feature Prioritization Matrix to define what issues are more important for both the user and the EPA.
We categorized the issues that the users mentioned to figure out the main problems that we need to fix.
Problem Statement
From the research phase, we were able to define the problems we wanted to address. A few key problems to mention :
1- The amounts of links that are all over the website and make it hard for users to choose. They don't know which one is useful for them.
2- Some pages don't have access to the home page.
3- log in and sign up are hidden.
4- Choosing a community is not clear.
5- Visual elements need to be more consistent
User Persona
Current Website
Card Sorting
We did the card sorting to invent the navigation of the items. The goal was to become familiar with the website’s current structure and brand identity.
Rebrand
Defining new Structural & Visual Rules
My Approach
Based on the user test I understand that the EPA website is cluttered and crowded and by the huge amount of data and links, it makes the user be overwhelmed and confused. The homepage is unsettled and it seems that it has no specific grid. In some pages, the user has difficulty to recognize how to get back to the home page.
Site Map
I identified the content patterns by the result of the card sorting. I made new groups and made the new categories. I tried to make a sitemap to have a good structure and navigable. Based on feedback from users, there were a few menu items they cared about and everything else could go into page-level navigation. Also, on home page choosing the state was not clear for users and the login page was hidden. So, I tried to make them more reachable on the home page.
I also notified that I need more white space on each page. This website has lots of links and text content and we all know that white space is a great tool to balance design elements and better organize content to improve the visual communication experience.
Brand Word Characteristics
Redesign Solution:
UI Style Guidelines
The mission of EPA is to protect human health and the environment. The UI of the website tries to reflect health, nature, energy and clarity. This website has much more text content than pictures so, I try to have more white space and also usage of light colors with medium contrast to help the user to easily navigate the data.
Wireframes
Based on the usability testing I realized that the login/sign-up is not recognizable for them so, I decided to place the button on the header of the pages and fix the position of them to make it easy for utilization.
Also, I made a button for choosing a state on the home page to make it more defined.
Because this website has a lot of content I tried to have more white space to make it easier for the user to find and read data.
Challenges
- In primary and secondary navigation, this website had a lot of content. It was challenging to make it clear and consistent.
- How to make a website more navigable?
- How to design pages to make them more organized and clear?