dnr-hero-case-study.png

Wisconsin DNR

Redesign Concept

Role

UX/UI Designer, Content Strategist

Tools

Sketch, Photoshop, Mural, inVision

Time

3 weeks

Coffee

18 cups

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 can be made.

Current WDNR homepage as of July 7, 2019.

Current WDNR homepage as of July 7, 2019.

Strengths

  • Design: Much of the site is content and action heavy (reading regulations documentation, purchasing a license, finding recreational activities, etc.), and a minimalist designs helps the user focus on important information.

  • Data: Site uses analytics to prioritize common links, tasks, and news. Great use of analytics and data to show users the most relevant content.

  • Help: Opportunities to contact organization, report problems, and ask for help are prevalent throughout the site. Also provides many ways to get connected with the DNR through different social outlets.

  • Search: Prominent search helps users more efficiently find information they need if it’s not visible. Search is also smart and provides common term/keyword suggestions.

  • Navigation: Main navigation users common words and language. The mega menu provides a friendly visual grouping of information and tasks.

Weaknesses

  • Design: Site design isn’t modern like wisconsin.gov and other Wisconsin government sites, which makes its shortcomings even more noticeable.

  • Accessibility: Receives accessibility score of 50% from Google Lighthouse. Main culprits are insufficient color contrast, illogical tab order, images don’t include proper alt labels, headers don’t follow semantic HTML order, and the user is unable to pause the top carousel of images. Ability to view a “text only” version of the site is hidden on top of the first carousel.

  • Responsiveness: Mobile site design and imagery is different from the desktop version of the app and may be disorientating for the user.

  • Content: Only uses an h6 header, so no clear hierarchy making it difficult to know where to look first on the page. Main content is smaller than 14px and requires zoom to comfortably read.

  • Events: Upcoming events are spread between multiple URLs and aren’t referenced on the homepage.

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.

Search.png

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.

Utility Navigation.png

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.

Feeds.png

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.

Quick Links.png

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.

Feedback.png

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.

Accessibility.png

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.”

Imagery.png

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:

5fee42e2-7bc5-426f-b374-fca13cabfadb.png

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:

dnr-wireframes

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.

WDNR-Medium-Fidelity-shadow.png

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.

Current logo design

WDNR-logo.png

New logo sketches

wdnr-logo-sketches

Color Contrast

  • The current blue and orange colors of the site didn’t past color contrast checks.

  • Wisconsin.gov also uses these blue and orange colors already, and I wanted the WDNR to have a different color palette that allows users to visual distinguish them from the main government site, as well as express their own personality.

  • I chose different tones of green taken from the WDNR logo to develop a simple color palette that passed contrast checkers and could be applied throughout the site.

wdnr-contrast-checker.png

Styleguide

wdnr-styleguide.png

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.