Fenner Website Redesign
The Fenner Nature Center is an environmental education center that plays a big role in the community. I was tasked with redesigning a more visually pleasing and user-friendly website for Fenner Nature Center to make it more acccessable to the public. Using research methods associated with the UX process, I focused on the interactive and visual qualities of the website.
STEP ONE: LANDSCAPE ANALYSIS
Starting with a landscape analysis I focused on researching other sites that had a similar functionality to the community as Fenner and paid close attention to the navigation organization and how the user saw the information. I also researched websites that have very fresh and modern designs to see what was the trend for websites. I noted the strengths and weaknesses for each site researched, including Fenner's site, and using those I came up with major take aways from each site. I researched the Museum of Modern Art, Shoreview Community Center, and Fenner.
STEP TWO: AUDIENCE AND CONTENT DIAGRAM
Working in a group we created a sticky note diagram that focused on possible visitor types to Fenner Nature Center, while figuring out what they would need to know, goals, and motivations that would pertain to their visit. We then digitized our findings and made more connections which served as the basis for our navigation.
STEP THREE: USER SCENARIO AND PATH
Creating a user scenario for my user to follow; I learned the Lynch Map method which focuses on nodes, landmarks, districts and edges and applied that idea to a digital space for my user, Becky, to follow.
STEP FOUR: WIREFRAMES (LOW CONTENT)
Creating a low content wireframe which shows just the basics of what I'd need on each page that is specific to the path the user, Becky, will be traveling.
STEP FIVE: HIGH CONTENT WIREFRAME
Creating a high content wireframe that was more thought out and addresses the slight animation that will occur as the user, Becky, makes her way through the path.
STEP SIX: VISUAL DESIGN COMP
Using Fenner's already in place brand guides lines I added the lime green color and created a visual guide for the website that address the navigation heirarchy, icon style, typography and various other elements.