Originally a Graphic Designer by education, after finishing undergrad, I transitioned into interface design because of my love for technology. I want to write about this transition and my process, because I hope it will be helpful to designers interested in mobile.
Today, Foursquare 6.0 went live for iOS, and I’m thankful to have been a part of it. I’ll start with writing about this project because it’s closest at hand, but I’ve set myself a goal to write more this year.
During last summer’s Foursquare 5.0 project, I started committing assets to our iOS repository in Git. This time, I committed my first line of code to Foursquare.
I know the filenames of our assets, but I don’t know my way around our Xcode project or UIKit. To tweak a part of the app, I grep for an asset’s filename. For instance, I wanted to add a custom pressed state to the check in button. Grep-ing for the check in button filename, I found the source code for the button. I looked at the documentation for UIButton and found that it has a method called setImage:forState:. Easy. Previewed it in the simulator, and pushed the Go button when I was happy with the effect. Using the same method, I tweaked typography.
One of my favorite parts of this project didn’t require any coding on my part. Foursquare’s brand is playful when appropriate, and we like to hide Easter eggs. Working with an iOS engineer, Brian, we added a hidden pull-to-refresh graphic. First, I gave Brian a blank, placeholder image so he could functionally complete the pull-to-refresh. As I worked on the illustration with a designer teammate, I continued to commit (and overwrite) the same image until it was done. I make many changes to our app like this.
This release took just over a month, with four dedicated iOS engineers (plus one more, who joined Team Foursquare during the last few weeks of the project).
Special shout out to our newest member of the design team, Mark, who made a tremendous impact on this release. You can see his handiwork on the new Sign Up screen, among many more places.