Jeybee

Taking the Advantage with App Store Screenshots

Last week I covered icons in the great trifecta of app store marketing. Now, it’s time to move on to screenshots.

You’ve hooked potential buyers with your gorgeous icon, and here’s your one chance to reel them in to purchase. Let’s first examine the role of screenshots in the store.

Just a pretty picture, eh?

Forget your app description for now, because 90% (80? 70?) of viewers will be doing the same. Apple knows this, and it is evident in the iTunes store. They only show a single line of your description, keeping the screenshots in view on any resolution. You see a similar thing in the iPad store. I suspect the only reason the iPhone store is any different is that the current setup is familiar to millions of people.

So what does this mean? Your screenshots have a dual purpose. They must act as both description and screenshot, showing and telling people why they should click Buy.

Which leads us to the following point…

Screenshots? I don’t think so

Using a direct-from-device screenshot in the app store is akin to having a banner ad with a picture of the website it leads to. It’s a missed opportunity. This applies to both games and apps.

There are a few possible exceptions to this rule: 1) you have an amazing UI and your app’s features are crystal clear from seeing it or 2) your app is a game and the visuals are your only selling point. Even in these cases, screenshots will often benefit from additions.

So, you may look at the app store and think I’m crazy. Sure, some apps do this and some don’t. Does it even make any difference? Well, you’re right, there are lots of apps out there that don’t do this. But in this ultra-competitive market, you need to take every little chance to make your app more accessible and appealing.

Let’s take a look at an app that has done this well. Here we have Read it Later:

Not only do I know what the app looks like, but I know its main features and major selling points without even needing to touch the description.

Applied Theory

Before moving on to Etsy Lovers, let’s look at a couple of games. Thank you to @MattRix and @imangi for letting me use their art and screenshots to give some demonstrations. These are both great games, but I believe their app store appearance could be improved.

Trainyard

All of Trainyard’s screens are very similar. They show off the clean design and range of complexity in the levels. But do you learn any more in screen 2, 3 and 4 that you didn’t already get from screen 1?

Here, Matt could be showing off choice press quotes (of which there are many) or emphasizing what makes Trainyard unique. It would help to add variety to the screens, and reduce the need to consult the description.

This is a drastic change, and there are thousands of ways this could be approached (all of them should take more than the 5 minutes I spent).

The screens should amplify the character of your app. Here we’ve drawn on the colours in the icon, giving a consistent feel to the look. Matt might have chosen a more “Trainyard”-like font, and less rounded edges to fit with the game’s style.

Max Adventure

Imangi’s twin stick shooter has a simple set of screens, showing off gameplay direct from device. While it’s clear enough what the game style is, there are a lot of similar games out there.

Here they have the chance to differentiate themselves by playing up Max, a character they’ve already spent time developing. He would inject some more personality in to the shots.

It’s a simple change, but this line alone gives you more of a sense of the game world. I was tempted to add “(oh, and his parents too)”.

Don’t be afraid to inject some humor or character to your copy if it makes sense. For an excellent example of this, see the description and screenshots for HECTOR: Badge of Carnage (and download it, it’s hilarious).

Putting it All in to Practice

Now we’ve looked at how to use your screenshots well, I’m going to apply it to my upcoming app, Etsy Lovers. Last time, we finished with the final icon tied down. It’s nice to have that 100% complete, as I can draw elements from it to maintain a consistent look.

First of all, I worked up a logo. I wanted to make use of the heart symbol from the icon. I’m not going to show the process for this, but it was basically the same as the icon. Many variations, lots of tweaking.

I’d spent a good deal of time on the icon’s quilt background. So heck, why not use that too? It’ll bring another layer of consistency and if I can get away with re-using something then it’s doubleplus good. This is another huge benefit of using Illustrator from the start. I have it all ready to be rendered at any scale.

I wanted the logo to persist on each screen. This is partially because I want people to remember the name for recommending to others later on. Even if they don’t, they’ll certainly recognise the logo if they see it again.

At this point I needed to figure out what the important parts to cover were, so took some notes:

• Major point: Winner of the Handmade Code contest. This is like an official pat on the back, so will give confidence to people deciding whether to purchase.
• I wanted to show off the few areas of the app with distinctive visuals
• Our big unique feature is being able to make/share wishlists and galleries
• We’re going to be working with Etsy sellers to offer discounts to app users. This as the final point might seal the deal.

Crafted with Care

As you can see, the focus is not on the screens themselves but the selling points. The screens are big enough that you can still see generally how the app is designed and what you’ll be getting.

NB. These screens use a Photoshop mockup of an iPhone 4 put together by teehan+lax.

You’ll notice that I’ve scrubbed some elements from them. I have previously been rejected on other apps for using (mockup) iDevices that look too similar to Apple photography.

As pointed out in the comments, you are allowed to use product images, as long as you have signed the marketing license form. Perhaps mine hadn’t arrived at the time.

As I came to write this post, I was hit by the fact that there was a problem with my first screen. What the heck does Etsy mean? To someone who hasn’t heard of it, that could be enough to put them off straight away.

It’s always good to step away from your shots, show them to others and try to view them from the perspective of someone who has no clue what your app is about.

Much better.

These screenshots really are your only way of customizing the product page, so you may as well take them as far as you can. Don’t force people to dig through your description; tell them upfront why your app is the BEST app.

I get the feeling some indie developers don’t like to sell themselves to their maximum ability. While it may be noble to be modest, it isn’t going to get you noticed and, in the app store, that’s what counts. If you believe in what you’ve produced, make others do so too.

Focus on the Icon - App Store Icons that Beg to be Downloaded

It’s come time for YAAL (yet another app launch) and with it comes the usual raft of important marketing materials; icons, screenshots, descriptions and keywords. 

This post I’ll be concentrating just on the icon - going through many different versions and trying to make it stand out in the crowd.

You may not categorise your icon under marketing but I believe it is one of the most important aspects of getting your app noticed not just by consumers in a crowded arena, but by Apple too.

What makes a good icon?

Just pull out your iDevice. If you’re anything like me, you won’t have many apps that have bad icons. If I’m going to have to see it often, it’s got to be aesthetically pleasing.

As you look through, it’s quite easy to pull out the common factors:

• Bold central icons
• Clean backgrounds and surrounds
• Use of the retina screen for extra vector detail or textures

If we look at the App Store paid top 16, we can see that about 13 adhere to these rules. 

The odd ones out are Jellycar 3, Potty Racers and Call of Duty: Zombies. These are published by Disney, MTV and Activision respectively so perhaps the lesson here is “Feel free to ignore these rules if you have huge marketing budgets”.

So, what’s the new app?

Enter Etsy Lovers stage left. Etsy Lovers was developed for the Etsy Handmade Code contest all the way back in November. (It won the grand prize - yay!) 

The app lets browsers see items, explore shops, search in a variety of ways and share items. They can also create galleries and wishlists.

( For those who’ve never come across Etsy: it’s a marketplace of millions of handmade and vintage items. Unique birthday presents, niche geekery and great one-off pieces are just a few of the things you’re likely to find there. )

The first step: narrow it down

With apps, unlike games, there aren’t any main characters and usually no standout graphics to speak of. In this case, there’s no obvious choice of icon.

This calls for a little brainstorming!

• Handmade items are the biggest selling point of Etsy
• Etsy users are predominantly female (67% according to Quantcast in Feb ‘09)
• We want to evoke that feeling of a quality, handcrafted item from the outset

After a period of umm-ing, I had the idea of making the icon look like a quilt, complete with stitching. It was the clearest idea I could come up with that shouted “HANDMADE!”

The second step: quick protoicons!

I headed off to Illustrator with a clear enough idea in my mind that I didn’t sketch it out first. Illustrator’s lovely vectors will come in handy when the SuperRetina* display appears.

* may not exist… yet.

Here it is on-device (with minor post-processing) and straight from Illustrator. Every step of the way I tested on the retina display. The pixel density makes a huge difference to how it will look to the end user.

Thoughts: Not bad… it’s rough. The sketchy style feels handmade and gives it character but it’s very basic. It’s missing Apple’s trademark clean style.

Throw it out and start again. This time going for a very clean look, but taking greater advantage of the display by adding additional texture and detail.

Thoughts: Hmm, we’re on to something. This looks good, but it doesn’t say click me. Where’s the icon that is the signature of so many other top apps?

The obvious icon for the centre comes from the name: Etsy Lovers. It’s a heart of course. But do we have to worry that a heart will put off some of our audience? In this case probably not, given that it’s a female-dominated community.

Thoughts: I like it. It’s bold, it stands out. But one thing it doesn’t say is handmade - it’s just too shiny. Wouldn’t it be great if it looked like the heart was stitched as part of the quilt? YOU BET.

The third step: iterate to your heart’s content

Thus began the heart factory, pumping out variations on a theme. These only include ones that made it to the device. It doesn’t count ones trashed before they hit the Export menu.

As you can see, I moved through a lot of styles. Some definitely look stitched on, but the problem with them was the lack of contrast.

Many of the later revisions have very minor changes in lighting and bevel. If you look at other app icons, the majority of good ones have these touches.

You’ll notice that none of these designs have the standard Apple-provided gloss on them. That’s because for 99% of icons, it just looks awful. Don’t use it, it’s easy to turn off and you can create similar effects honed to your individual look.

The Final Icon?

I ended up returning to the original heart and combining it with the stitched style to at least get the essence of the handmade look I was aiming for. 

There are slight differences between the iTunes version and the on-device one. There is additional detail in some of the textures, and some were enlarged and sharpened for the device so that they were visible at a smaller scale. 

Why the question mark?

On the whole I’m happy with it. But I’m a fan of critiquing my own work after I’ve been away from it for a while. 

This is the icon that was submitted with the 1.0 version, but it may not remain that way in the future.

The brightly coloured background draws some focus from the heart, and while I spent a lot of time on the foreground I could’ve just as easily altered the background and achieved the same contrast.

Even as I wrote this, I produced another set of variations. I do very much like a couple of these, but I’m also a fan of my position in the app review queue so I won’t be changing it now.

There’s always 1.1 eh?

What’s Photoshop?

If you’re not a designer (I wear all hats in mediocrity), then if nothing else, this is the part you want to outsource. It is a fine art, and there are some amazing icon designers out there. It could be the difference between a feature or a quick slide in to obscurity.

There are a lot more icon sizes you need to produce but I do put the most time in to the retina and iTunes versions. Here’s an exhaustive list of them all.

Free for a day! Limited time! Download now!

About a week ago I gave Flip It! Gyro a free weekend, and partnered with Game Giveaway to do it.

Revenue had really started dipping in January to pitiful levels, which was one reason it needed a kick. It also meant that the experiment couldn’t really hurt too bad.

Flip It! is exclusive to the iPhone 4 and latest gen iPod touch. So I knew that would put a limit on the audience although it’s nowhere near as noticeable as it was at launch.

I’ve read as much as everyone about free giveaways. In short, general opinion seems to be:

• You need in-app purchases to make it worthwhile
• Your ratings will take a beating
• As soon as the free period ends, you’re no better off than you were

Free: everyone’s favourite word

The game was free from Fri 21st through Sunday morning (PST, so most of the world had it free for half the day).

As you can see… people love free apps. Le surprise. That’s over 120,000 downloads in 2.5 days.

Was all this traffic from Game Giveaway? Nope, and if you’re contemplating a free giveaway yourself you shouldn’t rely on just one source. Our friends at AppAdvice picked up on it and set the ball rolling for hundreds of tweets and free app coverage around the world.

Ramping up the Revenue

Since one of the big reasons behind the promotion was to see how it affected revenue, let’s look at that first. This is how it looked before and after:

Sales have tripled in the week following the promotion. I don’t expect this to last forever, but at this rate, Game Giveaway’s fee will be covered within the next week.

So, was it worth it?

If you look at revenue alone, it just about was. Over time, I will almost certainly earn more than I would have without the promotion and the rankings have had a temporary boost. Heck, even the ratings didn’t do too badly and are averaging 4-stars in the US.

But what value has been created from all these new players?

Flip It! doesn’t have IAPs, but it does have a newsletter signup on first launch with an always-running giveaway to encourage subscribers.

There were over 15,000 new subscribers added the promotion week. I have to date never emailed out a newsletter. This *is* my next app’s marketing campaign, and if you aren’t sure why, just check out taptaptap’s Camera+ launch.

You can also add to this almost 20,000 iTunes affiliate clicks. Many were from ineligible regions, but there is still a noticeable improvement in revenue. It all helps and eats away at Game Giveaway’s fee.

---

There are so many app giveaway services out there, it can be hard to choose which is worth your time (and dime). But use this to your advantage and remember to negotiate! It’s just as important to them to have regular app giveaways.

At full price I wouldn’t recommend giveaway services to many, unless you have excellent IAP conversion. But if you can get the fee down, you may be able to find a number that works for both you and the service.

Just know what you’re expecting, and realise that it isn’t all about revenue. You have a single opportunity to interact with thousands of new customers - make the most of it.