Iterations on the design

After spending some time on due dilligence and coming up with the domain, I wanted to get back to iterating on the design. Starting with the prototype, my goals were go focus on:

• General usability for inputing the countries
• Playing with the font sizes and element placements
• Have the form auto-submit once the "to" country is selected
• Tighten up the results page
• Add some basic SEO based on the previous research
  

Original prototype of the front page:



Iteration #1:
Improvements:

• Make more obvious what the user needs to do by breaking the questions into two steps.
• Use vertical spacing versus horizontal spacing. Will help when used on a mobile site as well.
• Make the drop down font even bitter.

Iteration #2:


Improvements:

• Thought that people would have a hard time scrolling through a long drop down list searching for their country. So I went with text field. What make this effective (and which cannot be seen with a simple screenshot) is autocomplete magic I added behind the scenes. As you type, the possible matches show up automatically. Note that the US is the default in the Step 1 box, which means users don't have to change anything if they are happy with that choice. I still have a concern though that this isn't obvious and they'll still want to enter USA. We'll see what usability testing shows.
• Made the Lookup button ginormous. Not sure if I should even have a lookup button based on the next improvement, but again I'll see what usability testing shows. Used some tips from here
• Added auto-submit once you enter your Step 2 country. As soon as you select your Step 2 country, it submits the form and takes you to the results.
• Use some jquery magic to show some default text in input text boxes, and remove it once clicked.

Original prototype of the lookup page:

Iterations #1:

Improvements:

• Changed the heading a bit.
• Increased the font size of the important information, since that's all people really want.

Iteration #2:

Improvements:

• Left aligned the heading. Something I learned from "Design for nondesigners" is to resist centering as much as possible. I think it looks better.
• Changed the heading text to emphasise the countries involved, and make it more instruction based.

Other Improvements made (for basic SEO):

• Make the title of the front page "International calling codes made easy"
• Make the title of the lookup page "How to call from - International calling codes"

Still to do:

• I'm not sure why tabbing through the page doesn't ever end up on the lookup button. I'd like to make this work so that users can tab around and submit the page, if that is more natural to them.
• Need to text this design in IE6/7, Safari, Chrom, and Opera.
• Need to clean up some of the Javascript and CSS.
• Need to implement a lot more SEO elements, especially meta tags.