New mobile-friendly interactive park tours for a Seattle nonprofit

Today, I got to launch a feature that I’m almost giddy to share!

I’ve supported Friends of Seattle’s Olmsted Parks for years with their custom WordPress site. When first converting the site to WordPress, we drastically improved how they mapped and showed Seattle’s historical park system and made it easy to post news updates and add events to their calendar.

FSOP’s most popular events are their park tours offered every summer throughout Seattle. However, space for those is limited, and not everyone is available or able to participate in those tours for any number of reasons. So for some time, a few self-guided tours were available as PDFs on the website.

With this launch, there is an even more interactive map-driven interface that lets anyone with a phone in their pocket explore a park on their own. To start, we have launched a self-guided tour of Seward Park. Personally, that is one of my absolute favorite parks in Seattle, so it was an extra treat to build.

Park tour interface on a landscape orientation screen. The left half of the screen shows a map of Seward park with numerous markers and right half shows a large old map image and tour introduction.
The tour on a large screen.
Park tour interface in a phone-size screen. The top 40% of the screen shows a map of Seward park with numerous markers and the bottom 60% shows a large old map image and tour introduction.
The tour on a phone.

For years, this tour existed as a static PDF and extremely long web page. It worked great for anyone interested in printing 20 pages and a lot of patience, but it was far from optimal, especially for anyone wanting to do the tour on their phone. As a static PDF, it was also hard to edit and update when, for instance, the new Seward Park torii was erected in 2022.

By making this feature truly mobile-friendly and using an interactive map, the website now helps people orient and navigate through the tour at their own pace. And while this may look like a mobile app, it’s just another page on their website, so it’s instantly accessible to anyone without an additional download.

I spent much of my time working to ensure that the tour supported multiple ways of navigation. People can review a tour table of contents, explore the map and select a stop, click buttons for the next and previous stop, or swipe between stops. It is an extremely flexible interface.

As is almost always the case, this feature is built in WordPress and provides an interface for editors to log in and create additional tours or edit existing ones. Each stop is easy to manage, helping editors place a pin on the map, add a description, and order the stops.

This is one of those features that is hard to get right on the first pass, so I’m actively seeking feedback and input from anyone who tries it out. If you’re in Seattle and want to learn more about the history of Seward Park, take this tour and then let me know how it goes!

Posted on Categories Case StudiesTags Tagged:
,