Case Study

Designing for Families, Schools and Donors

The Kansas City Zoo's website served three audiences with almost nothing in common — families planning a Saturday, school groups navigating logistics, and donors evaluating institutional trust. The site buried key information and made simple tasks harder than they needed to be.
 The ask was a full redesign: clarify the site's architecture, rebuild its visual identity, and create a platform flexible enough to grow with the Zoo. I led UX across research, strategy, interaction design, and visual direction.

Designing for Families, Schools and Donors hero image

CLIENT

Kansas City Zoo and Aquarium

PROJECT TYPE

Website Design App Design Digital Support

INDUSTRY

Entertainment

SERVICES

Field Studies User Analysis Tree Testing Information Architecture Interaction Design Visual Design Headless CMS Mobile App Digital Support

Discovery and strategy

The Zoo's audiences don't just have different needs — they have competing ones.

Early research clarified how wide the gap really was. Field studies onsite, stakeholder interviews, and archetype development revealed that families, school groups, and donors were approaching the Zoo with fundamentally different goals — and the site was trying to serve all of them without acknowledging that split. Getting that tension on paper early was what let everything downstream make sense.

We went to the Zoo

Onsite observation gave the research a specificity that stakeholder interviews alone couldn't. Visiting the Zoo surfaced the real range of visitors — families navigating with strollers, couples on a casual day out, even a group running a D&D campaign through the exhibits.

Combined with stakeholder input, those observations shaped a set of archetypes grounded in what people were actually doing, not just who they were demographically. Regardless of who you were, visitors generally needed two different things from the site: tools for planning before they arrived, and quick access to information once they were there.

Didn't matter who you were — the site had a job before the visit and a different one during it.

Lifecycle, then north stars

The archetypes fed into a detailed lifecycle map tracing the full visitor journey: from first awareness through initial planning, purchase, arrival, and the in-park experience itself. Mapping that arc made the planning/navigation split structural rather than anecdotal — the site had a different job at each stage.

From there, concept themes like Animals First, Easy Discoverability, and Always Adventurous emerged as guiding principles, alongside a set of blue-sky opportunities that pointed toward what the platform could eventually become.

Blue-sky opportunities defined what the platform could grow into.

Information architecture

Tree testing showed visitors could find animals — but events and memberships were a different story.

Restructuring the Zoo's IA meant navigating a real tension: animals are the emotional core of the site, but ticketing, memberships, and events are what fund the operation. The navigation had to support both long-range planning — trips, camps, donor programs — and in-the-moment access to maps, ride schedules, and daily features. Card sorts and tree testing validated what was working and surfaced exactly where people got lost.

IA Testing and refinement

Draft structures went through multiple rounds of tree testing. Buying tickets tested well almost immediately. Camps and educational programs were consistently missed — not because people weren't looking, but because the labels weren't mapping to how visitors thought about them. That finding drove clearer naming and deliberate cross-links for high-traffic programs.

Buying tickets was intuitive — finding camps wasn't.

Interaction design

Mobile wasn't an afterthought — it was the primary tool once visitors were at the zoo.

Wireframes were developed collaboratively with the Zoo's core team, keeping organizational goals and audience needs visible at the same time. The central challenge was a structural one: the same site had to work for a parent planning a birthday trip from home and that same parent standing at the entrance trying to find the giraffe feeding times. The responsive framework was designed explicitly around that split — not as an edge case, but as the primary use pattern.

Wireframes and prototypes

Wireframing was where the structure got pressure-tested. Working collaboratively with the Zoo's core team, the sessions clarified hierarchy, confirmed which templates and patterns needed to be built, and nailed down content details and microcopy alongside the layout decisions.

The output wasn't just screens — it was a shared understanding of how the system fit together. A single flexible structure could then serve both modes: schedules, maps, and ride info immediately accessible at the surface, with memberships, events, and donor content available for those who needed to go deeper.

One structure that works for planning ahead and navigating in the moment.

Visual direction

Adventurous enough to feel like the Zoo, clear enough to actually use it.

After wireframes validated the structure, design exploration defined the Zoo's digital identity. Styleboards, iconography guidelines, and photography direction built a system that could flex: playful and high-energy for family content, credible and restrained for donor-facing pages. The challenge was making that flex feel intentional rather than inconsistent.

Style boards

The Zoo already had established fonts, iconography, and patterns in use across physical signage — none of which was changing anytime soon. Style boards were about finding the right amount of refresh: modern enough to feel like a current digital experience, grounded enough to stay continuous with the physical brand visitors were already seeing at the gate. The exploration was less about inventing a new identity and more about calibrating how far to push it.

Not a rebrand — a calibration.

Visual branding

The final design system aligned directly with Zoo marketing materials — signage, printed collateral, ticketing. A mix of clean iconography and immersive animal photography carried through to page headers and interactive moments, so the digital experience felt continuous with the physical one.

The website felt like the Zoo, not like a website about the Zoo.

Ongoing support

The project became a platform — not just a website refresh.

The replatforming work created infrastructure the Zoo could keep building on. A headless CMS gave the marketing team control over both the website and the mobile app from a single place — updates happen once and reach both. New templates and patterns meant the team could handle seasonal events, major exhibits, and donor campaigns without engineering involvement for every update.

New patterns and functionality

As the Zoo's needs grew, so did the platform. Special event templates let the team spin up Jazzoo and similar programs without starting from scratch. The Aquarium expansion got its own immersive treatment — interactive details that matched the scale of the exhibit. New content types and patterns get built as the Zoo's needs evolve, keeping the platform from hitting a ceiling.

New templates and tools built to match what the Zoo was actually doing

The map that kept growing

Map features started on the website and grew into a full in-park navigation tool. Internal tools now let staff update exhibit and animal status in real time — so visitors know before they make the walk to Africa whether the animals are actually out.

The headless CMS ties it all together: add an animal once and it surfaces in the animals section, map search, exhibit popups, and the newly completed mobile app simultaneously.

The roadmap keeps going — wayfinding, near-field check-ins, AI-assisted itinerary planning, scavenger hunts, and scenic photo prompts are all on deck, extending the platform deeper into the in-park experience.

Add an animal once — it shows up everywhere.

The fun stuff

Randomized 404 pages with Zoo-themed animations turned a common frustration into a small brand moment. These weren't decoration — they were part of maintaining the Zoo's personality across every interaction, including the ones that go sideways.

Even the error pages feel like the Zoo!

Outcomes

We've been working with the Kansas City Zoo since 2019 — through a full redesign, a mobile app, and an ongoing support relationship that's still active. That continuity is its own metric. The Zoo draws over a million visitors a year, and the platform has kept pace with that scale through major additions like the Sobela Ocean Aquarium and a full event calendar. With the World Cup coming to Kansas City, the mobile app is already being prepared for the biggest attendance spike the Zoo is likely to see. When a client keeps the relationship going six years later, the work held up.