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).
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.
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.
"We needed to create an iOS app to calculate gas turbine performance and availability based on the user’s selection. Space-O Technologies developed an iOS app with the required calculation functions. They delivered a simple, fast app that’s versatile and functional. They were extremely smooth and efficient, requiring minimal oversight from our side. They were flexible enough to accommodate internal preferences. Internal stakeholders are pleased with the app’s usability and unintimidating flow. Independent and adaptable, Space-O Technologies instituted an effortless collaboration and respected established practices."
"Recently we worked with Space-O in developing our IOS app for the iPad Dexter and Friends. The project was handled from start to finish with great care, I enjoyed working with Ankit Shah and the rest of the development team. They were very responsive in dealing with minor set backs such as bug fixes. Their quality and assurance team didn’t stop till I was completely satisfied with the final product. They also were proactive in suggesting improvements to the user interface and helped us develop an easy to use parental control which allowed our app to qualify for IOS app store’s new ‘Kids’ section. I would highly recommend them if you are looking for a company who will stay within a reasonable budget and deliver a top quality product."
"I used Space-O to do all of the wireframing and development of the app. The project was all about developing a full app from wireframe to release on the app store. I came in with the ideas and requirements and they took that and translated that into the full creation. This project created a business. Without it, there would be no product to sell! I had a main point of contact who did all of the requirements gathering and overall project management coordination. It worked very well. The thing that was the most impressive for me was that they weren't just blindly following directions. There were multiple times when I came in with an idea that they then made suggestions to improve it or helped me rework it to flow better in the overall app. Having informed and intelligent opinions made the experience better and the overall product output was improved. It was a great project top to bottom."
Space-O Infoweb Inc, Suite 100-B 8585 E. Bell Road Scottsdale, Arizona 85260 +1 (650) 666-3071