My First iPhone Game: Outlaw Poker


This is the story of Outlaw Poker, an iPhone game I just launched that is equal parts Tetris and Poker. It’s a western themed puzzle falling blocks game. The object is to make 5 hand poker hands with the falling cards. The cards can be rotated just like in Tetris-style games so that you can arrange the cards into Poker hands horizontally or vertically. It is available here on the iTunes App store.

I initially had the idea almost a year ago. I wanted to make an iPhone game just to go through the process of making one as well as to have potential for some passive income. For those of you who are not familiar, developers can sell apps in the iTunes App Store and make money. The developer determines the price and whatever you make, Apple keeps 30% for facilitating the transaction and taking care of the distribution, billing, etc. Not a bad deal especially considering there are over 100 million iPhones in the world.

So how did this game come about? I was thinking about games I liked and games people liked in general. If I had to name one game that had mass appeal, it was Tetris, hands down. Another trend that has caught on in the recent years is the popularity of Poker. My thought was to combine the two popular concepts together: a falling cards game where you have to make Poker hands.

There wasn’t anything out there like this and I wanted to play it. People say one way to make a successful product is to scratch your own itch – that is, make something you want and hopefully others will want it too.

Since I wasn’t an iOS developer but designed stuff, I went about looking for a developer who would want to partner with me to develop this game. Initially I had recruited a lead Creative Designer who would lead the charge on the design direction of the game but he was quickly overwhelmed with his own work. I also managed to find an iOS developer who was initially interested but was also too busy to take the project on.

So the project never went anywhere for a good six months. I would design some screens and work out some details every now and then, always keeping an eye out for an iOS developer looking to meet a cofounder and have a game under his/her belt.

One day I went to some developer meetup and met my cofounder Ben Roesch. He was a friend of a friend and worked at Accenture Tech Labs, where I used to work. I was straight up with him. I told him about the concept, showed what screens I had to him and asked if he wanted to work on this app. I basically told him everything. If he decided to decline but run away and take my idea, he had it and I would be screwed. He was game though. Within 2 weeks he had a rough prototype of the game that basically worked but had none of the bells and whistles. It was a very good sign.

Over the next months, we would hash out the missing artwork/screens, tweak the gameplay, find the sound and music. One of the hardest things to come up with was the new company we formed. I love puns and wanted this new game studio to have a witty name. Since it was an game app company, I thought it would be cool to have the word ‘app’ in the name. Unfortunately anything that I came up with like ‘tap that app’ was already taken. I think I finally came up with Appuccino Games because I’m a big coffee drinker and it reflects the fact that coffee helped us make this game. I wanted the logo to reflect the dual nature of the word play (app and cappuccino). Once the name came together though, it was easy to come up with a concept for the logo – an iPhone that looked like a coffee cup.

I wanted to take this moment to thank everyone who had a hand in making it. A big chunk of this goes to Ben who without him, my concept would never have been realized. Thanks Ben. I also owe Matt Jensen a big thanks. He came up with the original art direction. Even though you didn’t have the bandwidth to join us on this, I still want to thank you for all the work you put in. Don, thanks for forming our new company. I look forward to more business with you. I also want to thank all the beta testers who gave us valuable feedback. I won’t remember everyone but here goes: Craig, Ulliott, Sami Rageb, Christian Arca, Joe Dwyer, Christopher Lee, Brad Flora, Ravi Singh, Tal Liron, Nick Aiello, Brandon Leonardo, and more.

I also want to take a moment to thank Steve Jobs. He’s been an inspiration to my career. Without him, this game would not be possible. The platform this game was built on would not have existed. You have enabled me to not only create this game, but to be able to distribute it to the world. Thank you.

Without further ado, our game is here on the App Store. There’s also a free ad-supported version here. The difference is that the free version has ads AND the ad takes up one whole row so you end up with less playing area.

Popularity: 7% [?]

Quick & Dirty iPhone App Wireframes

No Comments

People pay lots of money for various wireframe tools. There are wireframe tools for all flavors of OSes but none of them have really appealed to me. In my work, my deliverables are not wireframes so my advice may not apply to all. However I think even people who do deliver wireframes can benefit from this simple technique. It’s so easy anyone can do it. Even if you are used to using wireframe tools, you might want to give this a shot because of how fast you can test out your ideas.

All you need are three things:

  • iPhone
  • paper pad
  • pen

You start out by drawing a rectangle the size of the iPhone screen. Then you just start drawing your UI within that rectangle. Draw how your app would look like. If you have many screens, draw those screens too.

Next take pictures of those screens, making sure that each screen fills up the entire camera view. Now, just load up the Photos app and pull up those screenshots. Viola you have a ghetto wireframe that you can see on your phone, You can move your thumbs over it and see if it feels right. You can swipe and go to the next screen. You can swipe back and go back to the screen you came from.

This is a super quick and dirty way to mock something up and test out some theories. What I have here took less than 5 minutes and the great thing is that anyone can do this. I had 3 screens that I wanted to think through. Doing this made it feel more real and I was able to improve upon the designs. Putting it on the phone got me thinking about things I wish I could do with the app that I wouldn’t have thought of if I was just staring at it on the computer screen.

You might say, that’s great Pek, but I can’t draw to save my life. In case you haven’t seen my chicken scratch, but I can’t really draw either. If you don’t feel confident in your skills then you can rely on something like this

I think this useful when you want to get slightly higher fidelity than the sketches but that higher fidelity comes at the cost of additional time.

Popularity: 11% [?]

Good Design is …

1 Comment

Just got done watching the independent film Objectified, which deals with industrial design and it got me thinking on what makes good design. For me, good design is …

Good design is intentional.
Good design is whimsical.
Good design is emotional.
Good design is subtle.
Good design is functional.
Good design is empathetic.
Good design is inviting.
Good design is clear.
Good design is forgiving.
Good design is proactive.

Of course good design is much more than this and means something different for everyone. I thought I would start with these as a sounding board and checklist for when I come up with the designs of products I work on.

Popularity: 3% [?]

Designing For Non-Technies and Neophytes

1 Comment

I have recently had the great fortune and pleasure of observing non-techies and neophytes use new software and it’s been an eye opening experience. Web designers who have been around software applications and the web for ten years develop certain assumptions about their users that may prove hazardous to their web app if their target users are supposed to be non technical or non web savvy users.

Here are some real life stories based on my first hand observations.

Story 1

I once had to perform a martial arts demonstration that was choreographed to music. I brought the music on my iPod. Prior to the demo, I gave my iPod to the sound technician and the MC. The iPod was set to the specific playlist and all they had to do was to hit Play when we bust out on stage. Apparently I had not counted on the fact that neither person had ever operated an iPod before and had no idea what to make of the click wheel. You could say that they must have been living under a rock for the last 10 years but I disagree. They weren’t stupid people either. One was an engineer and the other person was in the financial sector and had an MBA. Apple fanboys will argue me to death about the fact that Apple products are super easy to use. They might be once you learn how to use it but for a first timer with no instructions I think Apple devices can be quite cryptic.

Story 2
I observed a 10 year SaaS CEO and a software engineer use a particular website with much struggle and frustration. The software was supposed to be geared towards non-technical people but it was riddled with icons void of accompanying text descriptions. Neither of the users knew where anything was or what anything meant. The SaaS CEO who was used to Windows exclaimed that the software was full of Apple icons – confusing the use of icons for the Apple design sensibility.

I think these stories are indicative of a larger phenomenon. Designers who have been accustomed to the web and some of the UI affordances are making assumptions about certain user experiences.

Take for example this screenshot of Twitter for iPad. On the bottom left we see two icons. As a veteran web user and an interface designer, I immediately recognize that the two icons mean New Message/Compose and Settings.

However, I think that’s a pretty big leap for someone who’s not a web savvy user to assume that they know what those icons mean. I think UI designers can get too clever and do their audience a major disservice when they start making such assumptions about what icons their audience ought to recognize without further explanation.

Popularity: 2% [?]

Minimalism in Web Design


As web designers we must resist the urge to keep adding. Clients often want more features and we struggle with how to do that tastefully, and in a user friendly manner. We also want to make our designs “prettier” by adding more “stuff” to it. This tidbit of advice from Coco Chanel for women resonates with me as a designer.

Do the hair. Do the makeup. Get yourself fully dressed and then, before walking out the front door, pause by the mirror and remove one item. Maybe it’s the hat. Maybe it’s the piece of jewelry you really don’t need. But the line, according to Ms. Chanel, between knockout and near miss could be found in a single overdone object.

link here

With that in mind, I’ve started to really think about the current project I am working on and what I can remove.

Popularity: 4% [?]

Older Entries