top of page
smartmockups_krwf2t4f.jpg

EPA Responsive UI Redesign

As an individual assignment, we were to choose a government site to redesign the UI of both desktop and mobile interface. We worked in groups for the research but individual for the design and testing aspects of the project.

Members

- Individual 

Role

- Researcher

- UI Designer

Tools

- Figma

- Miro

- InVision

The Process

1

2

3

4

5

Research

Define

Ideate

Test

Develop

Research

We began by conducting a heuristic evaluation of the current desktop and mobile site and 3 interviews where we discovered that users enjoyed the modern feel but still felt outdated. 

From our interviews:

Background

Define

Problem

Usability of the Environmental Protection Agency website lacks user-friendliness, has overwhelming layout of information and its responsive design is not fully functioning. 

How might we... organize the EPA's information and develop a functioning responsive design to develop an improved user experience?

Meet Lyla:

EPA Persona : Lyla

User persona, Lyla, was created based on the answers of our 3 interviews and assumptions on a environmental researcher.

Card Sorting

I conducted open card sorting sessions with 2 participants in which they came up with the names of the main sections of the top navigation. Then I synthesized the results and came up with a final sitemap.

Final Sitemap

Above: updated sitemap

Ideate

Style Guide

I began the design process by defining a style to abide by. I enjoyed the blue and green hues originally determined by the EPA but wanted to deepen them to provide a serious tone and keep the focus on the information rather than the colors.

Style Guide
Style Guide
Style Guide

Lo-Fi Prototype

I began by focusing on designing the layout of both the top navigation and footer while maintaining a modern yet professional feel. For the mobile design, I had a sliding menu and a full screen menu which I conducted quick A/B testing for resulting in the full screen menu being chosen more often so I decided to move forward with that design.

mobile main
dd1
menu open
environment dd.png
footer
home pg.png
research pg-1.png
research pg.png

I then continued by creating a mid-fidelity clickable prototype using Figma. To allow for improvement, I asked 5 people to complete 3 tasks within the prototype. 

Test

Usability Testing

Testing for usability is vital for the improvement of this design. I began by testing the color contrast to assure WCAG compliance. Then I moved to conducting guerrilla-style usability tests with 5 participants with which I was able to refine what users found useful and what could be improved upon. The results of the usability testing were recorded to analyze later on. 

Key Feedback

Positive

  • Nav items are clear

  • Updated, modern feel to website yet professional for the government

  • Nice improvement on information layout - easier to understand

Negative

  • Decrease size of some fonts

  • Fix the top menu to the top as some pages can be long

  • Increase contrast in the phone menu - specially in search bar

Develop

Usability Testing

I continued to make improvements based on the testing as well as reached out to the TAs from our bootcamp for guidance and additional feedback. I created a high-fidelity version of both the mobile site and the desktop site.

Final Product

Video Walkthrough

This is the final product after the iterations with the user in mind; this keeps in consideration the users of the website as well as maintaining a clean and organized feel. 

Takeaways

Challenges

Designing a responsive web page is important as we have already entered a smartphone age and people are always on the go. I often find myself frustrated with pages that are desktop only therefore I enjoy experimenting with both responsive and adaptive designs. Having to prioritize content is important though having to do that in a government site, where it all seems to be important to some people, results in being somewhat stressful.

Maintaining a brand and the seriousness of a government site is harder than having complete creative freedom. When the government’s amount of information is added, it makes it even tougher modernize it and utilize white space and organize the contents.

View Other Case Studies

Nonprofit redesign

Nonprofit

Redesign

likewise redesign

Likewise

Redesign

amazon redesign

Amazon

Redesign

bottom of page