Project Description

City of Montgomery Zoo

https://www.montgomeryzoo.com/

"If you haven’t been to the Zoo in a while, you are missing out on a fun-packed and educational adventure. Our residents include over 500 animals from five different continents, all housed in natural, barrier-free habitats. The Zoo spans over 40 beautifully landscaped acres, offering you a magnificent view of exotic wildlife and endangered species."
- Excerpt from Montgomery Zoo

Montgomery Zoo was ready for a change that included promoting the outdoors, attracting visitors, and striking a balance between vibrant color imagery and information. After reviewing their site, ideas came pouring in to help Montgomery Zoo meet their goals. When asked “What would you like to mention about this redesign project?” Montgomery replied, “I would like our site to be awesome!” Excited by their response, I intended to do just that.

Role

Visual Designer

Tools

Invision App
Photoshop
Illustrator

Visual Concepts

Immediately I knew that I wanted to include more pictures of the animals at the zoo. The intention of my initial concepts was to bring the zoo experience to the website. Creating a font and palette that worked well was imperative. I wanted the font to be easy to read with a high x-height but reflective of the organic content of the site. I wanted to utilize the vibrant colors of the animals and create a neutral background that made the site digestible and uncluttered.

Wireframes & Design First Impressions

In the new design, we updated the look and feel by putting a strong focus on content & simplifying the design to making navigating an easy task. The UX team did a great job constructing the wireframe. There are no longer various buttons and banners visually competing with each other. For the color palette, I used earth tones from the existing branding and applied warmer colors for visual interest that encourage user action.

Final UI Design

After reviewing the initial design, stakeholders really liked the direction but felt as if it were missing something. A considerable portion of their target audience happens to be school groups and they wanted to add a bit more color to the design.

Responsive Mobile

Montgomery Zoo agreed that a responsive layout will translate the user experience from desktop to mobile devices seamlessly. On mobile devices, the layout resizes and adjusts to fit various screen sizes. The main navigation is accessed by tapping the hamburger menu. The search bar expands to absorb more real estate to make it an easier target to click. Content columns from each section of the site stack vertically and are resized to suit the condensed layout.

VISIT