The Prototype

Front Page:

On lookup:
I spent the better part of a day whipping out this prototype. This was a combination of trying to make sense of Python, learning the App Engine world view, and hooking up the raw data to the code. I do have to say that the App Engine getting started docs are awesome. I probably copy and pasted more code then I actually wrote (always a sign of a great programmer ;). Luckily the design was relatively easy, considering keeping it simple is key.

The Architecture

The framework is as basic as they get. User selects two countries and submits the form. I lookup the two counties chosen, determine the appropriate codes, and display them along with the standard "area code + phone number".

The only "tricky" piece is mapping the country name to the various codes. Not knowing Python very well, I had to Google around for the best approach, and how to accomplish it in Python. Ideally I'd be using a hash (or "dictionary" in Python land), but then I'd need a huge hash table somewhere in the code. To keep it simple, and to try out some of App Engine's built in API's, I decided to load up the data into memcache:

# Slurp csv lookup file and fill up memcache if we don't already have the data set
if memcache.get("United States of America") is None:
  lookup_dict = csv.DictReader(open("lookup.csv"))
  countries = []
  for row in lookup_dict:
      memcache.add(row["Country"], { "country_code" : row["Country Code"], "exit_code": row["Exit Code"] })
      countries.append(row["Country"])
  memcache.add("countries", countries)

I don't know of a better way yet to check whether the data is in memcache, but otherwise pretty straight forward. I create a key for each country, with it's associated country/exit codes, and create a separate list of all the available countries. Note that the "lookup.csv" file came from the Dabble DB database export I created previously.

Performing the lookup once the form is submitted is as simple as:

country_from = cgi.escape(self.request.get('from'))
country_to = cgi.escape(self.request.get('to'))
exit_code = memcache.get(country_from)["exit_code"]
country_code = memcache.get(country_to)["country_code"]

The rest of the code is basic web app framework support code that handles showing the two screens. I also took advantage of the templating support to keep the code super clean. What's nice about a simple app like this is that I can basically walk through the getting started guide and have most of the app done by the time you get to the deployment step.

The Design

Clearly the goal is to keep the UX as simple as humanly possible. This is nice since my design skills are very much lacking. Though often times keeping a UI simple is the hardest thing to do and takes decades to master. So far though, I'm pretty happy with the results.

My goal from the start is to focus on making it effortless for a user to come to the site and get the info they want. I'll probably end up putting something on the results page to drive revenue, but for now I'm leaving that alone. Since hosting is free, I can always launch without any kind of ads, and figure out the best approach down the road.

Some of the thoughts going through my head while creating the prototype design:

1. All visitors want to know is how to call a certain country.
2. They'll know what country they are in (I hope!), and where they want to call.
3. They'll have the country they want to call fresh in their mind.
4. Make it obvious what they need to do. Select where you are, and where you're calling.
5. Default to the most common case. I'm anticipating (and designing for) the US based market first, so let's default to USA. Maybe down the road I can figure out where they are based on IP and default to that.
6. Once they submit the page, all they need to know is the codes they need to prefix their calls with. They already know the phone number and don't want to have to type it in. Make the codes really easy to see.
7. Make the results page bookmarkable.
8. Remind them who they are trying to call on the results page. Though I would love to just show the number without anything else.
9. Don't go into the theory or terminology behind what these codes mean. No one cares. They just want to make their call.

Ideas that came up as I was using the prototype:

1. Will want to auto-submit when the second country is selected...I think.
2. I will probably want to change the drop downs to text fields that auto-complete the country name. It's no fun searching through the list for your country.
3. Show recent lookups by other people. Graph most popular lookups by country, time, date. This could be extremely interesting.
4. An iPhone specific page could be useful, if the real site isn't good enough. Will have to think about how cell phone users figure out the international codes, and if that's any different usability wise. Maybe an iPhone app?
   
5. Need to figure out how to show the edge cases, where the codes aren't as simple as a single number.

That's about it for now. Next up, will put some thought into the domain name, the user stories, competitive research, SEO research, and more UI design. So many things to do!