From Idea to Working Prototype: App Development Initial Stage
From Idea to Working Prototype: App Development Initial Stage
Whatever app you are developing, the beginning is always the same. Take a look at the initial process and how you can get started.
Join the DZone community and get the full member experience.Join For Free
[Latest Guide] Ship faster because you know more, not because you are rushing. Get actionable insights from 7 million commits and 85,000+ software engineers, to increase your team's velocity. Brought to you in partnership with GitPrime.
A new app is born every minute. Sometimes it is a gaming app, a social network, a business app developed to meet certain objectives. However, all these apps have one thing in common: the initial development stage. It all starts with an idea, which moves on to a strategy, and eventually, it reaches the stage of a prototype, where the idea is fleshed out for the first time. In this article, we're going to take a look at these first few steps of the app development process.
Calibrating With the Development Team
The first step of the app development process involves relaying information regarding your company, business objectives, target market and competition to your development team. This means that you will have to go through an initial calibrating stage, where you will provide the development team with relevant business documentation such as your business plan, pitch deck, and business model canvas. A request-for-proposal is also very useful at this stage. We've covered this area of the development process in depth in this article.
The previously-mentioned documentation should cover the competition, but it would be useful to dig a little deeper. There are three main factors that should be taken into account when checking out a competing app: the number of installs, the ratings/reviews, and the history of the company behind the app. Most of this information can be accessed for free at the app store, and on the company website (where you will find case studies, white papers, and announcements on their blog).
Once you've found the top competitors in the market, you want to study their apps and see how well they address customer needs. This will help you find new niches and angles of attack, where you can provide more value through your app.
Next, you want to consider monetization. You will sometimes develop internal apps, which are meant to improve business processes such as HR, or they may be meant to mobilize the sales force. In other cases, you might want an e-commerce app, or a client-facing app meant to augment business services and act as a marketing tool. You also have a third kind of app which directly targets a segment of the market and which benefits from direct monetization.
Depending on the type of app that you end up developing, you have several monetization methods at your disposal, including in-app purchases, advertising, premium features, subscriptions, and selling user data.
You then want to take marketing into account. You will have to figure out a marketing strategy, preferably an iterative one that will allow you to increase app adoption, user retention, conversion rates, and other relevant metrics. This could mean adding an on-boarding process, push notifications and a variety of other features.
Finally, at this stage, you want to consider the Minimum Viable Product (MVP). The main idea is to determine and understand your app's key functionalities, and prioritize a list of features that will go into the MVP first.
This article presents a linear approach to executing the strategy. There's also another way where the whole application scope doesn't have to be tackled at once. The process is followed only for the functionalities within the scope of the MVP, then the app development starts immediately and further functionalities are iteratively added to the sketches, wireframes, and prototype while the MVP may already be monetized.
Between the idea, and the MVP, you have the prototype. A prototype is a fleshed out version of the app's UI, meant to test for functionality and user experience issues at a very low cost. Prototypes are perfect for iterative design and development, being less complex than an MVP.
Identify Key Functionality Features
The first step of prototyping is to identify the key features of your app. If you've gone through your strategy in the previous development stage, you already have a prioritized list of features written for your MVP. This list will work here as well. Take the top 3-4 features from your list, and consider how they would be accessed and where they'd be in your UI.
Create User Personas
User personas are a powerful design and marketing tool, and they are meant to represent the major user groups for your app. Your app can target many different user segments, but it's important to categorize these segments in a way that translates into UI and functionality decisions.
For example, you're building a productivity app that targets both 20-something young adults in college, and 40-something soccer moms looking to set a schedule for their children. The key differentiating factor between these two user groups may be the level of technological competence, or it may be the desired functionality features. By understanding your user personas, you are able to make important design decisions early on, where you have very low costs of implementation.
Sketch out the Primary Screens
Once the conceptual work is out of the way, it's time to put something on paper (digital or otherwise). This is where the sketch comes in. A sketch is a perfect tool if you want to understand how elements will be positioned on the screen. Sketches are cheap to create, and they can be used to get buy-ins from stakeholders before moving forward with the app.
Turn the Sketches Into Wireframes
Once the sketches have been approved by the stakeholders, it's time to start the wireframing process. Wireframing is a low-fidelity representation of the UI, but it still lacks functionality. Some companies will skip the sketches and dive straight into the wireframe. However, fixing a wireframe is slightly more time consuming than fixing a sketch.
Create the Prototype
Wireframes can be easily transformed into a prototype by adding basic functionality and interactivity. A prototype will help you calibrate the UI and improve the user journey. The main advantage of taking this route instead of jumping straight into the MVP is cost-saving. Each step of the way allows you to calibrate the fundamental elements of your app for a very low cost, a process which could otherwise be very expensive if complex code and design is added to the app ahead of time.
User Testing and Recalibrating the Prototype
Once the prototype is up and running, it can be shared with stakeholders, users, and investors. This is also the point where you can start the initial user testing, and calibrate the prototype to perfection. Based on user feedback, you will be able to go into the MVP with a market-tested UI and UX, and start adding core functionality to your app.
There are several prototyping tools out there, which can allow your team of designers to create prototypes in an expedient manner. In some cases, some of these tools are so accessible that they eliminate the need to use sketches before designing the actual prototype. Here are 5 of the most popular tools today.
Balsamiq is a tool designed to build wireframes, but it has a feature which allows you to create interactive prototypes that can be used for testing and demos. The main strength of Balsamiq comes from the community, which generates a ton of content that can be used to speed up the design process. You will find assets, templates, and other elements online for Android, iOS and BlackBerry.
Justinmind also works with wireframes, and the great thing is that any change you make on the wireframe is reflected on the prototype immediately. This tool also includes simulations for various gestures such as swipe, tap and hold, and others. To top it all off, you have access to a large library of user-generated pre-built widgets to speed up the design process.
A free to use tool, Moqups is one of the most accessible items on this list. It has an easy-to-use interface that comes with a of pre-built materials such as image placeholders, sliders, and others. You will also have access to numerous templates that come with platform-specific UI elements. The only downside to this tool is that it only produces wireframes, which then have to be transferred to another tool, in order to add functionality.
Proto.io is a prototyping tool designed specifically for mobile applications. This tool allows you to create prototypes without any code, and it has a great feature that allows testers to add feedback as they are using the prototype. It is also very accessible. The entire prototype can be developed from a single screen, where designers add the various elements of the app and determine the interaction between them.
UXPin is available for multiple platforms and a wide range of resolutions. The main advantage of this tool is that it has strong version control, which makes iterative work easy. On top of that, it has useful features such as real-time commenting and editing. UXPin is the tool to use if you want an emphasis on rapid UX development.
In order to ensure maximum cost efficiency, and a perfect market fit, it's best to have an initial development stage that includes prototyping and an MVP. If the development process starts with a laser focus on the target market and its needs, augmented by iterative development, the resulting app will be much cheaper to develop, and it will be much more effective at achieving business objectives.
Published at DZone with permission of Magdalena Brych , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.