BLUEPRINT

APP HANDBOOK


TABLE OF CONTENTS

Step 1: Define Your Goal

Step 2: Start Sketching

Step 3: Research

Step 4: Create a Wireframe and Storyboard

Step 5: Define the Back End of Your App

Step 6: Test Your MVP

Step 7: Build the Back End of Your App

Step 8: Design the App “Skins”

Step 9: Test Again

Step 10: Iterate and Continue to Build

Step 11: Refine Each Detail

Step 12: Launch




Step 1: Define Your Goal


Having a great idea is the starting point into every new project. Before you go straight into detailing though, you must clearly define the purpose and mission of your app. Define the project and create use cases.  

Create a written definition of your app idea that clearly spells out:

  • What is it going to do?

  • Who are the User?

  • Why do they care about it?

  • What unique problem is it going to solve, or what part of life is it going to make better?

  • What is its core appeal? Why does this app need to exist?

Defining a clear goal for the app is also going to help you get there faster.

Step 2: Start Sketching

A mental prototype is a brainstorm to help define a concept in visual terms.  It’s the first opportunity to start to see how the app might evolve. Involve the development team or technical architect.

By developing sketches you are laying the foundation for your future interface. In this step you visually conceptualize the main features and the approximate layout and structure of your application.

Screen Shot 2019-04-25 at 11.26.40 PM.png

Storyboard rough sketches of the idea on a sketchpad, whiteboard, or template tiles. This is the first visual representation of all the screens and will help uncover usability issues. Having a first rough sketch of your app helps everyone on your team understand the mission. These sketches should be used as reference for the next phase of the project.


Step 3: Research

Do your research.  Is there already an app on the market similar to the one you are thinking to build?  If so, how can you do it better?


Research has four main purposes:

  1. Find out whether there are other apps doing the same thing

  2. Find design inspiration for your app

  3. Find information on the technical requirements for your app

  4. Find out how you can market and monetize your app

While you may think that you have a revolutionary idea, you may get your hopes crushed very quickly. There are more than 1 million apps for Android and iOS, so building something that hasn’t been done before is nearly impossible. Nonetheless you must not get discouraged by those who may playing in the same arena. It is imperative that you focus on your own project and your user acquisition. Learn from the key features and mistakes of your competitors, and drop all other thoughts about them.

You can check out Dribbble or Pinterest for design and implementation ideas.

You need to consider whether the back-end systems will actually support the app’s functionality. Find out what your requirements are and get a clear picture of whether your idea is truly feasible or not from a technical standpoint.

For basic assessment of technical feasibility, you must do the following:

  • Get access to the data. Your mobile app needs to access usable data. Figuring this out could be as simple as sourcing a Public APIs or as complicated as building your own abstraction layer.

  • Determine what devices you are building your app for. An app will have different requirements depending on its platform (iOS, Android, etc.) as well as the format (smartphone, tablet, wearables, etc.).

  • Refine project definition and establish go-to-market strategy. By the end of this phase, the team may have new ideas for the app or have determined that some of the initial functionality isn’t feasible.  At this point, take some time to brainstorm, ask questions and review the status.


Two other important points are marketing and monetization. Now that you have confirmed the feasibility of your app, you should think about your strategy of getting it out onto the market. Determine your niche -- know exactly how you can reach your target user and how you need to approach him to make him see the value and use the app.


Another important consideration is figuring out how your app is going to generate money. Will you charge your user to download it? Or will you offer the app for free but run ads on it? This model would require a large user base, so think about that as well.

There are various ways to monetize an app and it is up to you to decide on the channel you want to use.


Step 4: Create a Wireframe and Storyboard


In this phase your ideas and features fuse into a clearer picture. Wireframing is the process of creating a mockup or prototype of your app. You can find a number of prototyping tools online. Balsamiq, Moqups, and HotGloo, which allow you to not only drag and drop all your placeholders and representative graphics into place, but also add button functionality so that you can click through your app in review mode.

Screen Shot 2019-04-25 at 11.26.18 PM.png

While you are working on your wireframes you should also create a storyboard for your app. The idea is to build a roadmap that will help you understand the connection between each screen and how the user can navigate through your app.

Screen Shot 2019-04-25 at 11.26.06 PM.png

Step 5: Define the Back End of Your App

Your wireframes and storyboard now become the foundation of your back-end structure. Draw a sketch of your servers, APIs, and data diagrams. This will be a helpful reference for the developer, and as more people join the project you will have a (mostly) self-explanatory diagram for them to study.

Modify your wireframes and storyboard according to technical limitations, if there are any.



Step 6: Test Your MVP

Revert to your wireframes and ask friends, family, colleagues, and experts to help you review your prototype. Grant them access to the wireframe and have them give your app a test run. Ask them for their honest feedback and to identify flaws and dead-end links. If possible, have them try out the prototype in front of you. It’s very difficult to define the touch experience without being able to touch the app and experience how it works and flows. Monitor how they use the app, taking note of their actions and adapting your UI/UX to them.

Build a rapid MVP – build a prototype that gets the app concept into a user’s hands as quickly as possible so you can see how it works for the most common use case.  Use rough, not exhaustive, wireframes.

Get uers to touch the prototype to garner feedback as early as possible.

The goal is to concretize your app concept before it goes into the design process! Once you start designing it is much harder to change things around, so the clearer the prototype from the start, the better.

Let’s summarize first: You’ve had an idea, sketched it out on paper, and created a testable wireframe prototype.

This infographic provides a nice overview of the development of an Android or iOS app. It has been created from a survey of 100 developers and put into place based on their feedback (Note: You will find the wireframing process in this graphic near the end, whereas many developers will do their wireframes at the beginning of the project.)

How long does it take to make an app?

Image-1.jpg


Step 7: Build the Back End of Your App


Now that your app has been defined pretty clearly, it is time to get started on the back end of your system. Your developer will have to set up servers, databases, APIs, and storage solutions.


Another important thing on your to-do list at this stage is signing up for developer accounts at the app marketplaces you are developing for. Getting your account approved may take several days (depending on the platform) and shouldn’t be left to the last minute.


Step 8: Design the App “Skins”


“Skins” are what designers/developers call the individual screens needed for the app. Your designer’s job is now to come up with high-resolution versions of what were previously your wireframes.

Design for the user experience. Before you dive into code, you must design.  A User Experience (UX) Designer can create the interaction architecture of the design elements. A User Interface (UI) Designer for mobile solutions can create the look and feel of your app. This is a multistep process with its own review stages. The end result is visual direction and blueprints that inform your engineers of the envisioned final product and how interaction should feel, move and flow.

It is crucial to include all comments from your prototype testers since you’re trying to build an app your target audience is actually going to use, therefore their feedback should guide you toward to the perfect User Interface.



Step 9: Test Again

Once your designer has completed the design skins, you’re up for another round of testing. For the first time you have your actual app concept completely in place, all the graphics inserted, and all text as it should be. Which means you can finally test your app in the way it will really look and feel. Now it’s time to get some of your target users to help you test it.

  • UAT testing.  User acceptance testing is a process to discover whether your mobile app works for users. In other words, put your app in the hands of a few people in your target audience. Once your app has passed the UAT test, you know that the solution “works”.

  • BETA testing.  Make your app available for a beta trial, either through an open solicitation for participants or the enrollment of previously identified groups. Feedback from beta users will help you determine whether or not the app’s functions are operating well in a real-world environment.

Two great testing apps come to mind: Solidify and Framer. These apps allow you to import your app designs and add links where needed to test the flow from screen to screen.

Don’t confuse this stage with wireframing. At first it was about creating the basic look and feel of the app. Here you’ve implemented the actual design and made it clickable.

Step 10: Iterate and Continue to Build


Once you’ve given your design a test drive and collected more feedback from future users, you should use these new ideas to polish your app idea. You can still ask your designer to change the layout, and you can still tell your developer to change something on the back end.


Step 11: Refine Each Detail

As you continue to build you will want to have a constant look at your new app. On Android, for example, it is easy to install your app file on a device to test its functionality in a live environment. iOS is different. There you will require a platform like TestFlight to download and test your app as it proceeds.


This step is the last step in the app development process. You can monitor your app all the way until your product is complete.



Step 12: Launch!


App marketplaces have very different policies when it comes to publishing a new app. Android, for example, does not review newly submitted apps right away. They’ll pass by at some point and check it out but you are able to instantly add your app to Google Play.


iOS, once again, is different here. Apple reserves the right to review and approve your app before it can go live. There is no set timeframe for this, but you can expect at least a week before you hear back from them.


To overcome this hold there is something else you can do: submit your app to PreApps. As you can probably guess from its name, PreApps is an app marketplace that gives developers the opportunity to reach early adopters (a.k.a. "lead users" -- people who like to be first at trying out new inventions) and receive some of the very earliest feedback on your masterpiece.

Your app is complete and ready to submit. Pick a day and key up a formal launch.

Keep in mind, this is not the end. Every app requires updates and new features during the mobile application development lifecycle. Typically, the development cycle begins anew as soon as the first version of the app is released. Ensure you have the resources to maintain your product. A mobile app is not a “set it and forget it” type of project. Like any other technology, it will require skilled people to continually build new enhancements, fix problems, and ultimately ensure its success to your business. (Make sure you have continued access to the mobile development team)


Once you’ve gotten your app listed on the app stores of choice, it is time to market your app and get it seen.




///