So we made an app. Now what?

Party Monster is our third app, and we’ve become more ambitious – we want to make a splash. Making the product rock is the first step, along with crafting a good icon, screenshots, and so on. The keystone to a good app promotion campaign, however, is a solid video.

To get started, we recruited the awesome Kyle Richtsfeld to film, direct, and edit the promo. Kyle had the equipment and the connections – all he needed from us was a script.

With “party” right in the name of the product, we got to brainstorming how to believably stage a party. A polished video with a crowd dancing to the beat and having the time of their lives listening to our app sounds perfect, right?

Yet going all-in on a party could typecast the app – it’s at least as good at running the music for a road trip, a coffee shop, or just as a personal music player. Hence, grand visions of renting a car and filming a road trip scene on the Sea to Sky Highway danced in our minds.

Right, so how many extras do we need? What is the weather going to be? Where are our sets? We soon realized that all of this would cost a boatload, and worse, we weren’t experienced enough to be sure we could make it awesome.

Even forgetting the cost and the risk of it sucking, showing party scenes and road trips wouldn’t even give a clear idea of how Party Monster actually works. As we learned from the promo videos for Clear, Sparrow, and Flipboard, a well executed spot can get people excited to try your app by showing them how to use it.

Keep it simple

I wrote a very simple script showing me flatly explaining that I was hosting a party, then demoing a few features of Party Monster. It did a good job of demoing the app, but wasn’t exactly entertaining. Later that day, we happend to be brainstorming ideas for a new app icon, our first icon approach having failed.

As an aside, we spent quite some time working with the talented Ryan McMaster on icons for Party Monster, focusing on designing a literal monster. After many iterations, tweaks, and improvements we tried putting the monster into an icon, and were immediately struck: it looked like an icon for a game! On the App Store, where the icon is a huge indicator of what you’re buying and half the apps are games, we had to give up on having a monster on the icon. Honestly, it was sad because we’d grown to love the little guy.

Going back to the drawing board, we settled on a disco ball with horns as the icon design. Within an hour or two, a disco ball had worked itself into the video script as well. Of course, this necessitated actually acquiring a disco ball, along with some dramatic lights from our friends at Pacific Theatre.

And… action!

The filming day came, and we arrived on set: specifically, our camera guy Dimitry’s living room. I was immediately skeptical. “It doesn’t look like night time in here – there’s way too much sunlight.” Dimitry switched on a properly hued floodlight, and bam – it looked like nighttime. The magic of film.

The most time-consuming part of filming was getting the “disco ball moment” just right. After configuring the lights so they were shining on the ball but not my face, we needed a couple dozen takes with one person holding the mic, one person running the camera, myself reading the line, and my co-founder Nigel lowering the disco ball into the frame at just the right time. Getting everybody in sync took a bit of practice.

Halfway through filming, we realized we needed to also show the iPhone version. I proposed just simply holding up an iPhone and declaring “also works on iPhone.” Nigel joked that if we did so, we’d also need a tiny disco ball to drop into the frame on top of the big “iPad sized” disco ball. We all laughed, until Dimitry piped up: “We have a tiny disco ball.” Next thing you know, we had two disco balls in the video.

In the end, our 60 second video took almost 10 hours to film, and later an additional 2 hours to to dub over narration that wasn’t high enough quality in the original take. The incredible thing about filming taking so long (an hour for every 6 seconds) is that it wasn’t due to any big mistakes or lack of preparation. We had a script, the lights were all on hand, and we didn’t cut much. Most of the time was getting the shots, reads, focus, and details just right.

Lessons Learned

In retrospect, simplifying the script was a huge win. If we’d gone ahead with our original ideas for the video it would have been crazy expensive, taken forever, and not turned out as well. Just as in software, simplifying your video is the secret.

Further to the point, weigh your options before you decide to do a live-action promo shoot. If your app doesn’t have any unusual gestures or use cases, motion graphics showing a demo can demonstrate it almost as well, with less complexity. That said, if you’re willing to put in the extra work the live-action approach gets a much stronger reaction from people than flat graphics.

Another thing that helped immensely was having an edited and iterated script on hand. It seems like you could demo your own app fluidly and convincingly on the spot, but the script saved us a tonne of time and increased the quality a lot.

One thing that I would do differently is put more time into preparing demo data before filming. We ended up making a last minute decision to use sarcastic song names (“Great Song”, “Terrible Song”) which wasted some time and effort to set up during filming.

Of course, we couldn’t have done any of this without the help of our crew, Kyle and Dimitry. Even having been through the process, there’s no way we’d do it ourselves next time. Thanks guys!

And so we launch

At last, Party Monster is now live on the App Store for $1.99. Check it out and let me know what you think!

Going universal

Party Monster is the first app Steamclock has built as a Universal app for iPhone and iPad. This seems pretty crazy, considering that we’ve built almost a dozen apps. For some apps there isn’t a lot of extra work to supporting both iPhone and iPad, but most of the apps we do have a thoughtful and polished interfaces. When you have a lot of UI code, getting everything working perfectly with three different screen shapes (iPhone portrait, iPad landscape, and iPad portrait) is a lot more work than just one.

Our philosophy is to do one thing well and then iterate, so we’ve always picked one platform first, and do it right. We have more resources these days, so we went all-in on Party Monster with both iPhone and iPad support. It was a lot of work, but we plan to have all Steamclock apps go universal in the next little while.

Usability iteration

Getting the simple swipe-based UI for playing and pausing songs working was easy, but getting it intuitive was hard. Some users would pick it up and instantly understand, whereas early on some people couldn’t figure out how to play a song. If your users can’t figure out how to play a song in your music app, you’re boned.

Over the last few weeks, we’ve been adding dozens of small affordances to help people through the app. Instead of an annoying tutorial, we’ve been adding little arrows, snips of instructional text, highlighting important buttons, giving better feedback when a user does something weird, and generally tightened up the experience.

Looking back at the design mockup I posted in August compared to Party Monster 1.0.0, the new version looks… exactly the same. Well, the status bar is blacker, the playing song is flatter, and in the screenshot you can kind of see that the playing song has a glowing animation. For the most part though, all the changes users needed were on the iPad or in the Add Songs interface.

Writing an Add Song dialog

iOS provides its own Add Song dialog, which is serviceable: you can pick some songs, and add them. Unfortunately, it doesn’t support:

• Sizing the dialog to fill only part of the screen on iPad
• Queueing one song at a time without having to dismiss the dialog
• Labeling songs to show that you’ve queued or played them
• Adding extra interactions with the songs like swiping to play immediately
• Labeling songs that won’t play, such as DRM-broken tracks
• Refusing to play Nickelback

So basically a Party Monster that uses the system Add Song dialog is a shadow of its true potential. And so we wrote our own dialog, and with it came an army of little improvements and tweaks.

The tiny little details

Good software is a collection of tiny details. Oh my god so many tiny details.

What happens if you’re dragging a song to reorder it, but it’s currently playing, and it starts to crossfade to the next song while you’re dragging it, but then you drop it below the song that’s fading in? What happens if you’re sliding a song on the iPad, then rotate the device mid-slide? What happens if you have a four second skip crossfade, and then you skip six times in a second? Every edge case is a potential trap for a first-time user to get frustrated or misunderstand how the app works because the first time they did something it went wrong.

Where possible, we added small features and easter eggs that didn’t clutter the UI. The lock screen shows the upcoming songs baked into the album art. If you scroll the playing song off the top of the list, it will stick to the top so you can always see it. If you play a song in the iPad’s Add pane that was already in your queue, it will animate from where it was to where it should be. If a crossfade is in progress, we gracefully handle plays, pauses, skips, and other things that are hard to deal with.

Our most-loved feature, on by default, prevents the playback of Nickelback. This started as a joke, then became a running joke, then became a feature, then became our most popular feature. Believe it or not, there is a fair amount of code involved: we need to pre-scrub any playlists you choose for offending songs, and offer a clear explanation when you try to add Nickelback to your queue. As Canadians, we believe this is the least we can do. We are very sorry for the inconvenience Nickelback has caused to our friends and colleagues around the world.

Launching with feeling

Here’s your one-line review: Don’t buy this computer.

A week ago I upgraded to the 13″ Retina Pro from a 2.5-year-old 15″ Pro. While I wouldn’t go as far as Patrick, I did consider returning mine for the first couple days¹. I expected it to be an upgrade, but instead got more of a die shrink.

The Bad

The Intel HD Graphics 4000 can barely handle this display. The smoothness of scrolling and gaming compare poorly to my old 15″ Pro when driving the Retina Display. Of course this is an unfair comparison: a discrete graphics card driving a low-res display is going to outperform integrated graphics driving a high-res display.

For many the discrete graphics might be overkill, but I miss it. I primarily care about RAM and graphics, neither of which are configurable on this machine. So here I am, 2.5 years later, with a new laptop that has the same RAM, same disk, and 0.1 Ghz faster CPU than my last machine. Woe is me, life is so very difficult.

The Weird

As nice as it is to look at the display when I’m on the go, my laptop spends a lot of its time running an external monitor. External monitors for now are not Retina. As nice as it is to look at a HiDPI screen when you’re used to standard DPI, it’s much worse to go the other way. I spend my days now jumping from clear and crisp to dull and cruddy.

The iPad mini poses the same challenge. By all accounts it’s a wonderful device, but it’s hard to look at for those of us who have gotten used to Retina displays. When you can go all-Retina it’s a beautiful experience, but if your external monitor is low-res and your iPad is low-res, is a Retina laptop just a form of torture?

To the software. I use Photoshop and Illustrator a lot, and they look really sad. This was unsurprising. The glitches in Apple’s apps did surprise me however. The migration from my old machine has left me with an iPhoto that won’t launch until 10.8.2 is available for my machine – it alerts me of this fact whenever I plug in an iOS device. When I switch from an external display to the built-in display I often end up with iTunes, iCal, and other Apple apps on screen looking blurry, still drawing at non-retina resolutions. I’ve seen the Quartz window shadows detach from apps and iCal lose the plot and tear horribly when scrolling. These annoyances will all be temporary, so I’ve been mostly ignoring them.

Besides the big points, there are a handful of tiny things you give up going to this machine. A MagSafe connector that actually stays connected, for one. The little battery indicator lights are gone. I suppose you also give up the optical drive, but I probably used that even less often than the battery lights.

In sum, I was spoiled by my last computer, and so for the first time I can ever remember, I’ve gone and upgraded to a computer that doesn’t feel faster in real use. This feels like a strange way to spend $2000², so by day two I hit peak skepticism about this machine.

The Good

When I am running on the built-in display, it brings me joy. It’s crisp, it’s beautiful, and it’s obviously the future. At least as important as my subjective experience is the ability to see how our web work looks on a Retina Mac. Low-resolution assets are everywhere on the web, and although I had a pretty good idea of which of our assets were sub-par, I now have knowledge and motivation to get it all fixed. Just like on the iPad 3, going Retina forced a number of compromises, but you can see why they bit the bullet and did it anyway.

The biggest reason I’m keeping this machine, though, is the form factor. I underestimated how addicting the smaller size and weight would be. I’m more comfortable using it in my lap, on the couch, and my back is thankful. There isn’t a lot to be said about it – for most people, a 15″ computer doesn’t make sense anymore, myself included. This new machine isn’t any faster, but it’s so much nicer to carry and use that it really qualifies as an upgrade.

The Awkward

Although I’ve decided to keep this computer, I’m not convicted that it was the best option. Would a cheaper 13″ Air or 13″ non-Retina Pro, with the same graphics, disk, and RAM, have been a better call? Or would I have been better off waiting for the next 13″ Retina Pro? The fact that I’m unsure speaks to the cluttered state of Apple’s notebook line today. There are a lot of form factor options but few performance options. As John Siracusa puts it, the line is going through adolescence. Weird transitions are happening, and for now we’re living with compromises.

If your 13″ MacBook is less than 3 years old, I’d encourage you to wait this one out for another generation. If you’re moving to an iPad mini, the Retina display on this Mac might just make you sad. However, if you’re coming from a heavy or old MacBook and want a taste of the future, you might just like this machine.

1. Or more accurately, pass it over to somebody else at Steamclock.
2. To be fair, I can sell my old 15″ Pro for most of the cost of this machine, so in practice this upgrade will actually cost very little.

Jony Ive will provide leadership and direction for Human Interface (HI) across the company in addition to his role as the leader of Industrial Design.

Thus ends the reign of skeuomorphism at Apple. Or, at least, the reign of hyper-realism and hyper-whimsy in UI design. Jobs and Forstall always seemed to favour it, and the trend has spawned a considerable amount of backlash. Now can you imagine Jony Ive signing off on a Podcasts app where half the screen is a reel-to-reel tape that bounces when you pause?

So we can expect a move away from Rich Corinthian Leather, perhaps even a move away from shininess, as we saw in the iOS6 dialer app.

Of course a flat look doesn’t need to be butt-ugly like the dialer app – Metro and Letterpress are two great examples. Apple will find their groove, and in a couple years we’ll look back on that Podcasts app reel-to-reel as the 1959 Cadillac Eldorado of skeuomorphism. That is, until it becomes cool again.

This is a gadget that seems as if it fell into the box fully formed. If you run your hands around its face, you scarcely feel any seams or other points of connection; there’s little evidence that this thing is a highly complex device made from lots of smaller things.

What? Are they holding the same phone I am? There are seams everywhere! They stick out in particular on the black device, since the thing is covered in a plethora of contrasting blacks.

1. The screen
2. The bezel around the screen
3. The thin plastic inserts around the edge of the screen, edge of the back-top glass, the edge of the black-bottom glass
4. The two shiny chamfers
5. Five dark plastic inserts in the sides to break up the antenna and around the camera
6. The metal back, which is matte and hard to wipe clean
7. The shiny Apple and iPhone logos which feel weird against the texture of the metal
8. The metal edge around the case

There are so many slightly different blacks that I’d much prefer the look of a silver-and-black iPhone 5, more like the iPhone 4. There are so many materials that embracing the contrast would have been preferable.

Specifically, the horizontal seam between the glass and the back plate is crazy-making. Little bits of fluff and such get stuck in it, and the fact the camera isn’t vertically centered in the glass highlights that these “radio windows” are a compromise.

Still, after two weeks with this phone, I know the weight and thinness are worth the compromise. But a compromise it is. In contrast, Gruber’s iPhone 5 review praises:

Is it worth devoting the first 750 or so words of this piece to the iPhone 5’s surface appeal? I don’t know how else to convey the niceness of this thing. This iPhone 5 review unit is the single nicest object in my possession.

I understand the feeling – I felt it when I went from an iPhone 3G to an iPhone 4. Two years later, the 4′s glass front and back with the aluminum band continues to be the nicest-feeling object in my possession. The iPhone 5 is a better phone, but as a pure and elegant use of materials, the iPhone 4 still gets my vote for the nicest phone ever made.

The more things change…

The sum of many small changes has a really big impact. The Retina change doesn’t really show in the product shots, but many design changes and post-production decisions do.

• Naturally, the 16:9 screen is the most dramatic change.
• Believe it or not, the original iPhone promo shots didn’t have the now-trademark reflective sheen on them.
• There are seven new icons: Videos, Passbook, Reminders, Newsstand, iTunes, App Store, and Game Center. In retrospect, the empty row for icons on an iPhone with no App Store should have been suspicious.
• The cellular provider is no longer shown in the promo shots, even though it shows full cellular signal. I’m not sure if this configuration is actually possible.
• Calculator goes away, although nothing else does.
• iPod has become Music, Text has become Messages. Next up: Phone becomes Voice?

Boring

Despite these changes, it’s really remarkable how much is the same, five iterations later. How positively boring.

• Every visible button is still in the same location: home, power, volume, mute.
• The first and last rows of icons are exactly the same! The same eight apps are in the same eight places in iOS 6 as in iPhone OS 1.
• The icons have kept their exact shape and spacing. What originally seemed distinctive is now an industry standard.
• It’s still 9:41, even though the Clock app has changed to a more traditional 10:15.
• The dock still remains four apps anchored to the bottom of the screen. It’s worth remembering that on the original iPhone the dock wasn’t really even a dock, since you only had one screen and couldn’t rearrange icons.
• The calendar’s day is the weekday and date of that device’s announcement. Thoughtful consistency though subtle change.

Boring or revolutionary?

Considering how far the functionality has come in these five years, it’s kind of bizarre how little the basic promo shots have changed. The hardware is a little taller, but it’s still fundamentally a refinement. The iPhone team has fed us a steady drip of pleasant refinements that add up to something not revolutionary, but a hell of a lot better than what we had in 2007. Even if it is still 9:41.

What to build?

In v2 of our Wedding DJ app, we really want great request management. Queuing, skipping, and reordering songs needs to be extremely easy to use, so you can get back to the party and not accidentally put everything to a screeching halt. The more we discussed this feature though, the more we wanted it as just a standalone app.

There are a ton of things the default iOS music player can’t do well:

• I want to hear this next.
• I want to hear a certain song, and then continue a certain playlist.
• I want to look through what’s coming up, and veto certain songs.
• I want to skip or pause this song, but have it fade the transition.
• I want my songs to crossfade.
• I want to queue up a few songs, and then let it ride.

So what we want is a simple queuing music player that crossfades and is very quick to operate. It would shine brightest at a party, where curation and avoiding a sudden stop is most important. As a matter of fact, it could serve as a drop-in replacement for WeddingDJ for some weddings. Another awesome use case is road trips, with the passenger curating the tunes.

For now, we’re calling it Party Monster. I’m not sure, but I suspect this is an awesome name.

What does it look like?

Almost immediately, I get to paper sketching. I’ll usually sketch a couple dozen versions of an app’s main screen, and roughly sketch some of the other screens. A lot of my sketching time is actually spent going back and forth with the team, pitching things. Well, more often I pitch removing things. “What if we take out reordering songs?” “What if there’s no explicit skip button?” “Is audio playback strictly necessary? Okay, fine.”

The starting point is iTunes’ Party Shuffle behaviour: fill the list of songs from a playlist, and allow the user to queue more songs below the play head. From there, we trim the fat and stir in some unicorn dust.

We managed to rid ourselves of almost every button, including play, pause, and skip. For a personal music player you often skip many times in a row, but for a DJ player like this you usually jump to a specific other song, and almost never go backwards. And so, we adopted Clear.app‘s delightful pull-to-act approach. A lot of swipe-to-act implementations suck because they either don’t give enough feedback that you’re on the right track (Tweetbot’s swipe on tweets is like this) or they reveal more buttons, making the task very slow. Clear’s behaviour is more like a sideways pull-to-trigger behaviour, and it’s a joy to use.

In Party Monster you pull a song one way to play, and the other way to ditch an upcoming song. If you forget this, you can always tap a row and it’ll bounce to indicate you can pull it – like Apple’s home screen Camera button. All this together makes for very quick operation and no accidental skips or pauses. Or, so we think – none of this has even been prototyped yet!

Now make it pretty

It takes iteration to get mockups looking good in Photoshop, and then many roundtrips through xScope Mirror to get the look right on the actual device. In the case of Party Monster, on-device testing showed that the tap targets needed to be bigger, the dark theme had to go, and that my color calibration between Photoshop and the iPhone is not even close.

Just like the name Party Monster, the choice of purple was kind of random, but it stuck and people seem to really like it.

Now all you need to do is build it

The mockups are good enough that we can start showing them to people, and feedback so far has been good. We have lots of work left: upgrading WeddingDJ’s audio engine for the new features we want to add, building out the UI for Party Monster, and writing all the nice animations and effects we have planned.

So, what do you think? Is this something you’d buy for $1.99 on the App Store, and if so, what aspect you most interested in? What do you think of the design? Are we completely insane?

Updated Dec 5, 2012: Party Monster is now live on the App Store!

Unless iPads become more hackable or other, more developer-friendly tablets emerge as serious competitors, laptop computers will become specialized tools for software professionals while tablets supplant laptops for the rest of the public.

Even if iPads do become more hackable or developer-friendly tablets become more popular, I suspect PCs are well on their way to becoming a specialized tool.

The problem is exacerbated when you set out to try to invent the next thing. How do you interface with your new stereo camera rig? How many hurdles do you have to overcome to make it possible to interface with your new smart watch? How about a pair of smart contact lenses? How do you get raw USB access? … This is generally where you climb down a layer of abstraction – for example, to NDK in Android. Without such an option, you’re left dead in the water.

This is Boris’ warning about closed platforms: they cannot spawn new platforms.

Closed devices may be dead ends in terms of what you use to program the next device, but not in terms of product evolution. Bright engineers have used open computers to make gaming consoles increasingly awesome ever since they evolved from the personal computer decades ago. Consoles became their own species, and innovation continues unhindered.

As the market matures, computing devices are specializing. Curated, focused experiences are delivering a better product for certain types of computing, while not effectively addressing other types of computing. Personal computers – the trucks to tablets’ cars and game consoles’ motorcycles – will live on and be used to build yet more platforms¹. Software developers, office workers, and professional creatives still need hackable, flexible, and powerful systems.

As such, I’m happy to use an open computer to create awesome software, and a closed tablet to check my email and surf the web. May the PC continue to spawn new species forevermore.

1. I may be wrong, and the next generation of developers might join Cydia’s creator Saurik in creating platforms with jailbroken iPhones or hacked Xboxes. In some ways, this would be kind of awesome.

On the other hand, a lot of developers do build for both iPhone and iPad, but make them separate for pricing reasons. A lot of games do this. Buying two versions of the app is a pain for various reasons, so many people end up with iPhone versions of an app on their iPad.

Unfortunately, using iPhone apps on the iPad has historically been a terrible experience. You could either choose between wasting 80% of your iPad’s real estate by running the iPhone app in tiny mode, or looking at an extremely ugly 2x version of the app. The blown-up mode on the original iPad looks so bad that having it off by default is clearly better.

Enter Retina

When Retina iPhone apps came along, many expected the iPad to use high-resolution graphics when iPhone apps are zoomed to 2x. Unfortunately, this is not feasible with existing apps since the apps have no sane way of transitioning between high-res and low-res mode. Apps would need to either launch at Retina and then do an ugly downsample at 1x size, or launch at non-Retina and do an ugly upsample at 2x size.

With the introduction of the new iPad, iPhone apps now display Retina graphics. The difference at 1x isn’t too dramatic, but at 2x, iPhone apps actually look pretty decent. Surprisingly decent actually – the giant UI elements make you naturally sit back from the iPad, giving the pixelation a nice little blur, and hitting UI elements is much easier than in 1x mode.

After playing with some iPhone apps in 2x mode on the iPad 3, I’d say that Apple should make 2x size the default when you launch an iPhone app on a Retina iPad. Further, I’d argue that the urgency for porting iPhone apps to iPad is lower now that there’s a nice way to view them.

In an ideal world you’d never need to use an iPhone app on your iPad – but at least now it’s a lot nicer.

People naturally suggest is to splitting iTunes into multiple apps. On one hand Apple is busy splitting Calendars, Mail, Reminders, and Notes into separate applications in Mountain Lion. On the other hand, iTunes manages and syncs your movies, music, TV shows, ringtones, podcasts, iTunes U videos, books, apps, contacts, calendars, mail accounts, bookmarks, notes, and photos. iTunes also supports iTunes DJ, Genius, Ping, Match, radio stations, shared libraries, DRM, iOS updates, a music store, an app store, and a metric tonne of other shit. Clearly, multiple apps are appropriate.

Except that they can’t split iTunes into multiple apps because many, if not most iOS users are on Windows. iTunes is Apple’s one and only foothold on Windows, so it needs to support everything an iOS device owner could need to do with their device. Can you imagine the support hurricane it would cause if Windows users suddenly needed to download, install, and use 3-4 different apps to sync and manage their media on their iPhone? It’s completely out of the question.

Jason Snell points out that when the Mac App Store launched, it was a separate app instead of shoved into iTunes. A sign of things to come? No, just functionality that isn’t needed on Windows.

Besides the app splitting issue, it’s important to remember that iTunes is the most prominent Apple app that isn’t a modern Cocoa app. Almost all the apps that ship with OS X have been ported to modern Objective-C, except for iTunes: everybody’s favorite cross-platform behemoth written in C¹. That doesn’t forgive its issues, but it does help explain them.

iOS 5 is the hero in all of this. As iCloud duplicates more and more of iTunes’ sync functionality, they can start removing it from iTunes. Apple is very explicit about it in their marketing materials: they call it “PC Free”. They’re not quite there yet, but they’re driving towards a future where you don’t need to manage your iOS device with a PC at all – Mac or Windows. PC Free is the golden ticket to cutting the kitchen sink out of iTunes, and golden it is.

Don’t get me wrong – there are other reasons that iTunes blows. Craig Hockenberry brings up the legal complexities involved. Everybody knows that syncing is an insanely hard problem to perfect. That said, if you’re looking for something to blame, then blame Windows. At least, for now.

1. Of course, iTunes has company – its old drinking buddies Adobe CS and Microsoft Office.