CityCircles Explains How to Make a Killer Mobile App for Transit

    by Adam Klawonn
    June 2, 2011

    What a difference a year makes. Last year, the CityCircles team was solely focused on building an audience for our unique, web-based publishing platform for the Phoenix light rail community. CityCircles has one of the slickest, easiest experiences for posting geo-tagged content (at least we like to think so).


    That said, think about everything that has happened in the past year from a technology and user experience standpoint. Safe to say that if we had a crystal ball when we filed our Knight Foundation News Challenge application in 2008, we’d have put our focus on the mobile space instead of on the web. We figured that if the audience loved the web version of CityCircles, it would translate well to the mobile version.

    We were wrong. We went left, and the trends went right. But now we’re on the right track with our first mobile application for the iPhone (awaiting review — torture!). We’ve been able to learn from our mistake and play with some new toys that may grow in popularity as they become more sophisticated.


    Adding A ‘Cool’ Factor

    I’m talking about animation. For version 1, we wanted to display the train stations on a map and list businesses, events, itineraries and arrival times for each of the light rail’s 31 stations. It would have been easy to present this on an established mapping platform such as Google Maps, but we wanted to do something unique. What if you could open the app, and watch an animated train crawl down the tracks to see if it’s getting close to your location? This would be different than many other transit-related apps out there, and it would add a "cool" factor to it.

    Here’s a scenario we used: You’re at a restaurant or bar near light rail. You open the app; and you leave it open so every now and then, you can glance at it and see if the train is getting close. You pay, exit the business, and check the arrival times on your way to the platform using the app’s train schedules.

    Our developer, Micah Jameson, wanted to play with a new tool called Raphael to see if the animated train effect could work. In short, it worked very well. Here’s a screencast with an explanation from Micah:


    CityCircles iPhone app with Raphael

    Looks cool, right? There’s just one problem: The animation really slowed down the app. And we know what happens to slow apps, don’t we?

    Going with Google Maps

    So we went back to drawing board. We ripped out the Raphael coding and replaced it with Google Maps. The experience is more static, but much, much faster. And since our audience may have a minute or two to make a decision to board the train, this functionality was superior to the Raphael implementation above. Here’s a screencast with an explanation from Micah:


    CityCircles iPhone app with Google Maps

    I asked Micah for his opinion overall on the Raphael experiment. This is what he had to say in an email:

    Although it’s fairly common practice to display content using a UIWebview in an iPhone app, JavaScript performance still needs to gain some traction before it can be used as an animation platform. I’ve experienced a performance difference between the iPhone simulator versus actual hardware in the past, but on the scale of 1.5×-2X slower. Raphael inside a UIWebView with any substantial amount of data to display was more like 10-20X slower. I did run tests with Raphael on an actual iPhone before I started programming, and it ran fine. It wasn’t until I started trying to display a lot of data that it hit a performance wall. This leads me to believe that Raphael uses a lot of memory to run effectively, so a memory-constrained device like an iPhone won’t run it well.

    For more updates on our progress, you can follow us on Twitter (@citycirc) or read our blog.

    Adam Klawonn, a native of Phoenix, has spent the first part of his career working for metro newspapers and a city magazine. He started ZonieReport.com in 2006 to cover statewide issues in Arizona and previously taught online journalism classes at the Walter Cronkite School of Journalism at Arizona State University.

    Tagged: apple citycircles google maps iphone javascript light rail mobile apps phoenix raphael smartphones

    Comments are closed.

  • Who We Are

    MediaShift is the premier destination for insight and analysis at the intersection of media and technology. The MediaShift network includes MediaShift, EducationShift, MetricShift and Idea Lab, as well as workshops and weekend hackathons, email newsletters, a weekly podcast and a series of DigitalEd online trainings.

    About MediaShift »
    Contact us »
    Sponsor MediaShift »
    MediaShift Newsletters »

    Follow us on Social Media