How to define the app concept?

Author: Jigar Mistry

Chapter two


Creating an app concept design with screen sketches and functional flow diagrams is the best way to communicate your vision to the mobile app developer. Making the concept clear to the developer is probably the most important factor in successful mobile app development. Yet it is one of the most common problems or obstacles in a mobile app development outsourcing project.

This section will describe how to create an app concept design. Don’t be overly concerned about making it look highly technical at this point. You will likely be reworking some of your concept design sketches into a specification document for the developer later.

No matter what the marketing and profit goals are or if you are outsourcing an app for your personal use, you need to fully design and document the app concept if you expect a programmer to make your vision a reality. Developers are not mind readers and even descriptions given during conversations can be very fleeting or interpreted differently. Fully documenting your concept, therefore, leaves little to chance. The two most important things to do are: A) make a comprehensive description of how the app works and what it does (functionality) and B) create a comprehensive description of what the user sees and does (look and feel).

A Functional Flowchart

Before getting too involved in deciding app appearances, the best approach is usually to figure out how it works. Functionality will affect appearance, so investing too much time documenting appearance could be wasted when it has to be redone later.

start endStart / EndAn Oval represents a start or end point
ArrowsArrowsA Line is a connector that shows relationships between the representative shapes
SInputInput / OutputA parallelogram represents input or output
ProcessProcessA rectangle represents a process
DecisionDecisionA diamond indicates a decision

Basic Flowchart Symbols

The first part of finalizing the concept design is to complete the description of everything the app does with a functional flowchart. The flowchart is a graphical depiction of all the possible program paths, showing what the app does in response to all possible user inputs.

The place to start is at the beginning; the start-up screen that appears when someone opens the screen. There, every option or direction a user can take starts a new chart branch, and every option after that starts a new chart branch.

While there are some formal rules to flowcharting, just knowing a few basic rules is enough to let you create a flowchart. There are plenty of easy to use, free software downloads that will help you create a basic flowchart. Just make sure you select one from a trusted source such as the highly rated one by CNET.

A game app flowchart that students create for a class project covers a wall.

The flowchart on the following page illustrates what the first page of the flowchart for the Fishing Wichita app would look like beginning with the Start Screen. Notice the flowchart includes descriptions of what the app is doing, what user options are available or displayed, and paths the program will take depending on what the user selects (Decisions). The flowchart has to depict everything the app does in the form of logical flow.

The flowchart will make sure all the app functions are explained as well as their relationships defined. For example, how the user moves from one screen to the other. Plus, creating a flowchart will help in identifying and resolving “dead ends” – a point in app where a user can’t go anywhere or do anything-a terrible error in functional design that you should avoid at all costs.

Since it is almost impossible, even for a simple app, to display all the app functions on one page, the flowchart will “jump” to different flowchart sections where different app functions are displayed. Even if you could fit it all on one page, the best approach is to keep flowchart simple and easy to follow.

The “Fishing Wichita” Flowchart (at start-up):


Flowcharts depict the logical flow and functions of a computer program like an iPhone app.

Breaking the diagrams up by functional area helps, but keep track and note where different areas of the app interact or pass data.

Keep flowcharts simple and easy to read, as opposed to the unreadable mass of lines and shapes above.

For example, in the Fishing Wichita app, the user has several options from the start screen, including 1) displaying currently stored conditions (from the last automatic or manual update), 2) updating conditions before the displaying, and 3) entering set-up mode where the user can select various options and configurations for the app. If the user selects options 2 or 3, the flowchart jumps to another section where those functions are depicted.

For complicated apps like games, flowcharts can become long and complicated. This is where keeping things basic and simple is really important. Remember, the goal is to illustrate the functional flow of the app. It becomes hard to follow what is going on when the diagram gets too busy or overloaded.

The main thing is to capture everything app does including every functional path and user interaction and not leaving anything out – even if that means a long and complicated flowchart that covers the wall. This is the time to make sure you understand the basic functionality of the app, because a poor understanding or poor documentation will likely result in lost time and wasted money later.