Logan Jaffe here - Curious City’s multimedia producer. I’m gonna start this post with a big ol’ hooray! because today our bats interactive is featured as the Adobe Muse site of the day. So, in typical Curious City fashion, we’re taking this as an opportunity to open up our process and explain how we made the dang thing.
You might remember this earlier post about our first bats brainstorming session. There, we discussed how to best answer Rory Keane’s question visually. Remember, he wanted to know how many bats are in the loop and where their favorite hangouts are. Key word here is where. Rory wasn’t asking about the variety of bat species that call Chicago home, but rather, what types of environments do they hang out in?
We knew from the Lincoln Park Zoo’s Urban Wildlife Institute that those locations were forest preserves, golf courses, the nature boardwalk and old homes/attics. And since Rory asked about urban bat hangouts, we wanted to make sure we depicted each of those environments with an urban flair. This was important because as we reported this, we learned that all 7 species of Chicago’s bats were actually detected just 3 miles north of the heart of the city. We wanted our viewers to understand that (1) if they wanted to see these tiny, furry flying critters, they wouldn’t have to look very far and (2) urban development and the natural ecosystem interact daily, and often right under our noses.
(above) An early iteration of our bats presentation.
The Curious City team brainstormed a number of ways to depict these four environments: panels contained in a larger, illustrated spread, a 360 panorama, a large illustration in which the user could click on different environments and see what bats are “hiding” in it, etc.
And we knew wanted to “interactify” the experience to give a sense of exploration. Seeing bats out at night is a rare and fleeting experience - so we wanted to give people time to take in each environment as well as see and learn about the bat species that live in them.
So, we settled on Adobe Muse as a tool because (1) It’s super customizable. You start on a blank canvas and truly start designing from scratch. Plus, there are tons of widgets (we used the traditional Adobe slideshow at the end) that are simple to use and integrate with a number of other sites, like SoundCloud. (2) If we screwed up somehow (it was our first time using Muse) and didn’t quite hit the interactive mark, we could always still use it to design something simpler. (3) Tons of helpful tutorials and (4) Intuitive interface, especially for designers who got started using InDesign.
Then we got to work.
(above) The first slide of our storyboard.
We sketched out a rough draft of each landscape and storyboarded our thought process with Google Presentation. That way, we could leave comments and communicate our ideas with Chicago artist Erik N. Rodriguez, who’s very accustomed to working with journalists and storytellers with his comics journalism company, The Illustrated Press.
Here’s some more examples of how we storyboarded this, along with the final results:
Pretty neat seeing things come to life.
As far as what this all looked like in our original Muse file … well, let’s just say it’s by far the largest document we’ve ever worked in (1280 pixels x 27704 pixels)!!!
We should say, though, that there are a number of ways we could have done this differently in Muse. A version 2 would likely include a top navigation bar with anchored points to specific environments and definitely an alternative layout for mobile devices.
For our first shot at Adobe Muse and this kind of illustrated interactive experience, though, we’re more than flattered to be featured as Adobe site’s of the day.
Here’s to the bats!
Also, if you’re still curious about the back end or the production process, feel free to email me with any questions or comments at firstname.lastname@example.org