facebook pixel

How
we
transform
your
business
idea
into
an
app

Here is a short checklist to kickstart your app development project successfully:

  1. Project analysis and scope definition (Product and Service Design)
  2. User Stories, functionality and features of the app
  3. Design and Prototyping app processes and user experience
  4. Back-End Development & Front-End Development
  5. Timeline & Costs

How many times have you thought you found the right business idea? Have you ever dreamt of turning it into an app capable of solving a real-life problem you most care about?

Many projects do not take off because most of the people do not know where to start or get easily discouraged when thinking about all stages necessary to develop and launch an app. A world that is often misunderstood by the wider public, because it is made up of numerous technical aspects, which can seem difficult and too abstract at first glance.

In this article we have drafted and defined a checklist comprehending all main steps necessary to successfully kickstart your app development project. Our idea is to provide a structured canvas for new entrepreneurs, and aspiring ones, towards the creation of their own digital product, drawing a clear sequence of steps and action required to plan budget and development timelines down to the smallest detail.

Following our method, we created an online tool with which you can estimate in a few clicks the cost of designing and developing your app by quickly answering fews easy questions. You will find it at the end of our checklist!

1) Project analysis and scope definition (Product and Service Design)

Every application is designed with the purpose of intercepting the need to solve a problem affecting one or more groups of people: our target audience. The product and service design, in our case for a digital product, will allow users to satisfy those necessities in a way not yet available on the market, or through an already existing motion, but in a much more optimized fashion.

Before starting developing an app, and more generally any digital project, we always recommend carrying out a Market Analysis and Gap Analysis. In order to design a successful digital service and/or product, it is necessary to identify the main areas of improvement in the current state of the art, so that our new service/product could offer a better framework to address the market. Here it is a shortlist of discussion areas to be addressed:

  • Target customer persona and market segments
  • User needs
  • Objectives vs State of the art
  • Competitor landscape gap analysis
  • Definition of the "Unique Value Proposition"

Through the steps mentioned above, we will define budget, requirements and needed features in order to address a simple but fundamental question: what makes my app unique and valuable?

Once the answer has been found, we are ready to prepare an effective “product pitch”. Very useful, for example, if you want to present your project to potential partners and investors.

In other words, market analysis is important to build a product suitable for the intended audience, right from the first line of code.

2) User stories and Application features

At this stage we begin to get our hands dirty while building the foundations of our digital product. The ideal kick-off towards the development of an app happens when drafting the first list of desired functionalities to benefit hypothetical end users: this process aims to produce a preliminary list of, so-called, User Stories.

In project management practices, when in the context of developing any digital product, the User Stories are a tool that allows developers and stakeholders to describe the various functionalities and the processes of use, taking the perspective of an end user experience, while starting to plan technical and economical resources to be allocated for the project.

Through this approach we are able to understand what are the must-have and nice-to-have features. This middle-step within the project timeline is needed to identify what are the main features, and those not fundamental but desirable, in order to prioritize budget and other resources accordingly.

This method is often used to create what is called a “Minimum viable product (MVP)”: a first version of the app built on a restricted group of main functionalities (Core Features). In this way, entrepreneurs can obtain a basic working version of the app, to be tested by samples of potential users belonging to the target audience or, to be presented to potential investors to fetch needed resources. In this way, entrepreneurs can drastically reduce development costs and time, minimizing risk of failure while containing the initial investment and maximize chance of success.

MVP prototipo

In parallel to the drafting process of User Stories, design guidelines are also defined. As for design guidelines, we intend the set of graphical (i.e. colors palette, layout, spacing) and semantic elements (i.e. buttons, icons) used to streamline the UX (user experience design) and the UI (user interface design). We’ll tackle all necessary steps for these processes in the next chapter of this brief guide.

3) Product Design and Prototype

The differences between UI and UX

When we talk about UX Design we refer to the overall experience, technical and graphical, the end user navigates through. We therefore mean the series of interactions with the page or app (click, scroll, hold, etc) that the user must perform to complete a so-called User story or more generally to perform any action in the app.

As for UI Design, on the other hand, we intend the creation of the interface with which users interact, that is the style, colors, fonts and everything that users see on the app.

Both aspects are closely connected and addressing them correctly it’s crucial to create a long-lasting successful product.

ux ui

Create a Project Wireframe

After defining to the smallest detail all aspects related to UI and UX, stitching together these elements pertains to another crucial activity to be carried out during these preliminary phases: Create a project “Wireframe” - a schematic flow of screen and process steps through which the user will navigate to use the app.

The Wireframe will be a first visual draft of what the final layout will be. A first draft where theinteractions between the various screens, the spaces and the architecture of the elements are illustrated, not giving too much prominence to the styling of those elements (we will work on that in the following phases), while paying more attention to their contextual meaning for the end user.

wireframe

The realization of the Wireframe will be the result of the work done by the Designers and is mainly based on UX. The goal is to make the app as "user-friendly" as possible.

Mockups and App Prototype

We are now ready to create the mockups, which is the illustrative presentation of the product we will use to finalise an app prototype, which is a first clickable and interactive version of what will be the final app.

Creating a Prototype for your app has many advantages:

  • allows product team to receive feedback from “early adopters” users
  • offers an effective tool to be presented to potential partners, investors and collaborators
  • allows you to validate your idea through focus groups, user testing and other digital panel testing solutions
  • significantly reduces app development time as performing changes on the prototype requires a much smaller effort, in terms of time and resources, than to perform it on a complete app

Here is an example of mockup that Fontoso realised for one of our clients (production time about 72h):

wireframe

Link to the complete prototype

Our advice for carrying out the first tests of the app

At this stage, we always suggest to carry out the following experiment to our customers: try to show it to someone (if a potential user, belonging to desired audience, even better) who has no knowledge of the app and analyze if its behavior (how it uses it) is in line with expectations on which such prototype has been built.

4) Back End & Front-End Development

The UX is now ready: the clickable prototype is being defined and the features to be developed are now clear to both the development team and customer. The backend team will now start to design the “heart and soul” of any digital product: its Database.

During this phase it’s crucial to have a clear and transparent communication flow between the development team and the customer. In Fontoso, for example, we always share the database schema and validate it with our customers prior to any following actions. Such practice allows customers to have an overview on all the data or information that will be collected and stored in the database.

That of data is an aspect often underestimated but represents a key step. In particular with regard to future marketing actions.

The back-end of the applications we develop in Fontoso will be used both by the iOS and by the Android version. We create a single shared database for both versions of the app, speeding up development times and consequently reducing costs.

Let's move on to the front-end now!

For the development of the front end, that is everything that is visible in the app, the guidelines imposed by the prototype are followed. We use React Native, an open-source framework for mobile apps, created by Facebook. The use of this technology allows us to halve development times and costs for an iOS and Android app.

5) Timing and costs

After seeing in practical terms how to transform an idea into an app, let's now analyze how the development roadmap and all costs of this process are estimated.

Development Roadmap

In regard to define a timeline, based on our experience as development agency, we were able to carry out the following estimates, mainly based on the app platform and features richness:

  • MVP App with basic functionality (showcase, contacts and some minor features): 4-6 weeks
  • MVP App with intermediate functionality (booking a service, payments, chat): 6-8 weeks
  • App with intermediate functionality (booking a service, payments, chat): 6-10 weeks
  • App with very complex features (integration with existing services, AR / VR, Games): 10+ weeks.

How much does it cost to develop a mobile app?

The answer, as always, is: it depends. To facilitate those who want to take the first steps towards creating a mobile application, we have developed an interactive tool online that will allow you to estimate in a few clicks a first cost structure for your project, and you check it out here:

STIMATE THE COST OF YOUR APP?

Did you like this guide? Share it with a friend or colleague who might be interested