Wisconsin DNR

Redesign Concept

The Wisconsin Department of Natural Resources (WDNR) works to conserve and manage Wisconsin’s natural resources, including wildlife, fish, forests, endangered resources, air, water, waste, and more. This project was a redesign concept of the WDNR homepage over a 3 week period.

UX Deliverables: Usability analysis, competitor analysis, content strategy, site map, wireframes, prototype

Challenge

As an avid hiker and supporter of environmental issues, I use the WDNR site often and wanted to give back to the organization by creating a new UI of the homepage that improves overall user experience. The current WDNR is difficult to navigate with no clear visual hierarchy, and the design doesn’t showcase their fun, community-driven personality.

From my experience working in a government agency, we often have to do large projects with limited people, time, and budgets. And sometimes, policy changes can scrap a new project or change its direction altogether without warning. I wanted to practice how to adapt to these situations as a UX team of one, so I gave myself a 3 week deadline and focused less on documentation and more on research and creation to make progress fast.

Usability Evaluation

As a starting point, I conducted a usability analysis of the current site to bring its different strengths and weakness to the surface, and also to begin understanding what improvements could be made.

Key Takeaways:

Based on the usability analysis, I decided the 3 key focus areas of improvement that provide the most value would be accessibility, content strategy, and visual design:

• The WDNR site is on the right track with its minimalist design and use of analytics to provide users with the most important information first. However, the lack of content hierarchy both visually and within the code makes it difficult to even find that important information.

• As an organization, WNDR also strives to encourage and promote the community to get outside and enjoy the Wisconsin outdoors through events, social campaigns, and educational opportunities. But the design hides those promotions behind clunky carousels and small imagery — there’s also no way to find upcoming events without using search.

• Accessibility is also a major area that can be hugely improved so everyone can use and benefit from their site.

Competitor Analysis

I chose 3 different DNR sites from around the country that exhibited relatively strong design, content strategy, and accessibility: Massachusetts Department of Fish & Game, Indiana DNR, Texas Parks & Wildlife Department, and Montana DNRC. Below is an analysis of the common features that made these sites stand out from the rest. I used these different features as benchmarks to help define what would help make the WDNR redesign successful.

Advanced Search

The searches that stood out the most are the ones that included a list of popular terms, keywords, and/or filter options for the user in order to reduce the amount of time it takes them to find what they need. Searching can be arduous and cumbersome when it comes to navigating a content-heavy site like the DNR.

Utility Navigation

Many of the sites include a utility navigation that links to the primary state website and other secondary actions. This helps demonstrate the hierarchy of how the DNR sits within the larger, public system of the state’s government — it also provides another layer of navigation for those who might land on the site via Google or another government site.

Feeds

Similar to the WDNR, all of the sites promote community and use events, news, and social media to keep folks and informed and bring them together. All of the sites but one display feeds from these various sources to promote events, and encourage people stay connect and explore the outdoors.

Common Tasks & Quick Links

Another defining feature of these sites was how users can see a list of the top actions most users are looking for under the header “I want to…”. This helps reduce the amount of time it takes to determine which area of the site they should navigate to in order to complete a particular task.

Feedback

Most of the 4 sites make it easy for the user to provide feedback on the site to help identify and eliminate any problems.

Accessibility

Indiana DNR is the only site that provides accessibility tools and settings (and they’re seriously amazing). Within the footer, they allow users to change contrast settings, font size, switch to text only, translate languages, and the ability for site content to be read aloud. Unlike the DNR, these tools are easy to find and interact with.

Imagery

Because DNR sites are so content heavy, it was common amongst all the sites to use images sparingly but with purpose in order to grab attention or provide an educational context. Generally they include hero image(s) with a call-to-action that relates to a relevant/seasonal task. For example, “Buy a fishing license.”

Content Strategy

I created a sitemap of the WDNR homepage that includes changes to content and incorporates features inspired by the different strategies competitors used to meet the needs of their users. Below is an annotated version of the sitemap:

Summary of changes:

• Navigation:

  • Menu items are in the order of priority starting from left to right.

  • Changes “Get Connected” to “Get Involved” to more accurately describe the sub-categories of career and volunteer opportunities.

  • A dropdown menu with the title “I want to…” as another avenue where users can find common tasks and top actions.

  • Adds a utility menu that links to wisconsin.gov to demonstrate the hierarchy of the organization within the government system, and provides another layer of navigation for outside users.

  • Adds a hidden menu beneath the title “More…” in order to hide items if/when the menu becomes too long. This is a common pattern used on content-heavy sites (Example: BBC, Texas Parks & Wildlife).

• Content Sections

  • The current site places Air Quality under popular links, so I wanted to make this a visual element that users could see at all times for quick access.

  • Adds the ability to gather feedback from the user to gauge the usefulness of the page.

  • Adds feeds for both upcoming events and latest news to increase visibility.

  • Changes the header “Quick Tasks” to “Quick Links” because it contains a mix of common tasks and popular content.

  • Adds the header “Activities & Programs” to the last section of the current site. This section is meant to promote various educational programs, volunteer/career opportunities, and activities.

• Footer:

  • Adds accessibility tools to the footer and other helpful links for quick navigation when users reach the bottom of the site.

Wireframes

I started to conceptualize the sitemap into wireframes to determine how to display content and explore visual elements. Below are some initial sketches:

After I felt like I had some pretty solid ideas of the homepage, I put together a medium fidelity wireframe to get a better understanding of how real content might work in these different UI elements. I started with a grayscale mockup because I’m one who’s easily distract by color, design, and those other fun bits.

Key Takeaways

I talked with a couple design and developer peers about the above wireframe, which caused me to make a few changes which you’ll see in the final prototype:

• I replaced the utility menu navigation with the WDNR’s social links, because making connections with the community is really important to the WDNR and something that’s consistent in their original design. I wanted to carry that through in this redesign concept. Users can find these social links both in the utility menu and the footer.

• I replaced the image carousel in the header with just a hero image after reading more research from the Nielsen Normal Group about the pros and cons — their inefficient to scroll through, an accessibility liability, and if the first image isn’t compelling most users won’t scroll through the rest.

• Added the search input in the hero image to make it more of a focal point of the page. And because this is a pattern on the wisconsin.gov site, users coming from that site may already be familiar with this design.

Visual Design

Because I’m a logo nerd, I started the visual design process by exploring new logo concepts. The current feels outdated, complicated, and too busy — it’s difficult to identify the design the smaller it gets, so I wanted to make sure the new logo was easy for user to identify.

In the sketches below, you can see I started by capturing the essence of the current logo by fusing trees and the letter “W” in different ways. Ultimately, I decided to move forward with the design that places the tree inside the state of Wisconsin shape. You can still identify that “w” shape in the overall shape as well. I think this concept does a great job showing how the WDNR represented the whole state, as well as showcasing their mission of protecting Wisconsin’s natural resources.

Color Contrast

New logo and style guide

Making design easier with automation

As I started to put together the high-fidelity prototype of the homepage, I knew I wanted the hero image to have a torn paper effect on the bottom to communicate a more rugged, outdoor feel. Because this would be difficult for site owners, designers, or content editors to replicate on a regular basis, I automated this process with a stamp effect in Photoshop. Users simply need to import an image into the file and voila! They have a new, super cool hero image.

Prototype

Below is the prototype of the WDNR homepage that puts all of this research and design together!

I accomplished my goal of using a more lean UX approach to designing so that I could practice moving through this process in environments where people, time, and money are limited.

This design obviously requires user testing beyond the competitor analysis, initial usability testing, and feedback from my design and developer peers. Next steps for this project would be to test this prototype with a minimum of 5 users to gather insights on what additional improvements can be made.

Thanks for reading! Happy designing.