I built BikeFixTO - an iPhone app that shows your closest bike repair location. I’m thrilled with how it turned out: The UI is nice and clean. The animated sorting of the nearest locations looks great, and I personally use the app all the time. So, on all these technical fronts, it was a hit.

Where I’ve been less successful is on the marketing side. I never expected to sell thousands, but I expected to sell hundreds. And I had vague plans of rolling it out to other bike friendly cities. But, like so many developers I underestimated how much work it was involved in the sales process. It’s hard work to get the word out. Developers often have this idea that sales should be perfectly rational where the best software wins. The pitch is: “My software solves a problem you have. Therefore you should buy it.” And if there is no immediate response, they give up since clearly the person didn’t have that problem. The whole idea of “touching” people multiple times, reminding people, tweaking the message, running contests and having sales feels spammy and inefficient.

And that is why developer’s need to consciously stop thinking like developers when it comes to marketing. And if that isn’t possible, they should partner with someone who can better wear the marketer’s hat.

I would like BikeFixTO to take on a new life. I would love it to spread to other cities where it can promote cycling, local bike shops and bicycle culture. Personally, I’m not the guy to do that, but maybe you are.

I’ve decided to make BikeFixTO free*, but am selling the source code. For $199 you get the full source to an iPhone application that you can build, tweak, customize and sell. There are no limitations with what you can do, except that I require that you don’t distribute the source code (which would prevent me from selling other copies).

The code is also an excellent code base for anyone wanting to build location-aware applications. Some of the details about what you’ll find in the source code:

• query data from sqlite database
• custom sqlite function to calculate distance between coordinates
• parse and display opening hours
• animation to visually sort items
• dial phone numbers
• php code for displaying maps on a webserver
• access GPS data

If you’re interested, download BikeFixTO and give it a test drive. Drop me a line if you have any questions or would like to purchase the source code.

*Update: I’ve changed the price back to 99¢, but if you’re interested in kicking the tires, I’m happy to send you a promo code.

*Update 2: I’ve updated the source to use MapKit.framework for fully dynamic map of all locations instead of a static map of a single location.

A few years ago the Ontario government built a website to inform people about the quality of air in their region. I remember reading about it and thinking that this type of information would be the perfect for displaying using an ambient interface. Then I forgot all about it.

Yesterday, I stumbled onto a Dashboard widget that scrapes the Air Quality Index (AQI) from the government website and displays it in a lovely, shiny gel tile. But it didn’t work.

So, I poked around and found that Apple’s Widgets are just like Konfabulator’s widgets, which I had messed around with ages ago. It is just a directory that contains some images, css and javascript. I changed the widget to scrape the RSS feed instead of the webpage, simplified the pattern matching and made a few layout tweaks so a pollution source like “Fine Particulate Matter” still fits on the screen.

I sent a copy back to the original author, but since I’m not sure if or when I’ll hear back from them, I’m posting my new version here.

Ontario Air Quality Index widget

(For Dashboard, which is part of Mac OS X 10.4 or 10.5)

I’ve been asked by clients to setup a way to receive payments online and that usually means PayPal. It’s not because PayPal is particularly good at what they do, but they are the only provider who is willing to offer the service without insane monthly fees. (We don’t have GoogleCheckout in Canada.)

PayPal is always a huge hassle to setup and test, and this last time was no exception. The developer sandbox was broken for most of yesterday, so I started looking closer at the live site. I could not believe what I found. Here is the firebug profile the page a user for the first step of the payment process.

The good news is that they are using a server called paypalobjects.com to serve up static content. The webserver is thttpd, which is a tiny, barebones and efficient webserver. Perfect for serving up images and css that doesn’t change very often.

It is curious why they bothered with registering a new, longer domain. Using something like static.paypal.com would be easier and a few characters shorter.

But that’s it for the good news.

The page consists of 30 HTTP requests and weighs in at a massive 98k. Perhaps if the page was actually doing something complex this would be justified, but this initial page has a simple set of goals:

1. Show who will receive the payment
2. Show the amount being paid
3. For people with a paypal account: Allow them to login
4. For people without an account: Allow them to register or continue the checkout process

That’s it. So basically, a line of text, a short form and a couple of links.

Let’s see what is involved.

First, they use some javascript (DHTML) to hide what is being purchased. You have to click on the triangle thingy to see what you are buying. Since this is a checkout process, you might assume that what they are buying is important, but PayPal has different priorities.

They want you to sign up with a paypal account, so the login form is given a the majority of real estate. Oh, you just want to complete your payment? Well, then at the bottom of the page is a little link to “continue”. (And the “account optional” is not the default behavior, but has to be explicitly activited by the seller.)

Ok, so they want to convey the “used car salesman” image. Fine. Let’s move on.

Looking at the profile, the actual page is 14k (not bad) and only takes a quarter of a second to load. Great! The problem is, the page will not display until it loads (and executes) the javascript, css and images. Here is the file count:

6 CSS files
10 image files
11 Javascript files

The images are all quite small, but it looks like thttpd closes the connection after each request, and ignores the browser’s request for a keep-alive, so this would slow things down somewhat. None of the img tags have height and width, so that would also slow down page rendering.

The css files could be cleaned up (e.g. default.css only contains a comment - no css!). The only tidy css is something they borrowed from Yahoo - and the sitecatalyst code which appears to be a javascript webstats service like GoogleAnalytics. All of their code is messy with various code chunks commented out, and various notes. It certainly seems incredibly complicated for a relatively simple page. Ideally, they would clean up their css and use a script that would merge the required styles into a single file. But since each css file has a different timestamp - my guess is that the css files are just pushed out whenever someone wants to tweak something and aren’t part of any release schedule. (Scary!)

But, by far the most nasty part is the javascript. They’ve got the site analytics as mentioned before, which can be useful for getting numbers on things like screen size. So, it’s not strictly necessary, but ok. However there is something called PayPalNaturalSearch, which is some embedded javascript code and a separate file that has to do with advertising and search engines. Since people coming to this page are following a link from a website - this seems pointless.

There are 11 javascript files that need to be loaded, parsed and executed. They use the yahoo library - basically for the value-less feature of hiding key information from the user. But even if they really did need something dynamic, they could do this with the single file jquery library for around 20k, and as an added bonus the code to use the library looks much shorter and more elegant than the yahoo library.

Plus having the entire page and files encrypted puts more load on their servers and the clients, so it is even more crucial to make sure that everything being sent is required. It should be possible to make this entire page use 10 requests and 10k.

I’m sure the slowness of their service is a known problem. The proof is their slogan: Pay Fast with Paypal. Clever. Instead of actually putting competent developers on the job to fix the problem, try to convince customers that the problem doesn’t exist!

I am working on a usability study where I need to be reviewing wireframe mockups over the phone. I knew this was going to be a problem, as even if we are looking at the same image, it’s not entirely clear what the person on the other end of the line is looking at or referring to.

I had seen some nifty whiteboard applications that used flash. My initial thought was to find one where images could be uploaded, and then both of us could draw directly on the image.

I started looking at various collaborative applications. There is no shortage of options, but each one had a critical problem.

GoToMeeting – Only allows Mac users to view presenter screen (not clear if there is a true shared screen).

Zoho Meeting – Private beta. And I think it follows the same one-to-many (presenter-audience) model. I want everyone to have equal control.

Vyew – I thought I had finally found a winner. I was able to upload images and draw on them. People could access my room with the room number, without a complicated registration process. But only I could draw on the images – not guests! Their metaphor is that I create my “book” and then show it to people. The same presenter-audience model as zoho meeting.

ConceptShare – A slick way to gather feedback on visual work. It’s more designed around the idea of creating notes and then attaching them to a document, as opposed to a real-time collaboration environment.

So, I was frustrated. How hard could it be? Which is of course, the last thought one thinks before starting to build it myself.

But it all worked out.

It’s a pain to demonstrate networked applications, so I whipped up a simple model to show the interaction. Two or more people load a URL. Anyone who clicks on the image, moves the cursor. It’s that simple. And in my tests it worked perfectly. There is no interface, you just use it. And it is very natural to click on something which speaking.

Looking back, it’s actually a dead-simple flash application. What’s novel is that I’m saving some data to a “shared object” on a Flash Media Server. So, when one of the people viewing the application, clicks on the screen, it updates the cursor position in the shared object, and then the cursor position is updated on all screens.

If you’d like more info on this application, give me a shout.

While cleaning up my webserver, I stumbled across a mini-project called Kvetch that I totally forgot about.

The concept is simple: How to provide feedback to broken or annoying websites?

Now, I admit: Being a responsible interface designer, I’ve sent detailed, constructive, unsolicited feedback to various websites. The result? Usually nothing. Or the dreaded, “Well, no one else ever complained.” (Hey, I was trying to help out. Now I’m a complainer?) So, I don’t do that anymore.

But, in the mostly one-way web, there is something satisfying about sending a message back to the people running a website. So, I created Kvetch which uses javascript bookmarklets and server logs allows you to quickly express yourself.