• Zero to One Design & Development

All the Phases of the Mobile and Web Product Development Process

The digital product development process is, undoubtedly, a costly and complex one. Analyzing the market, deciding on the type of app you will build, estimating the budget and, finally, the execution – they all are long steps that can sometimes discourage you. However, they all are equally important. Neglecting some can prejudice the others and can eventually cause delays in the release.

Which is why we place equal importance on all the phases of building a mobile or web product. From our perspective, the distinctive phases of the whole process include:

  1. analysis, customer persona and customer journey map
  2. sketching/wireframing
  3. user interface design
  4. planning
  5. clickable prototype
  6. development
  7. quality assurance
  8. launch and maintenance.

Let’s see why each of them is important.

1. Analysis, customer persona and customer journey map

Every durable startup idea (web or mobile product) should be based on a thorough analysis. Who is it for? What budget will be allocated? How will the product be profitable? Will it be part of a future, more complex project? All of these questions (and their answers) are essential to establishing how the project will be tackled.

The customer persona

Who will your customers be? How will they use your product? When will they use it? After having initially installed or accessed the app, what will trigger their comeback? This is another batch of questions that need to be taken into account before getting down to work.

Make sure your initial analysis includes actual demographics, behavior patterns, motivations and goals your buyer persona is characterized by. It is the end user/buyer that you should have in mind during each stage of the process. Once their characteristics are pinned down, try to think of your customer’s lifecycle: after they are reached, they need to be acquired, converted, retained and their loyalty nurtured.

The customer journey map

Another essential part of the analysis, the customer journey map will help better understand how the customer will be using the digital product. There is no predefined way of drawing it – all projects are unique, and mapping can be adapted to specific characteristics. There are, however, a number of prerequisites:

  • always have in mind the customer’s perspective
  • keep in mind all of the user’s demographics
  • segment your audience
  • define customer goals
  • evaluate the brand promise (in case the new product has to be in line with previous ones of the same brand)

mobile-product-development-process

Marketing and Monetization

Another important aspect during the analysis stage involves assessing the potential revenue. How would the product manage to make money? After all, having an app just for the sake of it can be cool, but defeats the purpose of owning a business.

This is also the part in which you decide for mobile first, mobile only or mobile after. If you plan on allocating a great deal of your time and your money for promoting a product that’s exclusively mobile, you may stand a chance. If you plan to leave it all to…fate, you should know that the app stores do almost nothing for your app to stand out in the crowd.

The wisest thing to do would be to go web first – mobile after. Once you’ve collected a consistent list of email subscribers, website visitors and potential clients who clearly state that your product is worth downloading and reusing, it might just work out.

2. Sketching/wireframing 

mobile-product-development-phases

After having thoroughly analyzed the market and the customer persona, the next step would be to document and wireframe the app, to understand future functionalities.

Although it may look like time is not on your side, actually drawing detailed sketches of the future product helps enormously. “Who has time to doodle when the deadline is so close?!”, you may be asking yourself. Keep in mind that, without this necessary stage, you may be overlooking essential aspects that may, in the end, make the difference between your product and that of the competition.

Sketching does a lot more than simply tracing steps. It can be a powerful:

  • communication tool (for setting up common views of a project)
  • collaboration tool (serves the entire team, who can better understand the specifications and the necessities of the product)

Once the sketching part is over, wireframing will help refine the ideas and arrange all components of the design the proper way.

Never neglect sketching in favor of wireframing! They are both equally important and the latter comes as the natural continuation of the former. The whole sketching and wireframing process are the work of the designer, but assistance from the whole team is required for optimal results.

3. User interface design

Sketching and wireframing are processes tightly connected to this stage, in which clarity and usability gain almost total control. The User Interface Design is a bundle of:

  • information architecture (defined structure of the information)
  • interaction design
  • visual design

It basically includes refining all the information baggage accumulated so far. The focus of this stage is always the user. How will they react to each stage of the process of the app? Is the design intuitive? Do they know how to find their way around it? All of these are questions that the user interface design part should take into account. This is when your actual product starts to take shape.

4. Planning

Phases mobile and web app

Now it’s time to set everything in place. Before the execution continues, it is mandatory that all resources needed are estimated: front-end and back-end development time, the number of programmers for each stage, and the total cost.

According to the product requirements, the implementation plan will be set in place. This includes the:

  • roadmap
  • prototype (how complex will it be?)
  • resources (time and manwork)
  • costs

5. The clickable prototype

Once the User Interface Design is finished, it can be transposed into a clickable prototype. Sketches, wireframes, and user interface design are corroborated to generate a clickable sample of what is closest to the final version of the product.

“A prototype model is built to test a concept or act as an early platform to validate that a design meets the target user’s requirements.” Marc Serughetti, director of product marketing for virtual prototyping at Synopsys, quote from eetimes.

We’ve developed an efficient way of dealing with prototypes: a three-stage process that entails

  1. working on “proof of concept”: we do market research, analyze the results, identify the key features needed for providing the concept for the digital product, we create user scenarios and we finally come up with the concept;
  2. a design stage: this is where the interactive screen mockup focuses on the interface and clearly emphasizes the main visual elements;
  3. coding in static mode: this helps stakeholders understand how users will interact with the product.

At this stage, testing plays an important part. Friends, family, coworkers – they should all be asked to maneuver the interactive prototype of the user interface, so that usability concerns are eliminated.

6. Development

Depending on the marketing plan (and on the budget), the type of product will span on different periods of time; and it will require specific programming skills, both of which will be clearly established during the planning phase.

Web applications are a lot easier to distribute, but they require better development skills (plus higher budgets). Getting a unanimous look and feel for all platforms intended, as well as a proper level of flexibility for them can be quite a challenge.

The main advantage of web apps is that they can be built using already available technology (such as JavaScript), but the main drawback is that they won’t be able to integrate any of the smartphone’s technical assets.

7. Quality assurance

Quality assurance needs to be in place from the very beginning. However, it is of crucial importance during development. A proper QA process is undergone with the help of specific tools, functioning during precise stages. Some of these tools and processes are described here.

The main stages of the QA process include:

  • a preparatory phase (lasts between the actual beginning of the development process and the primary form assembly of the digital product)
  • the introduction of functional requirements
  • test documentation (depending on the complexity of a digital product, complex instructions need to be written)
  • user feedback
  • the preparation of a test environment
  • control
  • acceptance testing (checking of all the initially established acceptance criteria are fulfilled)

8. Launch, Maintenance, and Support

After the QA process is over and the product is in final format, the app can be submitted to the store (in the case of a mobile app) or the website will go live.

Depending on the complexity of the product, maintenance can include planning for continuous updates and testing upgrades. It is advisable that not all features of the product are released simultaneously; the core of the web or mobile app should come out at launch and the rest of the features should be released progressively, in accordance with the principles of agile development methodologies.

Your project budget should take into account the continuous revisitation of some of the product’s functionalities, for a determined period after launch.

Building a digital product is commitment

Building a digital product is long and costly. Apart from the money invested, it requires a long-term commitment. The initial research and analysis stage, that can sometimes take a few months, is almost entirely up to you. Deciding on the type of product you want to build, analyzing its end-users and its Unique Value Proposition is a mandatory part of the journey.

Keep in mind that the project is not over once the app is live. On the contrary, hard work is just beginning. You’re in it for the long term – so don’t neglect any of the steps in the process.

Great ideas come and go. Many never get transformed into a real digital product. Bring yours to life.

Get a prototype

Thinslices in numbers

70+

people