United States Environmental Protection Agency (EPA)

Standard Desktop Website Prototype

View Prototype

I. Introduction

February 2020 - March 2020
The Project

The United States Environmental Protection Agency (EPA) serves to protect human health and promotes environment friendly objectives.

While attending Georgia Tech, I worked on a small team as the UI Designer, and was tasked with creating an intuitive navigation design system for their website.

  • Personas
  • Flow Diagram
  • Accessibility Analysis
  • Market Research
  • Wireframes
  • Prototypes
  • Sitemap
  • Style Guide
  • Visual Design
  • Color Styling
  • Hero Animation
  • Iconography
  • Typography
The Problem

The U.S. Environmental Protection Agency (EPA) initial website design causes confusion due to unfamiliar terminology and immense broken links. There is also a lengthy navigation system that brings users to multiple pages before finding their target pages.

Tools Used
  • Adobe XD
  • Miro
  • Trello
  • Flowmap
  • Adobe Photoshop
  • User Interviews
  • User Surveys
  • Pexels
The Solution

Incorporate a simplified navigation system that minimizes user confusion and decrease the button clicks needed to access target pages to enhance the accessibility of the EPA website.

II. The Design Process

1. Discovery

My team conducted background research on EPA to further understand their purpose. We navigated through the current website and created a Proto Persona from our gathered user insights and the site's accessibility frustrations.

2. Research

I conducted Usability and Heuristic Evaluations on five select user interfaces, as they best display the purpose of the site. We conducted user testing to find issues with the current design and created an Affinity Diagram and 2x2 Matrix to organize user insights and develop a User Persona.

3. Definition

After conducting user research, I identified the website's core problem and noted our website redesign should prove valuable toward users as it will ensure an empathetic navigation design. Doing so will minimize confusion and highlight the purpose of The United States Environmental Protection Agency (EPA).

4. Ideation

Together, my team card sorted to prioritize the site's features. After, I created a Mood Board and Sitemap, after I sketched and annotated paper wireframes that incorporates the necessary accessibility changes.

5. Prototyping

I created a Lo-Fidelity clickable prototype that simplified EPA's navigation system. I created a Style Guide that formed the basis of the site's visual design and a hero animation that highlights EPA's purpose in the iterated design in a Hi-Fidelity prototype.

6. User Testing

I conducted user testing and analysis on seven individuals that matched the profile of potential users. I wanted to see if the redesign decreased the functionality and accessibility issues present on the current EPA website.

III. Conclusion

Future Implications

The website redesign simplified the navigation system and incorporated laymen terminology, thus decreasing the length of a user’s search. One future goal is to incorporate more pages from the current website to my redesign.

Latest Work

Check out my other recent projects!

Let's work together and transform your design concepts into reality!

get in touch now