NYS Dept. of Environmental Conservation
Responsive Web Re-Design, June 2023
Using current assets from the DEC website to make a more user friendly and enjoyable site, so users can continue to conserve and protect New York's natural resources and environment.
Overview
The Problem
The DEC would like to get more public involvement on environmental initiatives. The website is very confusing to navigate and text heavy. Users struggle to determine a clear flow on how to complete simple tasks making it a very frustrating experience. How might we make the site geared more towards a general audience?
The Solution
Cleaning up the sites navigation and home page, making the aesthetics more appealing and user friendly. Organizing the sites information to be less intimidating and overwhelming.
Skills
Hueristic Evaluation
Information Architect
Wireframes
Prototypes
User Testing
Style Guides
Responsive Design
Tools
Figma
Adobe Illustrator
Google Suite
Miro
Adobe XD
Product Overview
I selected three main pages to start the redesign: The Homepage, The Newsfeed, and The Fishing Page.
There was a big learning curve to this project as we did not have access to stakeholders. This, paired with the very difficult navigation and organization of the site, made it very difficult to decipher what the goal/purpose of the site was. However, through much investigation I discovered it was really geared towards education and information on regulations and policies.
​
Though I think there really could be two separate user groups - everyday citizens and policy makers - I wanted to focus on making the site more accessible to everyday people. Even without speaking to stakeholders I could see efforts to do this already on the site by including the Twitter feed as well as some of the family-oriented imagery, but found the content to be very difficult to understand, leaving myself and other potential users extremely frustrated. Being that the site was so vast in information and possible user flows, I decided for this project to focus on revamping the homepage and main navigation as well as a path I thought my proto-persona would typically take.
Homepage
Homepage
-
Updated the main navigation to be clear and actionable
-
Decluttered and reorganized current assets to be less overwhelming
-
Updated the UI for the Events Calendar to be more understandable and intuitive
Newsfeed
Newsfeed
-
Added a Newsfeed page where articles and videos can live. (current website only had article on homepage or scattered on different pages making them very difficult to find)
-
Continued promotion of DEC newsletter and and Magazine
Fishing Page
Fishing Page
-
Restructured the fishing home page to be less text heavy
-
Decluttered and removed redundant side menus
Initial Research
Proto Persona
User Scenario
Sean is visiting the DEC website because he loves doing outdoor activities such as hiking, hunting and fishing but he knows that these things impact the environment. Sean is worried about the future of the planet for his kids and would like to do his part in protecting its resources. Sean wants to be more informed on the hunting and fishing regulations so he can continue to do what he loves more responsibly.
User Testing
Goals & Objectives:
-
To Find the pain points in using the current website
-
To gain better understanding of what the user gravitates towards on the site
Tasks:
Testers were read the following prompt: “You are going on a fishing trip and need to understand the regulations mandated by NYS”
Steps:
-
Go to DEC Website
-
Find fishing page
-
Locate fishing regulations
-
Assess Statewide regulations
-
Assess regulations by region
Success Criteria:
User has found and understands regulations and feels confident they have all the info they need.
Results:
Average SUS Score: 51.5
Task Completion Rate: 80%
-
Each user found a different way to try and complete the task and only one of five users' used what I assumed to be the most direct path
​
-
Many wanted to go straight to the search function as they found the site was much too overwhelming
​
-
Site is very “dense”. There is way too much text.
​
-
Main Navigation is unclear
​
-
Users' had difficulty locating where they were on the site
​
-
Seems easy enough on a high level but when you get into the more specific details it is confusing
​
-
Map and graphics need to be updated
​
-
Not good recovery for errors
Site Annotations
Heuristic Score
1
2
3
Very hard to determine intended purpose of site
​
Color and font are consistent
​
Doesn't use jargon but still difficult to understand at a glance
​
Headers are on every page but not easy to go back if error is made
​
Too much info on a page. "Very Dense"
​
Most images convey meaning
​
Links are very obvious
​
Header text is not consistent
​
Headers are very vague (ie. Nature)
​
Help is difficult to find
​
Easy to return home by clicking the logo
​
Lacking white space
​
Not very easy to scan
​
Most of the important content is above the fold
​
Too many links!!
​
Overall way too much text!!
​
Search bar blends in but overall users were able to locate it
​
Information is somewhat organized, but not purposeful
Card Sorting
Card sorting was essential to this website redesign. Not only did it help me gain better understanding of what was on the current site but it allowed me to evaluate what should be considered as priorities for the main navigation categories and subcategories, as well as eliminate any repetitiveness.
​
Through card sorting I determined the main navigation should be divided into 5 categories: About Us, Get Involved, Get Informed, Policies, and Outdoor Activities. I wanted there to be little crossover between categories so it was not confusing to the user which section they needed to look under. I also thought it was very important to keep policies as a clear and separate category so my second user group would have no difficulties locating it.
​
Site Map
Wireframe & Testing
Mid-fi Prototype
I started with a low-fi clickable prototype in order to test the new main navigation I created. I decided to do this in a low fidelity prototype because I didn’t want the colors and other UI elements to distract the user. I wanted them to be able to focus solely on the navigation since that was a major stressor in my previous testing.
​
In my prototype, I used Figma to make the navigation interactive so users could click through all the options before deciding their path. I strived to simplify the design of the previous site, using my learnings from card sorting and overall give the site a less chaotic feel.
Test Results:
While conducting the user tests I was able to discover some room for improvement and correct any interactions that were not working. I tested users on the same tasks I had done in my initial user testing. This time users had a 100% task completion rate. They all used the same intended user flow to accomplish their tasks. I found this to be a great improvement from the initial testing. Overall, testers found that the site was easy to navigate.
​
Initially I choose to use a carousel for my news feed feature. Although the users I tested did not have an issue with this I discovered it is not totally user friendly and accessible to those who use the tab feature to click through a site and decided it would be best I removed it .
​
Key Takeaways:
-
User better understood the purpose of the site and found overall easy to navigate
-
Easy to see all the current events and news, easy to access events
-
There is no way to access the newsfeed not from the homepage - need to add to main navigation
-
Some of the interactions with the breadcrumbs were not working
Updated UI
I wanted the mood of the site to be very happy and inviting, and to be geared towards the everyday person. I maintained an outdoorsy atmosphere through my color story and imagery, keeping imagery light-hearted and bright.
​
I decided to keep the current logo colors as the main colors and added a pop orange color to liven things up.
​
I looked at nature patches and botanical card fonts to keep everything cohesive and on theme.
​
For UI patterns I decided to take inspiration from other environmental organizations that I felt were successful based on a heuristic evaluation. I chose these sites because I felt they may have a similar goal or be possible competitors for my agency but were likely to have more funding or be more up to date than a government site.
Moodboards
Style Tile
Responsive Prototype
Homepage
Newsfeed
Fishing Page
