We released our first iPhone app, Funeral Notebook, February 4, 2011. I learned a lot during the process and thought it would be helpful to document the experience as a resource for anyone else thinking about creating an iPhone App. Originally this was going to be a single post but it kept growing so I decided to break it into sections. Each section also includes links to some resources I found helpful along the way.
See Part 1: The Plan if you haven’t already.
Part 2: Defining the App
Functionality and requirements
Once we had defined our target audience and basic plan, we began defining the app itself. What will users be able to do with the app? How will the functionality and/or content be organized? Will the app somehow connect to a website or to another app? Will it work primarily on iPhone or will there be an iPad version as well? Will the app use functionality built into the device such as the camera, GPS, or accelerometer? At this point don’t worry about colors, graphics, or the visual appearance. That will come later. When you start to think through the functionality be sure to document all the ideas you come up with. However, it’s important to narrow the focus of version 1.0 to “minimum valuable functionality” (I just made up that term). In other words, what is the minimum set of features you can deliver and still offer worthwhile value to your audience? Don’t try to do too much in your first release.
Most of your functionality will be described when you create a prototype but it’s important to also have written descriptions of all your requirements because some of them won’t appear in the prototype. Requirements that might not show up in the prototype include sounds, responses to motion or light, or that all screens must function in both portrait and landscape orientation.
Design the app experience
Before really digging into the design of your app I highly recommend reading a book called “Tapworthy: Designing Great iPhone Apps”, by Josh Clark. It steps you through the design process and explains all the standard interface elements Apple has developed. It also has a lot of great examples and screenshots.
When most people hear “design” they immediately think about what the app will look like – colors, graphics, etc. But I strongly recommend setting aside the look and feel for now and focusing on how the app will work. When a user first opens the app after installing it, what do they see? A welcome screen? The home screen? What will be on the home screen? Can you display all the options on one screen or do you need to create some categories? Thankfully Apple has already designed many of the components you’ll need to design your app.
Sketch
The best way to start designing is with old-fashioned pencil and paper. Just sketch out some rectangles and start labeling them. (Home Screen, Information about X, Category B, Create Email, etc.) You can then draw arrows indicating where the user can go from where. It’s also helpful to list out everything a user can do on each screen. (Go back to previous screen, add task, edit task, etc.) Below is a sketch (incomplete) showing three screens from Funeral Notebook. (Click for larger view.)

Prototype
Once we had the basic structure and flow of the app worked out we started creating mockups showing the buttons, text, controls, etc. the user would see on each screen. Have no fear, it’s really easy to create these. There are several people who have created iPhone and iPad component libraries to be used with Powerpoint, Keynote, or Photoshop. Keynotopia offers template libraries for several devices (iPhone, iPad, Android, Windows, Blackberry, etc.) that will work with Powerpoint, Keynote, and OpenOffice. They’re not free but they’re definitely worth the $9 cost. (We actually used a different library but it’s no longer supported so we bought the Keynotopia templates.) There are several others available but Keynotopia came highly recommended. Once you have the templates just start assembling all your screens by copying and pasting the components you want. You may also want to make different elements on the screen clickable so you can more accurately represent where users would go when they tap different areas. Below is an initial screen prototype showing the home screen for Funeral Notebook.

The website
This is also a good time to think about the website or page that will accompany the app. Apple requires links to the website of the company who created the app as well as a link to a page where a customer can get support. Your site could be anything from a single page with an email address to a full-blown web application. It’s a good idea to think about it now so you have an idea of how the app will relate or tie in to the site. Will there be content displayed in the app that is pulled from the site? If the user wants to contact you will they fill out a form on the site or email you from within the app? In our case we wanted the Funeral Notebook site to provide
- Marketing information about the app
- Support and contact information
- Longer articles about funeral-related topics that wouldn’t display very well within the app
Below is a wireframe showing the layout and structure of the site.

Test for ease of use
After you’ve built most of the screens, save the file as a PDF and download GoodReader for iPhone. GoodReader does a lot of things but one great feature is its ability to display a PDF with none of the GoodReader controls displayed. So if your prototype was created at the same size as an iPhone screen, when you view it in GoodReader it will look like a real app. You can then tap through it and get a sense for how it would work. Try out your app, make changes to the screens, try it again, and repeat. Be sure to ask others to try it out – especially people who are part of your target market.
Define the brand identity
Like any product, your app should have a unique brand identity. A product’s branding includes it’s name, logo, colors, writing style, and graphics. As I mentioned in my previous post, visual design and branding is not one of my strengths so we decided to work with a graphic designer to help us design the logo, colors, graphics, etc.
(BTW, you do not have to do hire a graphic designer to have a successful app. It can help but it’s not a requirement. There are plenty of great apps that use Apple’s default iPhone look and feel and it’s not impossible to come up with a good icon to represent your app in the app store.)
Name
Naming a product is a science in itself so I’ll just stick to explaining what we did. We wanted the name to do several things.
- Describe the topic area
(death of a loved one, funeral)
- Describe the functionality
(help you figure out what to do, advice, reference, task management, organization)
- Be pretty easy to remember
(nothing too abstract)
- Be sensitive to the target audience
(names with “death” in them were crossed off)
There is another requirement I would have added that we didn’t think about: Limit the number of characters and spaces in your name to a total of 10-12 (depending on the width of the letters in the name). This will allow the complete name to be displayed below your app’s icon on the device’s home screen. If you make it longer you’ll have to abbreviate the name or iOS will shorten it for you by cutting out character in the middle and adding ellipses (…).
One trick for testing out your name is to go to any website in Safari, tap the action icon (rectangle with an arrow), select “Add to Home Screen”, then enter your app’s name. The icon on the home screen will now display the name you entered below it. If it doesn’t fit, repeat the process and add another variation.
Logo
A logo can be used within the app, on the website, as (or in) the app icon, and on marketing materials. Remember that a logo will often need to be displayed at a small size so try to design something that will display well at or adapted to) a small size. Some of examples of logo concepts are shown below.

Colors
Color selection is another science within itself. The colors you select should appear consistently across your logo, website, app icon, app interface, and marketing materials. As you explore color options, take a look at competitive apps in the app store to see what colors they’re using. Make sure your colors make your app stand out or at the very least, don’t cause confusion. We wanted something that wasn’t dark and depressing or that looked too much like funeral home colors while also not being too bright or cheery. We actually developed our color pallet by designing the website first and then applying the colors to the app. It worked well for us but I think developing the colors specifically with the app in mind works great too. Some of the color pallets we explored are shown below.

Graphics
In an iPhone app graphics can include icons, buttons, arrows, animations, and more. Yes color is involved but also included are texture, shading, lines, style, and shape. Work in this area can range from just using the standard Apple graphics to creating a completely custom set of screens, buttons, icons, and images. What you decide to do will depend on your budget, your app, and the experience you want to create.
Resources
Book: Tapworthy: Designing Great iPhone Apps, by Josh Clark.
As I mentioned at the beginning for this post, I highly recommend reading this book before you get too far into defining your app. It steps you through the design process in detail and explains all the standard interface elements Apple has developed. It also has a lot of great examples and screenshots.
Design templates: Keynotopia
On this site you can purchase templates and component libraries for iPhone, iPad, Android, RIM, and several more. The templates can be used with Keynote, PowerPoint, and OpenOffice. These are worth the $9 because they will save a a lot of time.
Apple iOS User Interface Guidelines
Everything you could ever want to know (and more) about how the Apple iOS interface should work.