Art in Odd Places ( AiOP ) is brilliant, dare I say majestic! AiOP is about breaking the mundane of everyday existence with a message of hope, creativity, responsibility or simply fun. AiOP has humble beginnings on 14th street in New York City, but has now expanded across the U.S. and internationally to include Russia and Australia.
Working with AiOP has been one of the best experiences of my life. Since I joined in 2011, I have worked on the main AiOP site, which stays up for most of the year, as well as each yearly festival site which we launch around October and run it through the length of the festival in NYC. I have also setup microsites for each festival that is on-going throughout the year.
2014 : FREE
Winner of a 2014 Communicator Award!
For the FREE site, I wanted to use Google maps to focus heavily on the mobile user. The concept was to design and develop a site with a clean interface and fast load time so the user could use their mobile device to navigate through the festival while it was happening in real time.
With that in mind, I did something a bit out of my normal wheelhouse. I went with a “mobile-first” mentality. In the previous festival site NUMBER, I had a maps page full screen which showed each artist and a marker for the location and time. It received a significant amount of traffic so I decided to push that concept further.
Rather than having a fullscreen image carousel (or some other beautification sizzle), I wanted the homepage to be the street. In FREE, the homepage lays out 14th street with markers for each artist. From here, the user can see each artist in each location, and with the pin description get an idea of the piece.
Currently, this method was just a mirror from the maps page on NUMBER, so I wanted to push it even further. Many artists move throughout 14th street in their performance, and I wanted to render that in the map. Therefore, some artists have plot routes, which show their start and end points. While that it all fine and dandy, after going through the artist pieces and conversing with the stellar AiOP team, it seemed we could enhance this feature further. I created modals for each plot route as well, so the user could have more information about each piece in it’s current state. This feature is easily the one I am most proud of in the FREE site.
Another feature of the FREE site is the ability to filter the artists by the date they will be performing. Some artists have static pieces which are up through the festival, but other pieces are more dynamic and only exist on certain days. In the previous NUMBER site, the calendar was a loop of each artist and the date and time of each performance. That needed to be tweaked to coincide with the map, so the user could filter properly while being on 14th street. The Calendar link in the nav slides in filtering option which removes each artist that does not have an active piece on the chosen date.
To push this filtering option further, I used custom markers to show each artist category to facilitate the user. The legend at the top of the page will filter out only the category chosen. This helps show the different types of pieces happening on 14th street. The most important marker, from a usability standpoint, is the “Happening Now” marker. Currently, if you click it, you won’t see any markers. As so, the “Happening Now” marker was designed for users on the street during the festival. Users could click this marker during the festival and know where to go to see the artists that have current events. According to our user feedback, this option was the most useful throughout the festival!
Considering the “mobile-first” strategy, I also wanted to use a fixed menu system, so the user could have access to different parts of the site on any given Y-position. While the fixed menu offers a few caveats, it served our users well during the festival. They could pull out the nav drawer and jump from one page to another seamlessly.
We have included a Tumblr and Flickr feed on sites in the past, but incorporating into the Maps posed a new trial. Considering how dynamic the content would be, coming from two different sources from different API’s on the web, I chose to include a collapsible “sub-footer”. This allowed the user to expand and collapse this option according to it’s relevance. On mobile view, the map is the most important aspect, so the feeds are collapsed by default. However on desktop where there is a bit more real estate, this is exposed on initial load. The logic to control this on each viewport, in each state involved a good bit of JS logic. The experts at Stack Overflow were priceless when it came to undermining this task.
I wanted to use a new way to find artists, as well. I incorporated Typeahead into the artist filter page to help users find artists easier, rather than just sorting by GET variable in a page.
A completely superficial addition, but I like the way it intros the site is a page loading gif, which shows while the homepage is populating the markers from the database.
Ok…last but not least, oneof my favorite additions to AiOP: FREE. I was coming up with spacing issues when thinking about how to layout the site in landscape mode on a small device. I eventually decided rather than build a poorly functioning example of the site in landscape mode, to restrict the user to portrait. So I created this gif for when users rotate their phone to landscape. Lazy? Yes. Funny? Yes. Funny >== Lazy any day. Funny is the paper to the lazy rock.
Overall, the site was a success and we received nothing but positive feedback. We received a record breaking amount of site hits and kept a solid bounce ratio of 38% during the festival.
Also, I fell softly in love with the Google Maps API during this project and look forward to how I can extend it even further in 2015. I’m looking at you AngularJS!
The Promo Video
To promote the AiOP FREE festival, I created a promo video with the help of the curators Juliana Driever and Dylan Gauthier, along with our sound master Diane Brindle and as always the director Ed Woodham. The concept was to create this fast moving slideshow of images from 14th street, some being art pieces, while others being the normal mundane street ( although honestly what is mundane about 14th street amirite? ) appending some of the FREE text with the image. The following was the result:
I walked down 14th street with my iPad, taking photos/video with a reference to FREE. FREE dry-cleaning, FREE soda, etc. I tried to focis on anything that stood out as NYC specific, but also embraced the ideology of FREE since the concept is as vast as it is finite.
After putting together a rough loop of images and copy, Diane wrote this brilliant piece that played up the rhythm and texture we needed for the video. One of the greatest, I would say serendipitous parts is the cat growl in the piece. I recorded a squirrel in the park as filler thinking it would not amount to much in final production. However, when we laid down the bit of the scream against the video of the squirrel, it all made sense by not making any sense. It’s easily the best part of the video, considering the implications of a wild and crazy city, yet the wildest creature could be considered the squirrel that will steal your lunch ( I am not considering rats…because rats do not need consideration ).
2013 : NUMBER
2013 Webby Honoree
Number was the first AiOP festival site built in WordPress. All previous versions I built from scratch in PHP. There was a very basic CMS in place for festival admins to update content, but I wanted to improve on it.
For the Number layout, I wanted to use some big full-screen images as an opener to the festival, since we had not done that in the past. I wanted it to be much more about the photography of the artists, rather than text heavy explanations of the festival itself.
I added a full-screen image slideshow and all festival info below. Starting with a note from the curator. It seemed to be a nice intro to the AiOP world.
AiOP had never integrated Google Map functionality as a backbone to artist locations, so that was another priority for me. I had dabbled in G-Maps V3, but never really dug into it. First, I created a small map on the homepage and was very pleased with the look and functionality. So I decided to extend it to it’s own page.
It was a huge hit by analytics and user reaction standards, and in this the idea for the 2014 FREE festival sparked.
Next up was the calendar. After an exhaustive search, I couldn’t find a pre-built calendar that was stripped down but had my specific needs. So I decided to build my own. It’s just a calendar…how hard could it be right?
I learned a lot about calendars, time, turning strings to time, time to strings, then outputting date() formats, along with an in depth look at calendar logic (if date is greater than today, but less than a day three days from now, then do this…). There were moments I dumped it and started over. I am pretty sure I cried a few times. At one point, I decided the only real way to build it was to drink a lot of bourbon and it would work itself out. Eventually, it came together and it is one of my proudest developing moments. While it may not seem like much, it was mine. I built it from scratch and it practically became a family member. Hello, I’m Carey and this is Amberjack…my simple calendar.
By the time Number rolled around, Ed was confident in me taking some liberties with the site design. He trusts me to conceptualize and build out my vision for the site, while he, and the curators support me with great enthusiasm and constructive criticism. With their support, I decided to redesign Number from the previous template. It was looking a bit junior varsity in my opinion. I decided to use strong diagonal lines and sharp geometric containers to work in tandem with the Number concept. I used a strong, rich black which connects it with the AiOP main site, along with the type set in a black rectangle.
Number is also AiOP’s first fully responsive layout. It seemed 2013 was the year for responsive, and what better site to be mobile friendly than AiOP? I had been working with responsive just a bit when I tackled this one, so there are many issues I would like to address, but overall it works well on all viewports.
…and the icing. My favorite piece was the last little addition. I wrote a random number generator script, which would flip through numbers and ultimately change to NUMBER. I applied it to the header of the homepage. The script works in a couple of random ways. It randomly sorts through integers <= 10, but the speed and stop is also randomized, so it’s tough to pick up on a pattern.
2012 : MODEL
What can I say about Model? It’s been so long and Ive learned so much since!
It is using the first festival template I built from scratch in php. While it’s rough around the edges, it shines in a few ways.
First, for Ritual and Model I created a wordmark for the subtext of each festival. I really liked this one, although it doesn’t resolve very well in web. Here it is with a bit more contrast.
I am really not going to waste time going into too much detail here. Model was a rehash of Ritual, and most of it’s big flare is on the development side, like creating a more robust login system and CMS. This page is already really long, so if you got this far…let me assure you, the better stuff is up there ↑.
2011 : RITUAL
Ritual. The birth of my AiOP existence really. If you are this far down on the page, you must care about the narrative, so I’ll give you a bit of backstory. I moved to NYC in 2010 and working as a designer at a medical supply company. It is accurate to say I was looking for a more creative outlet. I went to a Feast where I met Ed Woodham who was working on Homopropaganda at the time. I wanted to help so I signed my name on the sheet to offer my design/development skills to the cause. A week or so later I met with Ed and began talks about updating the main site, as well as prep for the upcoming Ritual site. I did what most designer/developers (I guess?) do in that situation, I made promises to build out a website that I had no idea how to complete. I came home excited and immediately watched all Lynda.com tutorials about creating a site using PHP and MySQL. I was working the tutorial and the site in tandem, so as I learned more, I built more. I created comps with promises of a backend that I had no idea how to complete. The result was Ritual.
I created the layouts with the hope that I could develop it. I was not thinking so much about the user, but my own capabilities.
Ed had already pulled images from artists in the call for proposals, and those requirements were images sized to around 600px in width. I created mockups using those parameters.
I wanted to add my own personal design touch, so I created a wordmark for the AiOP subtext. Looking back, even now it’s a build that makes me proud. It was the first time I could consider myself a true developer.
AiOP: Main Site
One day I am going to make this thing responsive, but as I tell the god of death….not today.
The AiOP main site was my first task when I came on board at AiOP. Originally, AiOP was operating through a Tumblr blog and had a blog on Blogger. The operation was a bit disjointed. So I built the first iteration of the site in php, sans framework. Then, in order to style the blog inline with the site, I ported it over to WordPress. It then seemed logical to just migrate the static data into WordPress. Since it’s launch, I have added features that allow the numerous cities to create ‘microsites’ in the AiOP template to promote their festival.
AiOP has expanded internationally. We needed a place to include those locations on the main site. I created a subsystem in the WordPress framework so I can add the festival corrdinators as users and they can add/update their festival information such as slideshows, artists, etc. We have used this system for the past six festivals with much success.
Welp…you made it this far? The article is over. Thank you for reading. You get a carlton dance.