I built an iOS keyboard app in 2 weeks
Apple announced iOS 10 in September and finally jumped on the stickers bandwagon.
I’m guilty of using emojis. Probably more than I’d like to admit. But let’s face it, emojis have become an extension of modern-day language. Emojis and stickers make messaging more dynamic and fun, letting people express themselves in clever and visual ways. If you haven’t already joined the bandwagon, take a look at some of the top performing emoji apps of 2016.
The entire process from designing assets to having a published iOS keyboard app in the App Store took two weeks. And let me tell you, after doing this myself — I know it’s a lot easier said than done. So I’m going to share a few tips and lessons that I learned along the way.
This was my first attempt at publishing a sticker/iOS keyboard app and I’m sharing this from the perspective of a designer. There may be some steps that could use some fine tuning, and I’m happy to hear about it in the comments.
Emoji apps should be a seamless experience. If you have to think about how to use it, you’re probably doing it wrong.
I know you’re stoked to learn more about this process. Keep reading.
Step 1: Prepare the Designs
Let’s start with the fun part, shall we? The best part is actually creating the assets and getting them ready for your app. I usually work in Adobe Illustrator when creating vectors.
App Icon
Apple provides good guidelines on how to create an app icon. You can find them here.
When you create your icon, you’ll need to export your assets in different sizes across all desired devices. I find that it’s best to keep this design eye-catching yet simple. The less detail, the better.
- iPhone (120-by-120 px)
- iPhone Plus (180-by-180 px)
Keyboard & Emojis
Before you start a Custom Keyboard, read the Extensions section of the App Store Guidelines.
Know your asset size. I must admit, this was challenging for me. With over 50 assets to work with, I had to do some math to figure out the perfect emoji size. For each page of the keyboard, I wanted to have three rows of emojis with five per row. I ended up exporting my assets at 159-by-159 px each. Your artboard in Illustrator should be sized accordingly and each asset will need a separate artboard.
Once you have the pixel-perfect assets and resolutions down, you’ll have a lot of freedom designing your keyboard. For me, I felt most comfortable mocking up my keyboard designs in Sketch.
Very important: Don’t forget to add the globe icon at the bottom left of your keyboard. If your keyboard doesn’t enable switching to the next keyboard, Apple will reject your app.
Stickers
Know your sticker size. Your artboard in Illustrator should be sized accordingly and each sticker will need a separate artboard. Usually, the more detailed your artwork, the larger your sticker size should be. Refer back to Apple’s iOS Human Interface Guidelines for more information. Users can create images as one of three sizes:
- Small (300-by-300 px)
- Regular (408-by-408 px)
- Large (618-by-618 px)
I chose regular (408-by-408 px) because my stickers looked the best as a set of three and I was happy with the artwork resolution. Since there is no set number of stickers for the iMessage store, go with a number that you think would appeal to your users. As a set, try to keep some level of visual cohesion across your stickers. And keep them tasteful- this is the iOS platform after all. Be sure to export as a transparent PNG.
Step 2: Create Screenshots
Whether you’re a designer, developer, or marketer, screenshots play an increasingly important role in the success of your app. They provide a preview of your app and entice users to download.
Screenshots… aren’t actually screenshots
Common mistakes that designers make with “screenshots” are that they use actual screenshots. To ensure high quality images, you need to mock up your screenshot. Remember that this screenshot is a preview of your app and should provide a good feel for the functionality and features.
File Format
The App Store allows both JPG and PNG image format submissions. Generally speaking, JPG files can be rendered at lower quality settings, which is meant to reduce the overall file size, while PNG files are supposed to be lossless. I would stick with PNG since file size shouldn’t be an issue.
Be One of a Kind
Exclusivity and relevance is an attractive force. If the customer sees that your app is unique, you have a distinct advantage over your competitors. Emphasize these values in your screenshots to make sure the customer knows exactly what they will be missing out on unless they use your app.
Step 3: Help Screens
Since the app is hosting extensions, you’ll need to provide some help screens and/or additional settings (or your app will be rejected). Some apps will add a detailed step by step with screenshots on how to install. I decided to include the directions in a single page app since installation for custom keyboards are always the same.
Stay tuned for Part 2
Once you have your images that will form the basis of your proposed sticker pack and keyboard, you’re going to need to get involved in some of the grunt work that is necessary to get them into the App Store. Not to worry- it’ll be so worth it.
Lessons
- My biggest challenge was managing all of the art assets. There were ~50 different emojis for this app and each emoji needed 3 different art assets. All ~150 assets needed to be named consistently and the asset creation pipeline needed to work across multiple teams. But in the end, we dialed in the process and improved documentation to make it smoother.
- Testing and Submission. We got rejected twice. The first rejection happened because the keyboard did not function without “full access.” We needed this in order to utilize the user’s clipboard. When we resubmitted, they rejected us again for the same reason (what?). We reached out to Apple and explained how we had solved the problem and they quickly corrected the mistake.
Tools
- Design: Adobe Illustrator, Sketch, Invision
- Development: XCode 8, Sketch, Bitbucket, Git
Check out TechMoji:
Go Nimbly is the premier marketing and sales consultancy for SaaS companies. Founded and headquartered in San Francisco, Go Nimbly provides customers with a customized team to manage everything from strategy to execution for their marketing and sales systems. To learn more, visit gonimbly.com.
