Toolkit For App Store Optimization Help

Toolkit is an app for iOS6 developers working with iPad

Tookit for App Store Optimization is an app that makes life of an iOS developer easier. How you might ask? As a developer, I frequently find myself in a position where I don’t have the skill or software to create graphics for my app. For example, I can get a brand-new, company issued Macbook Air, only to find that it does not have either Microsoft Office or Adobe Photoshop. A call to the IT organization reveals that the company does not really support Macs, so I’m on my own.

I’m sure I’m not alone in this situation. At the same time, I have this new, shiny development iPad that I use for most of my work… Wouldn’t it be cool if my iPad could make some of the graphics for me?

Turns out it’s not so easy. The Adobe’s flagship Mobile graphics design app (Adobe Ideas, 9.99$) offers some limited vector support, but lacks critical features, like ability to add text. Various mobile PowerPoint imitations, like QuickOffice make it difficult to actually import content into a powerpoint.

With this in mind, I created an app that takes the best features of all these programs:

  • Ability to work with layers of content and easily move, rotate, scale or make them transparent. 
  • Super-easy way of importing pictures or screenshots, you can even use live camera to take pictures
  • Ability to add text boxes and frames over the pictures.

That’s pretty much all I needed to do a good amount of work, but currently this required me to:

  • Take screenshots of my interfaces
  • Email them to myself screenshots 5 at a time
  • Wait for upload/download
  • Save files on my PC, move to specific folder
  • Open apps like PowerPoint on my PC
  • Import the images (which end up being 5x the size of a typical page)
  • Manually scale the images down
  • Add a text box, type text into it
  • Save the image as picture
  • Email it back to myself to preview on device.

All the while, I have to worry about my PC monitor having different color properties than my iPad (different brightness/contrast settings). It’s a mess to deal with this, and can easily eat hours upon hours of productive time. If I change my interface, I have to go back and repeat the process after sending myself new screenshots!

This is why I made the Toolkit for App Store optimization:

  • It is an app for iOS developers, like mysef.
  • It is a swiss army knife-like toolkit  that I can do a lot of work with.
  • It is on my iPad, always with me.  keep on my iPad,
  • It is super-easy to make graphics with.

 It does not offer advanced filters or transforms that Photoshop may provide, but in most cases I don’t need them!

 

Publishing apps should be easier!

Currently, publishing apps requires a lot of work. You need to have all the promotional materials ready and in proper formats, with the proper sizes:

  • 1024×1024 PNG format icon without rounded corners to submit with your app
  • Up to 5 promotional screenshots (1024×768 or 2048×1536 or similar)
  • Up to 100 characters of keywords
  • A description of your app, up to 4000 characters, with the above keywords

It’s fairly easy to get an app to 80% completion(prototype), but pushing it to 95 or 98% consumer-ready can be a nightmare. There are so many small fixes, bugs and usability improvements to deal with! Your development time occupied with these fixes, leaving little time for marketing.

This leaves very little time to create promotional materials and documentation, especially if this is one of your earlier projects. And for a solo developer, there’s noone else to do this work!

This is why I used to make promotional materials once and hope that I won’t ever have to deal with that again. But with the toolkit, I can make the promotional screenshots, icons or documentation at my spare time, before publishing my app. With the development iPad I can preview how they would look like to the end user. This means I can iteratively get better at picking app name, learn what to put on screenshots and what color schemes to use.

With the preview, I can ask actual customers if they would buy the product.

 This is really important, and if they won’t, I can tweak the presentation or add features to the app to make it more appealing.

With the preview in hand, I can ask  my artsy friends critique the designs. They have such a good eye for color and design, but good luck asking them to work for me. With their feedback, I can change the materials to make them more appealing.

And the app is dirt-cheap – at 7$ it is a price of a Subway sandwich. Compare this to paying 150$ (and managing) a freelance designer who can create an icon for you, OR learning to use some of those super-advanced .PSDs which require advanced photoshop knowledge.

 

Creating the App Store card preview

With this screen, I can preview how my iOS6 Apps would look in the iPad App Store

With this screen, I can preview how my iOS6 Apps would look in the iPad App Store

When a user is looking at the App Store, they see a large 630×630 card, like in the image above. The card shows your app name, icon, promotional screenshots and a bit of the description (if your app is in landscape mode). In 2012, Apple sold over 20 billion apps, meaning people have looked at promotional materials like the one above billions of times before buying.

This is a lot of impressions, wouldn’t it be nice to convert more of them into potential customers?

Up until now, seeing a sales card for your app required you to:

  • Publish it in the app store, using whatever materials you created
  • Wait a week for the review process to complete
  • Open your app’s sales page and view the results.

This means that if your materials don’t look good (for example, your font is not readable when a screenshot is scaled down), you are suffering at least a week of reduced sales (even if you fix the issue right away, it will still take time for the review process to complete). That is if you notice this at all.

You cannot replace the screenshots or the app name from iTunesConnect without going through a week-long review process.

To solve the issue, I created Toolkit for App Store Optimization, where you can lay out and preview how your app would look before publishing it! For each new project, you get a blank card that you can edit:

  • Edit name and preview how it would wrap in both the search results and large card. Are you missing important keywords?
  • Create an icon and preview it in various sizes (right with the app!)
  • Design screenshots and arrange them in proper order (the first one is most important)
  • Format your description and see if it catches the user’s eye.
  • Optimize your description for keywords
  • Save your work and resume it later
  • Duplicate projects to do A/B Testing

Having different versions of the App Store Card like this in hand, you can show them to many different people (graphics designers, UX experts, artists, colleagues, friends) and solicit their feedback before having the app published. More feedback = better promotional materials!

Designing an eye-catching icon for your apps

Toolkit for App Store optimization icon maker basics

With the icon maker, I can use my iPad to create icons

Like my previous project – The Icon Maker ++ for iPhone, this app lets you make and preview icons, right with your development device.

Except this icon maker is :

  • Updated for the iOS6 1024×1024 requirement
  • Use higher resolution frames
  • Have easier layer selection (just tap on a thing to select it)
  • Optimized fo iPad
  • Has a new type of outlined text label
  • Has a WYSWIG crop camera mode
  • More space for searching for images on the web

The icon maker is easy to use, and while it does not create the jaw dropping, saliva-dripping mega-glossy icons that you can get from professional graphics designer, it is better than what I can make myself. And faster. And less messy. And easier to find. And it has 25 frames in most popular styles.

For each icon I make, I can save it and resume working on it later. This means that making minor edits takes… a minor amount of time! No more flurry of emails and starting multiple different apps just to change the font of a text label or shift an image a few pixels to the side.

Turning your screenshots into marketing materials

Screenshot maker addes context to otherwise confusing, small or busy screenshots

Screenshot maker addes context to otherwise confusing, small or busy screenshots

Have you noticed how the most successful apps on the app store rarely have 5 bland screenshots of the app interface? That’s right, because they take their screenshots to the next level and turn them into promotional materials. This usually involves adding text to the screenshot, and turning the first one into a full-page advertising (no interface shown).

Don’t believe me? Search the App Store for “Free” keyword and note that just about every screenshot published has some form of text overlaid on it. This text provides context and makes it easier for the returning customer to pick out your app from the competition.

With the promotional screenshot designer, you have 10 different frames and promotional flags to overlay over screenshots to create promotional materials. When the resulting image is scaled down to 300×225, the minor details fade into the background and the large text label jumps at the user. If the text label is exactly what the user is looking for, you have a good chance of making a sale:

When zoomed out, small details fade, and the label becomes very prominent (notice the Make Icons With iPad line)

When zoomed out, small details fade, and the “Make Icons with iPad” label becomes very prominent. With labels like these, you can talk directly to your customer, right from your screenshots

The above example may not look perfecton a non-retina display, but within the Toolkit  app you are seeing the exact proportions, pixel density and color that your users will see in the app store. If you can read it, so will your users! If you cant read it, simply tap on the screenshot and zoom in to make the text bigger, or change the font..

All the work I do on my screenshots is saved, and I can resume editing screenshots at any moment. I can even drag them around and change screenshot order, to create a compelling narrative of what the app is about. As the user scrolls through screenshots, promotional messages can quickly tell customers if this app is for them.

But wait, there’s more! :) With the duplicate feature from the main screen, I can create identical copies of my app. Now there are two projects with the same icon, same name, etc. Because I can edit either one, I can do minor tweaks to icon, name or screenshots to create two slightly distinct versions of the same app. I can then show these to my customers, right on my development device and ask them which one they prefer (A/B testing).

Optimizing your app description for readability and search engines

With sales copy optimizer, you get character count and keyword detection

With sales copy optimizer, you get character count and keyword detection

I like writing about good work I’ve done. And the app description is a perfect place to do so. Unfortunately, I do not have Microsoft Word on my Mac, and am limited to Text Edit, which is a fine app. Except… It does not have character count.

A minor oversight, right? Well, I can keep writing and writing, only to find that when I try to paste my description into iTunesConnect, I’m like 1500 characters over the 4000 character limit and have to gut my perfectly crafted description! Which pieces to cut? How does this affect the keyword density? I can’t know, and  iTunesConnect does not tell me how many characters I’m over the limit either. So I have to do a lot of copy/pasting trying to figure out how much I have trimmed, and how much is left to go.

With the sales copy optimizer, I can quickly type up the description on my mac, email it to myself and finally get the character count! But why stop there? I added a couple other cool features:

  • The font used by the text editor is very similar to the one used by the App Store, so you get proper line breaks and paragraphs (WYSWIG)
  • The keywords list automatically parses your description and counts you how many times you used each keyword.

I’m really happy about this feature, and it even saves the description along with my app, so I can keep working on it later, AND preview how it would look on the large card screen.

 

One email is all it takes to get the materials

My current work process involves having the description of the app in one place, screenshots in another, an icon in yet another. And when its time to send it, I have to scour my mac, trying to find where this stuff is, and what the latest version is. Well, no more! With the Toolkit for App Store Optimization all my materials are in one place. And with two taps, I get an email with:

  • Metadata: App name, price, category
  • A 1024 x1024 icon for the App Store Submission
  • All promotional screenshots that I’ve designed
  • Keywords with character count
  • Description with character count

All in one email titled after my app. This makes finding it in my mailbox super-easy, and if I want to get the latest version, I would simply open an email that has been sent at a later date! When it’s time to submit the app, I simply open my email, find the message and copy/paste materials into iTunesConnect.

 

Working with Layers

There's so much you can do with layers!

There’s so much you can do with layers!

The real power of this app comes from the concept of layers – you can add multiple images, text, frames or backgrounds on the screen and manipulate them in an intuitive way with gestures. The image above illustrates some of the things you can do. It’s nothing new really. You’ve used send to back/bring to front stuff in PowerPoint, Photoshop, Illustrator and lots of other graphics editors.

But have you ever been able to tap directly on an object and drag it to the proper spot in seconds? No more right clicking multiple times. You get an instant preview of how the order of the layer makes it look on the screen.

  • Move, change frame, zoom, rotate layers
  • Edit text
  • Change color of frames
  • Add new layers
  • Flick off screen
  • Make transparent
  • Send to back/ move to front
  • Unlimited content from the web with crop feature

I’m particularly excited about the web view layer. It’s a web browser that you can add to your collage. It is a layer that puts the internet into your work. The concept is simple, but powerful – if you can find it in a search engine, you can have it in your composition as content.

Search for the content you want: images, text, websites, marketing materials… anything!  Position the browser and you got your content. No copy/pasting. Want more content? Add another browser… And another. And with the camera layer crop feature you can even cut little images from the web for even more freedom of content manipulation.

Toolkit is a mini graphics editor, that takes features that I so like in Photoshop and PowerPoint and literally puts them at your fingertips on your development iPad!

Creating documentation and battling for the world markets

With the Documenter widget, you can describe how your app works and localize documentation

With the Documenter widget, you can describe how your app works and localize documentation

DOCUMENTATION. That word has instilled fear in developers since the 1970, maybe earlier.

WHY, oh why do I have to write page after page of documentation of how my app works when I’m almost out of energy and just want to publish it? HOW, oh how can I make my documentation user-accessible, so a first time user “gets it”? Great questions.

The answer is even more difficult for mobile devices, because writing stuff like “Do a rotate gesture on the views frame to align your screenshot” is confusing. You, as a developer know what gestures are, but do your users? And with documentation like this, your users may find the feature confusing. So how do you work around it?

Well, with the documenter you can create a new kind of visual documentation

  • Import a screenshot of your interface, it is scaled down to give you space for documentation
  • Add a “text box” like widget with a gesture image and text.
  • Describe what the gesture does
  • Extend a white connector towards the area where the gesture is to be done.

So the statement ”Do a rotate gesture on the views frame to align your screenshot” turns into a neat box, showing what to do and where to do it:

With app documenter I can create connectors like these in seconds!

With app documenter I can create connectors like these in seconds!

The above image is cropped right from the app. I positioned a camera layer on my document and tapped a button. And I got the screenshot above. With the “Save to camera roll when I use crop feature” option, I can get screenshots like the one above and email them to myself in seconds.

There are 14 different single and multi-touch gesture boxes available for you to document your apps. Sure, you can create the same box with PowerPoint – create resizable text boxes, add elbow connectors, add images, import screenshot, add transparency. But as an MS Office power user, I can tell you that it takes a lot of work. Ideally, some  analyst will do it for you. But as an independent developer, I don’t have analysts working for me :(

But wait… wait for it… There’s more! :) Because your documentation is so easy to make, and it uses PDF files external to your app, you can easily localize the documentation of your app into different languages. You would have an English interface, and multiple sets of documentation, one in English, one in Spanish, one in Chinese, etc.

As an independent developer, I can tell you that localization is a nightmare. I did so for the Lucid Dreaming App for Android (German and Russian?) and even with Android user-friendly way to get strings, it is hard. You can do it once, but then if your interface is updated, you need to update the localized files too. I don’t have the resources to do localization for my iOS apps. 

With the documenter, you can keep your app in English, but provide documentation to non-english users that helps them figure out how your buttons/gestures work and what they do. International users still tap on buttons with english text, but they have a document that explains to them what happens when they tap these buttons. It’s not a perfect solution, but it can expand your app use in other countries:

With the app documenter it is super-easy to translate your documentation (here Spanish is used)

With the app documenter it is super-easy to translate your documentation (here Spanish is used)

Translating files is very easy for two reasons:

  • Your app documentation is saved in your app project
  • Duplicating the app project (a two tap operation) duplicates documentation
  • You can resume working on documentation at any time (everything is saved)
  • Simply go through text boxes like above
  • copy/paste your instructions from them into google translate
  • copy/paste instructions back

And you got a localized documentation file! It’s visual, it’s simple and faster than working with multiple apps at a time.

Guess what? There’s more!

Because Toolkit for App Store Optimization is an app, anyone with an iPad can get it. This means that your users in other nations, for example China can download the Toolkit and your app at the same time. Your users can effectively create documentation for your apps :take screenshots of your app and add description boxes of their own and create PDFs. They email you these PDFs and you can provide them to your other users.

Please spread the word!

I cannot tell you how excited I am about finally getting this project ready. I hope it offers enough value to justify buying the app. If you like it, please spread the word and help your fellow developers!

Share