We recently made the Flipcase app — an iPhone game that uses the case of the iPhone 5c. It was made as a fun weekend hack but the app got some good press coverage and was shared around the web quite a bit. If you haven't seen the app you can watch a one minute video below.
I wanted to show a little of the process behind designing the Flipcase app, going from early sketches, to a basic prototype, to a working app in the Store. Here it is:
Goals & Constraints
The most important part of any design work is to understand the goals you want to achieve for your users and the constraints that surround the problem. When the goals and constraints are deeply understood you then have a *chance* of reaching a solution that really works.
For Flipcase, the goal was super simple: just make something fun. The constraints were also simple, but incredibly challenging: build something using the 5c case - a physical accessory that we hadn't even seen or touched yet. Once we put these goals and constraints together we had a great base to work with.
Sketching
Once I get an idea in my head the first thing I do is sketch out how it might work. I have a notebook full of sketches and ideas and concepts, for all kinds of stuff. Everything is super lo-fi and quick and dirty; often it's just a bunch of fast scribbles to get the basic ideas down. Nothing is accurate or precise, and there are no detailed interactions — just rough screens, basic elements, and early flows.
Below you can see some of the quick sketches I did early on for Flipcase. You can see the first ideas for the animation bounce, the basic game play screen, an app icon, the intro help screens, and some of the screen transition ideas.
Prototyping
After sketches I normally jump into Photoshop to create some rough UI screens, or I use Keynote if I want to mess round with interactions and animation.
Below is an example of one of the first interaction prototypes for Flipcase, made in Keynote. This was the first attempt at getting the basic functionality of the app described in a visual form. (Note: at this point we didn't even have a physical iPhone 5c or 5c case to play with, as they hadn't been released yet. Instead, we were just working off the images and information we could find online before it had been released).
In the quick video below, you can see the first bounce animation ideas for the coloured discs in the game. This was put together using an image of an iPhone case grabbed from the web, coloured circles I drew in Keynote, and some quick animation, also done in Keynote. Once this was working in a basic form I passed this file to my partner-in-crime Stuart Hall so he could get started on doing the real animation with UIKit Dynamics.
Building
Once we have a rough mockup I'll then go into Photoshop and make production UI assets. I export the assets using Slicy, and we add them to the Xcode project. From there we'll get a basic build working as quickly as we can. Once we have a build on our devices we'll go round and round again in this same process, reworking UI designs, figuring out better interactions, trying to get to a better state of game play.
Iterating
After getting a quick version into the store we then go into a pretty constant cycle of iteration. There's nothing like using an app in your hands or watching someone else use it. For us the best test was to watch our kids using the game. Did it require any explanation? Did they know what to do? Did they take the right actions? Did they have fun??? Watching how people use your app is so important and we always learn way more from this stage than any other. After all of this, we submitted a 1.01 which included a heap of UI and dev fixes, and also included a two player mode.
Results
Press Coverage
We got some good press for Flipcase including coverage in Techcrunch, Huffington Post, The Next Web, TUAW, Cult of Mac, Polygon, 9to5 Mac, Macstories, iMore, and Gizmodo.
YouTube Video
We made a little video about the app and put it on YouTube. This did fairly well, and was the single most shared piece of content around the app. This video took less than five minutes to make, and was shot on my iPhone 5. The production quality is super low, but it captures the essence of the game, and the soundtrack adds to the fun. Here are the video stats:
400,000+ plays
926 thumbs up / 80 thumbs down
162 comments
Social Mentions
We also received quite a bit of sharing on social media. Here are the stats:
1802 Tweets
609 Google+ posts
3053 Facebook likes
1857 Facebook shares
App Store
After all the sharing and press you'd expect that downloads on the App Store would be pretty solid, but we didn't actually get huge results. We recently put the app up to paid and it ticks along nicely, but it's not a breakout app. Based on feedback from users, it looks like the number of people with a 5c case is actually pretty low, and there isn't a huge market for a game that requires the official case. That said, it was a lot of fun to make, and the design constraints of the physical case position made it really interesting to work on.
Sidenote #1
This whole design process was made much more complex by the fact that most of it was done before the iPhone 5c had actually been released. We'd seen the announcement from Apple, but that was all the information we had, and without a physical device or a case we were flying blind and didn't actually know if it was going to work.
So, come the release day for the iPhone 5c, I found myself queued up as one of the first in line to grab an iPhone 5c. When I finally made it into the store I went straight to the case section and found a helpful store genius. He was absolutely confused to see me trying to attach a case to the *front* of a iPhone 5c, tapping away feverishly through the case to see if the idea would even work.
The store genius quietly tried to move me away, explaining all the time that the case was meant to go on the *back*, and generally looking fairly concerned at my state of mind. “Yes, yes, I said, I know. I know. I just want to… Ah, never mind, it doesn't matter…” Anyway, I finally managed to make it out of the store with a 5c phone and two brightly coloured cases, and suddenly we were on.
Sidenote #2
A final note: we actually got rejected by Apple when we submitted Flipcase for review. The reason? We hadn't provided the “associated hardware or accessories” for testing. What hardware you might ask? Well, it seems that the testing team did not actually have a 5c case at that time, and they were unable to test the app. So we got rejected and had to go through a long process to explain that the required hardware was simply the new case that had just been released. Eventually everything got figured out after a few weeks of back and forth, and then suddenly we were approved.
So that's the story of Flipcase. If you have a iPhone 5c case you can check out the app here.