The evolution of an iPhone app interface
I recently released Starting 11, an iPhone app in which you can pick your own football team line up and share it via e-mail and Facebook.
From idea to app store submission took about 10 evenings of work. The lions share of that time was spent perfecting the user interface. Below are the design iterations from idea to App Store release, click the images for full versions.
Since I had the idea for this app just before the FIFA World Cup started, I quickly decided to use the Xcode template "Navigation-based Application" to simplify development, hoping to get it published before the World Cup had finished. By focusing on polishing the pitch view, which would be the view where the user spends most of his time, I figured I would get the most bang for my efforts.
Initial idea sketch
Using the brilliant and free Adobe Ideas app on my iPad i quickly sketched the basic UI and zoomed the resulting image to match the size of my iPhone. This gave me a feel for the size of the UI components, allowing me to decide that it would be feasible to have a full football team on screen at once.
Grass and scoreboard
To generate the grass for the pitch I followed Andrew Houle's Photoshop tutorial, ending up with a huge image of grass texture. My brother graciously provided me with the chalk lines marking the pitch and with the scoreboard graphic which has a nice detailed mesh effect only visible with the extra resolution available on the iPhone 4.
Player kits
I had decided to represent the players on the pitch by having their jerseys show the number on the back, the name would appear beneath. My first effort used a combination of rectangular UIViews to create the illusion of the jersey. I was hoping this would allow me to save time, but it just didn't look good enough to match my vision for Starting 11.
I had to implement my own UIView subclass to handle drawing the player using vector graphics. This allowed me to create something that more closely resembled a jersey.
I also decided to add a dark background to the player names.
After using the app in this state for some time I decided that the shoulders needed to be more rounded, and that a black outline around the player added some needed contrast, especially important when using the application outdoors in the sun. For the same reason the color behind the player name was darkened.
I also added a small line to indicate the separation of the player's legs, without which it looked like the players were wearing skirts.
Finally the flags for all countries had some shine added to them, then the Share button was added and I decided that instead of having the team's name appear on screen twice the navigation bar should contain the application's title.
And there you have it, the UI of version 1.0 of Starting 11. What do you think? What would you change?
Looking forward
After the World Cup is done and we have a new world champion team, the next step will be to add the possibility for customers to add and modify teams. This will make the app useful for the club competitions that start up after summer.
Regarding the iPad I think Starting 11 would be a wonderful fit for the larger screen, so I plan to make it a universal app that supports both the iPhone and the iPad form-factors.
Until these steps are done the app will remain free. I will eventually start charging.
