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:
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.
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.
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.
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
Likewise
Redesign
Amazon
Redesign