Website redesign

Tonto National Forest

My Role

User Research, Design, & Testing

Tools Used

Sketch, Adobe Illustrator, Kardsort, Invision



The Problem

The Tonto National Forest is not user-friendly and is not responsive. Basic tasks are difficult to complete and specific information is difficult to find.

The Solution

Redesign the website to be more user-friendly, easier to navigate, responsive, and more visually inviting.

A long green arrow that slides in from the left

User Research

Analytics | Testing | IA | Pain Points | Personas


  • Most users (30%) were coming for recreation purposes

User Testing

  • Usability was problematic
  • A few tasks were rated 'easy and simple'
  • Several tasks were 'difficult or incomplete'
  • Extract additional information about the home environment and lifestyle from adopters from the start

IA Card Sort

  • Several categories needed to be consolidated
  • A few categories needed to be changed or eliminated

Click to View Research Details

Navigation & Layout


  • The top nav was dedicated solely to USDA Forestry Service, not the TNF website
  • Side nav takes up a lot of valuable space


  • The contact information (which is very important) can be simplified
  • The Quick Links section is too far down the page to be relevant.
  • Features section needs to be rethought

Pain Points


  • No search feature
  • Too much text, not enough color contrast
  • No logical user journey/flow
  • Side nav takes up a lot of valuable space


  • Not responsive
  • No ecommerce settings for purchase.


Based on User Research

  • I wanted to have personas in place before the Information Architecture was redesigned
  • Provided the person, proximity to the forest, and why they use the website
  • Device use is also noted
Long green arrow that slides in from the left.


Icon representing sketchesIcon representing wireframes
Icon representing prototyping

Sketches | Wireframes | Prototype

Simplified Information Architecture

  • I was able to do a lot of IA consolidating based on my usability tests and card sort.
  • Searchable Map Feature
  • The Learning Center section had been expanded based on evidence from the card sort. 
  • Updated About page

Sketches & Wireframes

Click to see sketches & wireframes

Early Iterations


Now that I had a good idea of the IA for the site, I sketched out the basic layout of the pages.

I also took a look at some similar sites at this stage to see what some options were. This included:

  • Other National Forest sites
  • State Parks
  • National Parks (Yellowstone)
  • National Parks in other countries


My number one guiding principle when going from sketches to wireframes was to make sure information is simple and easy to find.

  • Usability testing of the existing site revealed this to be the most prominent issue
  • I also made sure the design was suitable for the responsive web.

UI Style Guide

  • The text hierarchy needed to be more defined and more contrast was needed between the heading and body texts.
  • For the headings I used Eigerdals. This is the font from the original Tonto sign (National Forest is Coniferous).
  • Baskerville was chosen for the body font to contrast to the modernism of the heading text.

  • I did not move too far away from the original color design.
  • updated to give a more clean and vibrant look to the site.

A long green arrow that slides in from the left

Final Design

Final User Testing

  • A/B Tests completed
  • Designs solidified


  • I designed three versions with breakpoints
  • 840 pixels wide for Web HD to Small web/Tablet
  • 320 pixels wide for Small Web/Tablet to Mobile Device

User Centered

  • Empathetic to user needs
  • Simple information architecture
  • Clear and simple user flow
  • Users can make purchases within one click.

Click to see final designs

Working Prototype

Try it out!

< Back to work
A long green arrow that slides in from the left

Let's Work Together!

Thank you! Your submission has been received and I will be in touch in the next day or so!
Oops! Something went wrong while submitting the form.