My Role

User Research, Design, & Testing

Tools Used

Sketch, Adobe Illustrator, Kardsort, Invision

year

2020

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.

Analytics

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

Navigation

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

Content

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

Users

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

Tech

Not responsive
No ecommerce settings for purchase.

Personas

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

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

Sketches

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

Wireframes

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

Responsive

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.

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.

Website redesign

Tonto National Forest