design, microformats, Open source, Technology, The Web Arts, Usability, Web building

The story of exPhone.org

At FOO Camp, we held a session on Green Code and discussed various tactics for reducing power consumption by reducing (primarily) CPU cycles through wiser platform decisions and/or coding practices.

exPhone badgeSomewhere in the discussion we brought up the impending launch of the iPhone and it occurred to me that there really wasn’t any substantive discussion being had about what to do with the many thousands of cell phones that would be retired in favor of newer, shinier iPhones.

Thus the seed for exPhone.org took root and began to germinate in my mind — as something simple and feasible that I could create to raise awareness of the issue and provide actionable information for busy people who wanted to do the right thing but might not want to wade through the many circuitous online resources for wireless recycling.

I had a couple constraints facing me: first, I needed to get this done while Tara was traveling to Canada as I wanted it to be an [early} surprise birthday present. Second, I needed to get it done before so I could leverage the event to promote the site. And third, I had other competing priorities that I really needed to focus on.

exPhone Keynote LayoutI went about designing the site in Keynote (my new favorite design tool), relying heavily on inspiration from Apple’s section. I did a bunch of research and posted a lot of links to a Ma.gnolia group (in lieu of a personal set) and created a Flickr group at the same time. I of course also registered the associated Twitter account.

As I went about developing the site, I felt that I wanted to capture everything in a single page — and make it easy for printing. However, I brought my buddy Alex Hillman into the project to help me with the trickier PHP integration bits (his announcement) and he convinced me that multiple pages would actually be a better idea — not to mention compatible with my primary purpose of encouraging sustainable behavior! — and so we ended up breaking the content into three primary sections: Preparation, Donation and Recycling.

We riffed back and forth in SVN and things started to solidify quickly and we quickly realized that we should make the site more social and interactive. And, rather than build our own isolated silos, we decided we’d pull in photos from Flickr, bookmarks from Ma.gnolia and Delicious and use the groups functionality on Flickr and Ma.gnolia. This meant Alex simply had to toss the feeds into Yahoo! Pipes, dedupe them and then funnel the results in a SimplePie aggregator on our end to output the resultant feeds. It turned out that Pipes was, for some reason, not as reliable as we needed and so Alex ripped them out and ended up bumping up SimplePie’s caching of the direct feeds.

Alex put in extra effort on the Flickr integration side, creating an exPhone user account on Flickr and setting up email posting to make it super simple to get your photos of your exphones on to the site. All you have to do is take a photo of your exphone and email it to myexphone@exphone.org with a subject like this: tags: exphone, ‘the make and model of your phone’ (yes, the make and model should be in single quotes!). We’re kinda low on photos on there, so we’d love for you to contribute!

Lastly, I’ve gotta give props to The Dude Dean for his SEO tips. I’m typically not a fan of SEO, but I think when applied ethically, it can definitely help you raise your relevance in search engine results. We’re nowhere in sight, but I’d love to get up in the cell phone recycling results.

I’ve written this up primarily to demonstrate an evolving design process (Keynote to HTML to SVN prototyping to iterative launch) and the use of existing technology to build a simple but rich web application. By leveraging web services via various APIs and feeds, Alex and I were able to build a “socialized” site will little original development where most of our efforts were focused on content, design and behavior. I also made sure to mark up the site with microformats throughout making it trivial to add the organizations I mentioned to your address book or reuse the data elsewhere.

I like the idea of “disposable web apps” or “single purpose apps” that provide useful information, useful functionality or simply reuse existing materials in a novel or purposeful way. I’m also thrilled that Alex and I cobbled this thing together from scratch in a matter of three days. Yeah, it’s not a long-term, high value proposition, but it was great fun to work on and is something concrete that came out of that discussion at FOO Camp.

I of course welcome your thoughts and feedback and invite you to add your own stories, links or photos to the site!

Advertisements
Standard

9 thoughts on “The story of exPhone.org

  1. Yup – I’d have to agree with you on the “simple little web apps” (as I like to refer to them).

    Great idea too (as I noted on the flickr posts about this) 🙂

  2. Hey Chris – we haven’t spoken, except perhaps indirectly in twitter. I was pleased to come across this blog entry because i heard you had been thinking about Green APIs. A couple of us are looking to start something called GreenForge which would track and encourage green APIs and open source code. We don’t know what that means in practice, to be honest, which is one reason we’re keen to recruit some smart people to help us come up with an evil plan. We have a call this morning PST with one of the mashup web’s key names. But you’re on my target list.

    email above
    or skype me at monkchips

    even if you don’t have time or the inclination to get involved, perhaps some of the others that shew interest at FOO would like to get involved?

    Thanks

  3. Pingback: The Waving Cat » Blog Archive » exPhone.org: How to create a simple but rich web application in just three days

  4. Pingback: Community Guy » links for 2007-08-17

  5. I recently received a Business Reply mail bag from Motorola in my amazon.com book order. Perhaps some similar program should be adopted by Apple or AT&T and a bag given with every iPhone purchase (or any phone purchase for that matter)…

  6. Pingback: Keynote Template for laying out iPhone apps | FactoryCity

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s