Simplistic Navigation
Responsive Web Design Case Study: California Department of Fish and Wildlife
What does the California Department of Fish and Wildlife website serve to do?
The California Fish and Wildlife website was created to manage California’s natural resources, hunting, fishing, pollution, endangered species, and wildlife habitat destruction. Examples of what the public uses the website for includes the purchase of hunting and fishing licenses, reporting harvest, and obtaining scientific collecting permits.
Ever felt as if you were lost while navigating a website?
As a team of 3 we worked together to understand the business goals, identify user needs, collect and prioritize features, and create the design brief in 6 weeks time. The task at hand was to redesign the California Department of Fish and Wildlife website.
Government websites are often disorganized and offer complicated flows for users to retrieve information. Our solution was to redesign the website’s usability and accessibility issues to improve the user’s experience while interacting with the website.
User Personas
We first created a proto persona: Dan Robinson to reflect the different user types of the product. Exploring the needs and goals of the user helped us understand the aspects of the current website that could be simplified.
Examining the landing page…
We examined current obstacles on the landing page, as well as examining what potential obstacles one could have with either of the user paths using heuristic analysis. We fond that for the homepage specifically there was a feeling of too much information and trying to figure out what was a priority was confusing.
Information Architecture
To evaluate the navigation we used LATCH (location, alphabet, time, category, hierarchy) to understand how the navigation is organized and what needs to be changed.
Preliminary User Studies
We came up with two user paths to explore two different tasks and the different ways you could access the information desired.
User Path 1 is to find a way to “Ask Licensing Question.”
User Path 2 is to find a “Plant Collecting Permit.”
We then gave the users this task
We conducted a series of tests giving the user a task with the mobile and desktop version of the website. The most important parts we wanted to validate was the natural journey for the user with the tasks in mind.
User Test Outcomes
Card Sorting
To better understand how well users understood the website’s navigation, I decided to do card sorting. During the exercise, 3 participants were asked to sort the menu items into groups they see fit. Based on the research, we designed much better navigation, which was well-received by users during usability tests.
Site Map
We looked at the similarities between the card sorting interviews and created a site map we felt best organized the site best.
User Testing Feedback
We created two lo-fi prototypes and used a 5-second testing method with the users to see which version flowed the best.
A/B tests are great to compare which version of a screen performs better. In this case, we wanted to see if the users preferred more or less detail in our layout and their assumptions between using the two for what the website is for and how they naturally navigated around the two.
The users felt that wireframe A was preferred and had the more straight forward navigation and felt more confident on where to click. With this information we created our lo-fi prototype testing the same 2 tasks that we gave the users initially.
Mood Board
To stick with a theme and continuity throughout the website we created a mood board for inspiration of the feeling we would like to convey in the redesign.
Style Tile and Style Guide
We created a style tile and style guide to ensure consistency and to create the mood intended for the user to feel. Every frequently used element such as buttons, input fields, colors, typography was added to be reused throughout the designs.
Lo-Fi Created
3 tasks were prototyped :
• Report harvest > Login*
• Fishing > Sports fishing
• Conservation > Permit & Fees
* users described logging in to report harvests (i.e. game and fish) as their primary task on the web site
The Hi-Fi
Using the design elements that were developed in the UI style guide and tile. Images from mood board, orange as the dominant color and brown as main complimentary color
Findings and next steps:
KPI’s include monitoring how long someone is on the website, how often they return to the website and the pages they return to.
When the wireframes were ready, we conducted a series of usability tests. The most important parts I wanted to validate was the ease of completing the tasks on the desktop and mobile versions. Things we would change for the future as we learned in our latest tests:
• Login button should have been in a prominent position on the web and mobile homepage.
• ‘Report Harvest’ label on component should be renamed to ‘login’, and report harvest should be swapped with where login is currently located as on option.
• A ‘remember me’ checkbox option should have been added on the login in screen.
• Indicator was essential for the mobile design to show left and right scrolling.
• Hover state was confusing for users when they tried to access the menus on the web design, users were expecting to click.