Justin Wong

Endangered Species Program: Website Redesign

Preface

The USFWS Endangered Species Program is a government agency that administers the Endangered Species Act (ESA). Its primary responsibility is the conservation and management of fish, wildlife, plants and the habitats.

The Problem

The Endangered Species website featured an outdated UI interface and a confusing network of navigation patterns and practices. The site’s drab color palette detered incoming visitors from exploring, and the site lacked Responsive Web Design.

1. Research

Heuristic Evaluation

My partner and I first set out to truly understand the inner workings of the site. We carefully perused each section examining the layouts and navigation patterns in place while carefully documenting our findings.

Usability Testing

Additionally, usability testing was employed for a fresh set of eyes to highlight problems that we may not have encountered or anticipated.

Assessment

The site possessed many redundant links and an overabundance of information. Large walls of text inhabited every page. The aesthetic approach of the current site lacked interest, visual appeal and coherency. Common complaints amongst testers highlighted how unappealing and uninviting the site felt.

2. Re-envision

Establishing a new hierarchy

Navigating the site was a major pain point and needed to be addressed above all else. We set out to reorganize and simplify the navigation into digestible chunks. Card Sorting was first employed to understand the current hierarchy before a newly constructed sitemap could emerge.

3. Design

Color Palette

To combat the drab tone of the original site, a more vibrant color scheme was employed to reflect the earthy tones of the outdoor environments where life flourishes and yet encompasses a serious tone.

Typography

Helvetica reflects the clean and ordered nature of a government website that ultimately serves to be informative and proper.

Crimson Text delivers a more illustrative, classic look that still can be described as “educational”.

Buttons

Warmer color scheme for buttons allows for better visibility against the cooler backgrounds.

Photography

Imagery is an integral part giving context to sections with large hero images and life to previously text-heavy pages.

4. Prototyping

Low Fidelity Prototyping

Lo-Fi exploration first involved revamping the current navigation into a more modern layout for better viewing and flow. Iconography sometimes replaced lengthy text links. Global navigation was added to address users’ confusion when traveling to sister sites.

Redundant links were removed to reduce clutter leaving just the essentials as exemplified in the footer. Social media links deserved a place in the footer as they reflect the current standard and enable exposure for a wider audience.

Converting website to mobile

Because the current site offers no RWD (responsive web design), work was put into re-envisioning the site into mobile format.

High Fidelity Prototyping

Finalizing design decisions on the Lo-Fi layouts and navigation allowed for visual design to be applied to a Hi-Fi model. Figuring out the right balance between content information and imagery played a large part in streamlining the experience for both the casual and avid visitors.

5. Reflection

Takeaways

• Accessibility is key. Ease of use and readability enhance the viewing experience and invite users to return for further visits.

• Responsive Web Design is of paramount importance when looking towards the future. Considerations need to be taken for the increased reliance on smartphones and mobile devices in a busier and more travel-friendly future.

Next steps

• Investigate how to further reduce confusion when navigating to sister sites for media or species information.

• Provide a more engaging experience in the “For Kids” page with simple animations embedded within the hero image portion.