written by: Melanie Haselmayr
Did you wake up this morning with a creative idea for the perfect mobile app? One that nobody else has thought of before, and that you’re certain will be extremely popular?
The only problem is, you don’t know where to begin designing and building an app! Never fear—read this brief guide on the 12 key steps to bring your mobile app idea from your imagination to smartphone screens everywhere.
Step 1: Define your goals
Having a great idea is the starting point for every new project. But before you go straight into detailing, you must clearly define the purpose and mission of your mobile app. What is it going to do? What is its core appeal? What concrete problem is it going to solve, or what part of your users’ life is it going to make better?
Defining a clear goal for the app is also going to help you get there faster.
Step 2: Start sketching out your mobile app
You don’t need to be a professional artist to sketch out your app. 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.
Having a first rough sketch of your app helps everyone on your team understand the mission and the product you are trying to develop. These sketches should be used as reference for the next phase of the project.
Step 3: Conduct research
It’s time to conduct background research on your app idea. This research has four main purposes:
- Find out whether there are other apps out there doing the same thing
- Find design inspiration for your app
- Find information on the technical requirements for your app
- 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. As of March 2017, there were 2.8 million apps available for Android and 2.2 million for iOS, so building something that hasn’t been done before is nearly impossible. Nonetheless, you must not get discouraged by those who may be 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.
There is a great marketplace for designers called Dribbble. Designers use Dribbble to showcase their work to others for feedback and to get inspiration from fellow artists. It is probably my favorite place to look for ideas about design and implementation.
This is also the right time to look into the technical aspects of your mobile app. Find out what your requirements are and get a clear picture of whether your idea is truly feasible or not from a technical standpoint. In most cases there will be an alternative solution to proceed on a slightly different route. This research extends into legal restrictions like copyright and privacy questions, giving you a complete understanding of your situation.
If you have connections in the industry, get an expert opinion on your idea right from the start.
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 users and how you need to approach them so they see the value of your app.
Another important consideration is figuring out how your app is going to generate money. There are various ways to monetize an app and it is up to you to decide on the method you want to use. Will you charge your users to download it? Or will you offer it for free but run ads on it? (This model would require a large user base, so think about that as well.)
Step 4: Create a wireframe and storyboard for your mobile app
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. The most popular ones are Balsamiq, Moqups, and HotGloo, which allows 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.
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.
Step 5: Define the backend of your mobile app
Your wireframes and storyboard now become the foundation of your backend 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 mobile app prototype
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, invite them to your studio and have them try out the prototype in front of you. Monitor how they use the app, taking note of their actions and adapting your UI/UX to them.
The goal is to concretize your app concept before it goes into the design process! Once you start designing it, it becomes harder to change things, so the clearer the prototype from the start, the better.
This infographic from Kinvey provides a nice overview of the development of an Android or iOS app. It has been created from a survey of 100 developers and designed based on their feedback (Note: You will find the wireframing process in this graphic near the end, whereas many developers will create their wireframes at the beginning of the project.)
How long does it take to build an iOS or Android app?
Step 7: Build the backend of your mobile app
Now that your app has been pretty clearly defined, it’s time to get started on the backend 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 put off 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 to come up with high-resolution versions of what were previously your wireframes.
In this step it is crucial to include all comments from your prototype testers (see Step 6). After all, you are trying to build a mobile app that your target audience is actually going to use, therefore their feedback should guide you toward the perfect UI-User Interface.
Step 9: Test your mobile app again (yes, again)
Once your designer has completed the design skins, you’re up for another round of testing. Don’t think that you are all set with what you’ve done so far. Now 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.
To test your app, two great testing apps come to mind: Notable Prototypes (formerly 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 Step 6 (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: Revise 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 backend.
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: Release your mobile app!
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 (aka “lead users”—people who like to be first at trying out new inventions) and receive some of the very earliest feedback on your masterpiece.
Once you’ve gotten your app listed on the app stores of choice, it is time to market your app and get it seen, but that’s a topic for a whole other future article!