UX DESIGN:FENNER NATURE CENTER

Project goal: To design a more useful and appropriate website for the Fenner Nature Center, located in Lansing, MI. 

Methods: Used research associated with the UX process, with a focus on interactive and visual qualities of the website, while utilizing the established Fenner brand.

Landscape Analysis

The first step in the project was to access the current website as well as another website that has a common audience. I looked at both of the websites accessibility, usability, overall design, information provided, strengths and weaknesses to inform my next design step. 

I next visited the location to get a feel for the environment of the space so that I may understand better why a user would want to visit the location.

On Site Study

Audience and Content Diagram

The next step in the process was to work with a team to categorize all of the potential audiences and their motivations, goals, and needs for visiting the site. 

User Scenario & Path

The next step in the process was to write a user scenario of an individual that would visit the site and place it in the Lynch map our group created. 

Scenario:

Jeff is a sustainable Parks, Recreation and tourism major and wants to explore the opportunities the Fenner Nature Center has for his major. Jeff logs onto the Nature Center's website and clicks on the Programs in the main menu to look for what activities interest him. He then scrolls through to look for what activities interest him. He then scrolls through the activities listed on the Programs page and clicks on bird watching. He sees that bird watching fits in his free time before class and decides to click on the sign up button that leads him to the sign up page. The user is happy and exits the website. 

Wireframes

This step in the process included hand sketched, low content digital, and high content digital wire frames. I made sure to include the user experience and functionality of the site throughout. 

Visual Designs [Draft]

This was my first attempt at a full content visual design. I took my low content wireframes and added a color palette, typefaces, and a general design.

Visual Designs [Final]

This was my design to create a user friendly design that coincided with the user scenario.