Part I—Easy, breezy, beautiful websites.
Redesigning the Rail Park site to be everything to everyone.
Hello and welcome to Part I of my Rail Park ramblings. If you came here to read about the branding side of this project and learn about the evolution of logos and typography over the past few years, then GET THE HELL OUT OF HERE! STOP LOOKING. THIS ISN’T FOR YOU. THAT’S IN PART TWO YOU WILD CHILD. This post is about websites only. So put on your blue light filtering glasses from Warby Parker and let’s get into it.
First things first, I’m incredibly proud of this thing and all the work that went into it. So if you say or even think something mean, we’re no longer friends. If we’re already not friends, then we will be enemies! That’s how that works.
And second things second, here’s a link to the live site so you can see it with your own eyeballs and see that these aren’t just pretty mockups.
Us: This brand is built to be uncontained, energetic, and a little wild.
Them: We heard you liked boxes, so we put a box in your box.
When we first worked on the Rail Park branding, our studio was about a year old and we didn’t feel suuuuuper confident in the web design space, so we passed up the original site design project so that a more qualified studio/agency could make it everything we ever dreamed of.
When the site dropped, it was more like a nightmare. The project went not-so-great and we spent the next four-to-five years putting band-aids on every piece of the site, every single time we tried to do anything. I was so sad. It was impossible to use. It was nothing like the brand at all. Everything was confined to a box and there was no life in it whatsoever.
It truly broke my heart and I vowed to never let this happen again. So from the day the original site launched back in 2016, I asked to redesign it at every opportunity I could. But obviously, the client that just paid a ton of money for this thing wasn’t in any hurry to pay to redo it.
Then came 2020. If we’re looking for silver linings of the pandemic, this was it for me. Since the park had to put events on hold and sort of went into a forced hibernation, everyone agreed this was the perfect time to take a look at what a new website might look like. I went full Supermarket Sweep on it. Running with down the aisles with my arms overflowing, but instead of groceries it was animations, gradients, smooth scrolling, and big-ass type.
A lesson in full-assing.
Like Michael Scott listing his flaws, I have no way of half-assing anything. At the beginning of every project I always say to myself, “Mike, maybe don’t kill yourself on this one? Maybe, just design one or two page templates and call it a day?” Ten completely custom pages later, here we are.
Luckily, we worked hand-in-hand with the best developer we know, Ryan Johnson to make our dreams come true (he’s the Hall to our Oates). This site is truly a labor of love, I personally shot 90% of the photos, and sometimes I’d have to sit in one spot for an hour just to get the shot I had in my mind. Most of the videos were shot and edited on my phone, so thanks Tim Apple.
I also pulled in a few friends to work on tiny pieces of it, like Justin Lawes made the spinning Rail Park donate coin and Mary Kate McDevitt did the illustrations on the membership page. I refused to mess this thing up. I had complained about how bad the old site was forever, so I couldn’t be responsible for making a bad one myself. This had to be perfect.
Free ninety-nine all of the time.
The most important thing we wanted the site to say was that this park is free and open daily. Oddly, a lot of people don’t seem to know it’s a free public park? Anyway, we wanted to keep things extremely clean and extremely straight forward. You literally can’t get confused. We also wanted to tell people how to get here, which—believe it or not—is actually kind of confusing. ♫ Take me homeeeee Philly roadssssss. ♫
BUT NO WORRIES, we not only included photos of each entrance, they also have a video on hover that provides a little more spacial context, just so visitors can have a better idea of what to expect when they arrive. This is super helpful when it comes to ADA-type things. One entrance is a staircase and the other slopes down to meet the street, so we wanted to make that as clear as humanly possible which is which, so folks wouldn’t be disappointed when they rolled up and saw a daunting staircase.
Speaking of accessible, the number one thing this site needed to do was to be accessible for everyone who wanted to visit the park. So we built it to be fully translated into Mandarin and Spanish, since a majority of the park’s visitors are from the surrounding neighborhoods, where those languages are prevalent. I don’t know if any other nonprofit of this size has committed that hard to making sure that their audiences can read their site, but we—and by we I mean Ryan—made it happen.
That accessibility was important to design as well. All of Part II talks about how wild and experimental the Rail Park brand is, but I wanted the site to show how you can still convey that energy in a simple and clean way. We added in some of that unexpected quality through large type, videos, animations, transitions, and some neon greens. Our aim was to be completely WCAG compliant, and to kinda prove it doesn’t need to look like ass to do that.
What do we want people to do?
This was the first question we asked when we started this project. And the answer was simple: we want people to come to the park, we want them to learn about our vision, and we want them to donate. So instead of loading the nav up with all kinds of links: About, Shop, Events, FAQs, blah blah blah…we eliminated everything and just kept the absolute basics: Visit, Vision, Donate. Nothing. Else.
Everything else was dropped inside the hamburger menu, which ended up being my favorite part of the entire site anyway. It is so clean and so organized. You can put anything in there! It allowed us to keep the site incredibly simple and really declutters the messaging, letting the important things be the easiest to find.
Big type = Big hype.
Another place we kept things simple is our two main pages: Visit and Vision. On each of these pages we thought, hmm, should we make the type 250pt? Yes we should! We wanted our messaging to be INCREDIBLY clear. No frills or fuss. You want to visit the park? Great. It’s free and open daily. And right underneath, we’ve got some Google maps directions for ya. You want to learn about our vision? Well, let’s tell you about it immediately and obnoxiously.
Along with smack-you-over-the-head bluntness, we tried to drop in a few quieter surprise-and-delight moments as well—like the clouds moving subtly behind the plant on the donate section in the pre-footers, the slide projector transitions on the About page to showcase the diversity of the three sections, the hover state on images showing a quick video to provide a little more physical context of the space, the light and dark modes on the Visit page, and the general smooth scrolling of the entire site.
We wanted interacting with this site to feel like a treat. Like you found a special little slice of the internet. Just like when you roll up to the first Phase of the park, if you blink you’ll miss it. But if you explore a little bit more, you’ll be happy that you did.
Bonus: Control + G if you’re a designer. It’s alllllmost perfect, had to cheat a few areas for breakpoints and whatnot but it’s close I’m no Massimo.
There are a lot of special moments on this site that don’t have any big bold concept behind them, they were just meant to feel good and look good. Like the History page housing the blueprints to the Baldwin Locomotive factory that sits next to the Cut, and the scattered parallax images that seem to float by as you scroll down the Vision page. They feel nice and just give you the space to breathe a little bit, which is just like the park. It’s the only green space in the Callowhill neighborhood, so it just provides that little bit of rest from the concrete and brick monotony.
I hope you enjoy scrolling through this site as much as I enjoyed making it. And next time you’re in Philadelphia, make a plan to stop by and see the Phase One with your own eyeballs. Go get some delicious Elixr coffee and sit on a giant swing, ponder the great wonders in life like, why does cilantro taste like soap? Or why doesn’t anyone understand that the mask needs to go OVER your nose?
But first, head on over to Part II — Six years of blood, sweat, and tears. That part is a more in-depth study about how we’ve evolved the Rail Park identity over the past six years.
Thanks for reading!
