back to work

Cleveland Metroparks

With more than 23,000 acres of parks and over 45 million visitors in 2015, the Cleveland Metroparks are a gem of Northeast Ohio. The park system includes 18 park reservations, an acclaimed zoo, eight golf courses, and many education and nature centers.

Their website was outdated, non-responsive and didn’t represent the beauty and expansiveness of their parks. I designed a new user experience that made it easy for visitors to plan a trip to the parks, find events, and register for programs.

Cleveland Metroparks main image

The sitemap for this project was very complex, because we were essentially combining three sites and thousands of pages into a single entity. Working through this portion and taking a close look at their analytics really helped me condense a lot of the content, making for a much more organized, user-centric sitemap based on what people were looking for.

Cleveland Metroparks sitemap image
Global Homepage

Because there are so many entities within the Metroparks as a whole, it was important for users to have a single landing page when they first hit the site. This splash page directs users to the other entities, such as zoo and golf, while also featuring a combined list of all of the entities.

One of the coolest features of this splash page is the global search feature. On page load, the field starts typing with pre-populated search items. Each of the banner images corresponds to the search, and the user can click the search icon to be directed right to that page. This functionality gives the Metroparks a place to feature seasonal items and direct users down specific paths.

Cleveland Metroparks global homepage image
Entity Homepages

There are three separate entity homepages — Parks, Zoo and Golf. Each of these use the same template for consistency, but the information and theme across each is tailored to the specific group. Each of these homepages also populates with social feeds that have been tagged for each entity. The global navigation across the top allows users to switch back and forth quickly between them all, and a global footer on every page.

Cleveland Metroparks parks homepage image
Plan Your Visit

The client was interested in creating a "Plan Your Visit" experience for the user to find parks and events relevant to their interests and location. I designed a multistep experience that allows users to select their favorite activities, a date or date(s) they're thinking of visiting, any requirements they have, and how far they would like to travel. Based on these selections a list of parks that match and related events appear, making for a completely customized result.

Cleveland Metroparks plan your visit image
Calendar + Event Registration

A big portion of the new website was events and programs. The first step in this process was figuring out how best to display the events. I designed a multi-view layout which allows the user to switch between calendar and list view. The user can also filter events by date range, age level, distance, location, etc.

The second part of this was designing the event registration user flow. There were multiple variations for each event type, so the registration process had to be tailored to meet various requirements. We also had to account for individual and team registrations, and how this would all integrate with the cart and checkout process.

Cleveland Metroparks events image
Zoo Animals

One of my favorite templates to design was the zoo animals page. Since I knew we would have a lot of really great imagery for the animals, I included a few areas to feature these. The template uses an immersive style, with a sticky navigation at the top to drag the users to the various sections on the page.

A conservation area displays their current status, as well as links the user to customized "Take Action" pages. Since most of the animals have multiple fun facts to display, the "Did You Know?" area of the site loads in new facts and images on page refresh.

Cleveland Metroparks zoo animal image Cleveland Metroparks wireframes image