When in-house web designer Brenda Fletcher was tasked with redesigning the San Francisco Zoo’s website, it wasn’t just an aesthetic improvement she was going for. The old site wasn’t easy for visitors to use and didn’t offer online ticketing at all.
The redesigned online home of the San Francisco Zoo was in development for nearly nine months before launching last fall. It runs on a new content management system and has increased memberships and been a boon to ticket sales. Fletcher shared with HOW Interactive Design some of her sketches, wireframes and iterations from the development of SFZoo.org.
SFZoo.org before the website redesign.
Fletcher, who got her BFA at the Moore College of Art and Design in Philadelphia and her MFA at the Academy of Art University in San Francisco, has been the zoo’s web designer for three years. She previously did work for CBS Interactive and a marketing firm, but she likes in-house work better because she’s more focused. “It’s a lot harder to be in-house because you have so much to do and so many deadlines and so much work,” she says, but “in advertising, it felt like I was getting lost.”
Are you making your way from print design into the digital design space? HOW Design Live in San Francisco, June 22-26, offers a dedicated Print to Web track just for you. Hear from speakers including Patrick McNeil, Chris Converse, Mario Garcia, David Sherwin, Jose Caballer, Terry Lee Stone and more.
Click the image to see a larger view of Fletcher’s homepage sketches.
She began the zoo website redesign project by researching other major zoo’s websites. Some of the outstanding wildlife-focused websites she took inspiration from were the Woodland Park Zoo in Seattle, New York’s Bronx Zoo, the San Diego Zoo, the Monterrey Bay Aquarium and the California Academy of Sciences.
An example of the redesigned animal pages.
Fletcher had worked on website redesigns before, but the amount of content on the SFZoo website was a challenge—the zoo has about 250 animal species, and each one has its own information page on the site. Plus, every department of the zoo is represented on the website, so there were a lot of people to get feedback from.
Fletcher’s wireframes for SFZoo.org.
After presenting her ideas to senior managers, she started working on wireframes to give to the engineers. She worked side-by-side with the development group, and did the front-end coding herself while they did the back-end coding. The zoo website uses Adobe Business Catalyst as its new CMS.
The first iteration of the SFZoo.org homepage.
The second iteration of the SFZoo.org homepage.
The redesigned SFZoo.org.
The redesigned website and corresponding emails have gotten a great response from audiences both internal and external. And, where the previous site hardly helped with patron development and didn’t sell tickets at all, the new SFZoo.org has turned around $85,000 in memberships and $80,000 in ticket sales in nine months.
More resources for web designers
- HOW’s July 2012 issue: Typography and Interactive
- Behind the Wheel of Web Design (MP3)
- Online web design courses, brought to you by HOW
