Saturday, November 24, 2012

Letterpress Deconstructed

The iPhone game Letterpress is incredibly popular with my friends. Games usually only make it on the iOS platform if they're very polished and have elaborate graphical detail. Letterpress is a different kind of polished. Its look is sparse, strict, and minimalist.

Because Letterpress is lacking gradients, drop shadows, and other embellishments, the Google Product Manager in me decided to take it apart and analyze what makes it a great experience. I found no bells and whistles, just carefully executed transitions and animations at every step.

I present to you Letterpress, deconstructed.

If you haven't heard about Letterpress, it's a word game where you have to form words with letters on a 5x5 grid. When you use a letter, that turns it blue. When your friend uses a letter to form a word, those letters turn red. Once the entire grid is covered in red and blue, the letters are counted up and if there's more blue than red, you win. It looks like this:


The Story Behind Letterpress

I would have expected a bit more of a back story on the app's website, but it only provides two sentences about the origins [2]. I found this Mashable piece that provides a bit more background. Letterpress was made by Loren Brichter, whose previously worked at Apple, and then built Tweetie where he invented pull-down-to-refresh. He sold Tweetie to Twitter where it became Twitter for iPhone. He recently left Twitter and started "atebits", the company behind Letterpress. Atebits is really atebits 2.0 - the first company that made Tweetie had the same name. He developed the Letterpress idea when he and his wife were playing SpellTower in single player mode side by side.

Why It Works 

Competitive element: Competing with your friends is addictive. There are enough games like Scrabble and Words with Friends that make it feel familiar. This makes the rules of the game easy enough to understand and get started quickly, and hard enough to master to feel challenging. [4]

Unusual navigation: Any other developer would have put a navigation bar on top of the app with its name on it. This is what we did with DrawChat - trying to burn the name into people's memories. Yet you can't find the name of the app anywhere in Letterpress. The little back arrow on the top left feels exciting and new, yet familiar enough to be useful.



Animations: There are a handful of really well-executed animations in the app. Despite the relative dryness of a grid of letters, this conveys to the user that the app is well-executed and fun.

Wait spinner: Since Letterpress has to load the current game state from the web, a user will see the wait spinner pretty often. The Letterpress wait spinner is the company's logo. This has long-term brand benefits. But also it's cute and well-executed. Every 8 turns, it randomly spins backwards to give it some personality. This is apparently in reference to the company's name (atebits = 8 bits).




Zoom into game: Clicking on a game zooms into the current game, rather than just opening it in a new page in the traditional iOS style. Note that all of the table view cells get animated at the same time, not just the one you selected.



Last word played: After opening a game, the last word played in the game gets popped up.


Dialog animation: Dialogs come in top-to-middle and fade out middle-to-bottom. At the very end, they get a little shake before they disappear.



Clear animation: Clearing the word in a game makes the tiles animate back to their original location.


Sounds: The most recent version of the app (V1.1) adds sounds to almost all actions in the game. The developer notes in the upgrade notes that he spent a lot of time on these. The sounds of selecting letters, clearing your word, and receiving a word from your opponent are very satisfying.

Game Center: I'm undecided on whether this is a benefit. Game Center allows Letterpress to piggyback on the existing social graph of iOS. Thus it doesn't have to deal with the messiness of integrating with Facebook directly to match you up with friends. But two things speak against it: First, Game Center is ugly and soils the look of Letterpress. Second, Game Center's screens are a bit too complicated for the average user to understand and thus cause a bit of churn: For example, what does "Invite up to 1 player" mean in the friend selection screen? You should just click on one and the game should start. In addition, Game Center's design is uncharacteristically kitschy for a core iOS app and going between this and Letterpress feels jarring.

Purchasing Flow The prompt to purchase the game comes in at exactly the right point: You've already played a game, so you know how the app works and that it's fun. You're prompted to purchase the $0.99 multi-game upgrade just as you hit the "New Game" button. It's clear to you what you're buying and why you should buy it.

Not Rocket Science

Overall, none of this is rocket science. I'm pretty sure that all of this could have been done with UIKit, but it turns out Brichter implemented his own animation engine in OpenGL [1]. What sets Letterpress apart is that there are few screens and little complexity, every screen in the app is thoroughly executed, and every transition is carefully animated. Nothing you or I couldn't do. "Modern art is when you could have done it, but you didn't," the saying goes, and it is also true for Letterpress.

--

Conversation on Hacker News

--

Notes and Corrections

[1] The original version of the article stated "This is all UIKit", but the animation engine is actually implemented in OpenGL (thanks to wallflower on Hacker News for the tip)

[2] The original version of the article said that "the app and its website play the mystery card", but the website actually provides some background about the origins. I changed the post to reflect this. (thanks to pflats on Hacker News for the tip)

[3] The original version of this article said that "Sometimes the spinner randomly spins backwards", but xuki points out on Hacker News that it's actually once every 8 turns.

[4] Great point by nbashaw on Hacker News on the game mechanics of Letterpress: "I love how letterpress is really a territory game disguised as a word game. Instead of rolling a dice like you do in Risk, you find words to form your attacks. Rather than trying to pick up words with obscure letters, or lengthy words, you try to capture strategic tiles and expand your controlled area. Once you cover a large area of dark blue tiles, you choke out your opponent's ability to score points, and the game slowly snowballs further in your favor. It's really fascinating."

Wednesday, November 14, 2012

Selling DrawChat

Coverage:
-----

On Saturday, I was at the SF Ferry Building Farmers Market and was nibbling on some of Primavera's Chilaquiles. That's when I got the email.

[Pusher] Your account is getting close to its usage limits

We are using Pusher for DrawChat to send chat messages to their recipients in near-real-time. Pusher's Sandbox plan allows for 100k messages a day. This seemed to have been some sort of bug.

When I got home, I started investigating. I looked at Flurry and Localytics, and it looked like our numbers were just through the roof. But there was no press, no email from Apple, no explanation. I tweeted out my puzzlement, and a follower replied:
And there it was:


When I pitched DrawChat at Founders Den Demo Day, I jokingly added a handdrawn hockeystick curve as a slide at the end of my presentation. My whole performance was more standup comedy real pitch, and I figured I would add this as an homage to the idealized startup pitch deck.


This hockeystick curve had now become reality. For comparison, here is the Parse graph from that day:


DrawChat is something fun that we built after Jeremy and left Google. With UI designer Chloe Bregman (and iOS contractor Thorsten Blum), we literally sat down and said, "what is the most fun thing we can build in a month."

Because of this, we've already moved on past working on DrawChat and are focusing on the next idea. 

Yet we feel there is still a lot of potential in DrawChat, and we think that we could probably spend some time building in monetization - think charging for backgrounds or drawing tools. One app that does a great job at this is Paper.)

This is why we've decided to sell DrawChat. 

Find the listing on Apptopia. Apptopia is a Mark Cuban-funded startup specializing in buying and selling iPhone apps.



Our reserve price is $10k and our buy-it-now price is $200k. Bidding ends on Wednesday Nov 21, 2012 at 9:00 am Pacific time. The price includes 2 days of Jeremy's and my time so we can help out the buyer with taking over the app.

Saturday, November 10, 2012

One More Way of Getting People to Use Your App

Luck.

Something suprising happened right after I posted my last blog post about getting people to use your app.

Apple featured DrawChat, an app I wrote with fellow ex-Googler Jeremy Orlow and UI Designer Chloe Bregman, in the UK App Store.

It's there, right next to Clear and Evernote.




Thursday, November 08, 2012

Getting People to Use Your App

Chances are, someone has already thought of your app idea. Whether it's ridesharing, travel guides, ordering food, housecleaning, shopping guide, video discovery, photo editing, action game, puzzle game: I guarantee you're not the first person to come up with the concept.



Instead of focusing your effort on what your app is going to do, think about distribution first. How are you going get people to use it?

The big guys have a big advantage. If you already have a brand on the web or offline, people are going to find and use your app. Everyone has the Facebook, Twitter, and Yelp apps installed.

Without this advantage, and without millions of dollars in financing, two strategies remain.

The first is to make your app extremely high quality. Hike up production value. Make it really good. Apps like Paper by Fiftythree, Where's my Water, Squrl, and so on fall into this category. The effect you're looking for is that you get featured in the App Store and Google Play, and hopefully the press will sing your praises for long enough for early adopters to install the app, and that the app will then spread through word-of-mouth.

Don't underestimate the importance of word-of-mouth. I am a fairly well-informed mobile customer. But the last two apps I installed - Photosynth and Letterpress - were both apps I heard about though friends over brunch.

Still, this is a high risk strategy. Developing a high quality app is expensive, so you'll have to start with building a small number of screens, and hope that those screens are the right ones.

The second strategy is to make your app viral. Users create content with your app, and then share it with others who don't have the app yet.

This worked pretty well for Snapchat, an app that lets you send self-destructing photos to other Snapchat users. An even better example is GroupMe and other group messaging tools - the spread through the power of SMSes sent by friends. An app I wrote with some friends, DrawChat, works the same way. Viral content worked amazingly well for Instagram: Photos with filters didn't solve a stated user problem, but Instagrammed photos started popping up in feeds around the world, leading to brand recognition and ultimately a large install base.

The takeaway: When brainstorming your app, don't just come up with a vision of what it will do. Come up with a strategy to get user adoption.

Either chop away until you have an small feature set that you can implement at very high quality. Alternatively, come up with a way for users to create content they're proud to share with others.

--

This is my latest in my series of posts about the app ecosystem - see also:
  1. Every Step Costs you 20% of Users
  2. The Biggest Problem in App Discovery
  3. Rethinking the App Model
  4. The Two Hurdles of App Adoption
--

Reactions from my Twitter and the discussion Hacker News:

eloquence writes on Hacker News: "It seems like the simplistic ideas are the ones that go viral the most quickly."

I could not agree more. People have limited attention spans and the elaborate app install process already strains it. Simpler app means easier to understand means higher chance of getting people to use it.


potatolicious writes on Hacker News: "The devil is in the details. I think a lot of devs realize they need a very polished app and substantial viral value - the trouble is that you can't just will either of those things into existence, or even buy them.

Executing a good app is really hard, and people who can do it consistently are very rare still. Getting a really cohesive, well-built app done is more than just hiring the most expensive ObjC coders and designers you know."


NeoNacho responds on Twitter: "I don’t agree that being high quality is optional."

Of course. A crappy app won't get you anywhere. It's about how you spend your chips. When I write about the "quality strategy" I mean making something that would look great in an Apple keynote. Think Paper. I don't mean just well done and pretty and and no bugs.

--

PS: Timed perfectly to prove my point about how you're not the only person to come up with your app idea, there is a DrawChat clone on TechCrunch today.