One of my goals is to start sharing client work more often, but hopefully in a way that is not (just) self-promotional. The goal is that sharing bits and pieces of projects will show the fun stuff we get to work on, and will also give you some ideas of what you can do with the CMSs we work with.
With that in mind, I’m thrilled to share a project that just launched today, Scouted.
About the Site
Meg came to me with this awesome idea for a site bringing together recommendations for restaurants, shops, and other local spots from creative types, starting out in NYC but with the potential to grow into other cities in the future. The site was to be highly content-driven, but with all the fun we could collectively bring to it via design details (Meg’s forte), photography, and detailed-oriented code (our job).
This was an interesting project for me because it was one of the first ones where I had an associate developer on my team take on the bulk of the coding work. While that was totally terrifying, Kim did an amazing job and was able to bring in many of the skills she’s got me outpaced on to bring the site to life (almost literally, in terms of the animations and other subtle movement effects throughout the site, as well as more figuratively).
Layout Details & Features
The site itself is deceptively simple looking, but is actually chock full of functionality and user-focused design, from the clear visual hierarchy to the thoughtful navigation structures to the clean interface with custom icons and stunning photography. It’s responsive, too (a real trick for the maps in particular)!
Some of the notable details include:
- Full-width images that load randomly on the home page (except the first time you visit the site, when you always get the skyline)
- Full-width single images for individual scouts, and sliders for editor’s picks (a feature that’ll launch later this week or next)
- A clean multi-column grid on the home page, where you can view all the current scouts and editor’s picks at a glance
- Carousel navigation through other scouts and picks from individual pages
- Audio clips where scouts talk about why they love their city (voices!)
- Of course those crazy, super customized Google Maps
Behind the Content Management
Like all of our sites, we built this one to be as easy as possible for Meg to update and manage ongoing. Each scout or editor’s pick is handled as a post in WordPress (the blog is totally separate, so we didn’t need to hold on to posts for that):
The category is the city, which let us proactively set up a smart system for if/when Meg wants to add other cities. When the time comes, she’ll just categorize the entries for each city accordingly. This model also gives us a wonderfully useful permalink structure to work with:
The maps are done with a heavily modified version of this plugin, and each mark is entered using just the address. They’re then categorized by the scout, which pulls them into the appropriate map automatically.
We used the Advanced Custom Fields plugin to create customized content entry for each scout as well:
This way, Meg can enter as many or as few places in each category for each scout as she wants. If she’s got a scout who just isn’t into coffee, she can skip that category entirely and it just won’t display on the front end. Even the audio is easy to handle – Meg just uploads the MP3 and the rest is taken care of in the code:
We’re super proud of Scouted, and I really hope you’ll check it out and let me know what you think! (And of course, if you find anything buggy, please let us know that as well – we do a lot of browser testing and put a lot of different eyes on sites before we launch them, but sometimes we miss things!)