Background: This site needed to do two things: make it easy to visit The Rail Park in Philadelphia and inspire donations. The audience is basically “anyone who values public space in Philadelphia,” so it was essential to make the site accessible and understandable. We spent a lot of time thinking about the content hierarchy, making sure it was easy to find answers to the most frequently asked questions—like “Is the park open” and “How do I get there?”—but we definitely didn’t want it to be boring.
We wanted to translate our love of this place into a website, so people could tell why it’s worth their support. We did that on the Vision page, but also with all the subtle, special moments throughout the site, trying to make it feel like more than just a plea for money but a beautiful thing worth contributing to.
Favorite details: There are a lot of little moments on the site that we are proud of. One is the image carousel on the top of the About page—it shows all the different pieces of the park so beautifully, and we love the way the background color changes subtly along with the images. Another is the day and night modes on the Visit page. It’s such a special touch, kind of like when you’re driving at dusk and Google Maps shifts into dark mode. It adds a nuance of awareness and accessibility that few other sites can match.
Challenges: The toughest thing was balancing the brand’s playfulness with accessibility. We wanted the site to feel fun and unexpected but also super clear. We didn’t want to sacrifice personality for the sake of usability—or vice versa. To walk that line, we used big, bold moments of typography, so visitors don’t miss critical info. Then, we added interactions, imagery and details to give the site a unique character beyond just informational.
Navigation structure: Many folks on the web try to pack the navigation with all kinds of wild stuff. We intentionally asked the client from day one: What do you want people to do when they come to the site? They responded: “We want people to visit the park, learn about our full vision and donate to the cause.” So we were like, “OK, we’ll feature those things and nothing else. Everything else can go to the hamburger menu.” This let us be loud and playful with type and imagery throughout the site, without a chonky navigation distracting the eye.
Special navigational features: The fly-out menu might be our favorite part of the whole site because we got to take a little bit of an unconventional approach with it. We put a ton of attention to detail into it. It’s broken down by page and has the essential pages in very large type. We also included all kinds of contact information, directions and whatever else a visitor could need in there. No need to dig for the contact page or anything. It’s easily accessible at all times with one tap.