How to design a Mobile Application from scratch

Table of Contents

Screenshot of product map template

Create a Product Map

What is a Product Map?

A product map is a way to visually represent every feature and screen of your product in one view. In a product map, each screen should be represented as a low fidelity wireframe and organized according to the feature where it would be found. 

Why create a Product Map?

A product map will allow you to “map out” each page of your product and understand how the user will navigate through each feature. By completing it, you will be able to:

  • Name and identify each feature and screen in your product – We use a naming convention that allows us to organize features numerically and serve as a reference point for where you are in the application. Each feature is given a numerical designation, and each page begins with the number (X) that corresponds to its feature. The second number, or x, corresponds to where you are within the flow. The first page, or landing page, in any flow, would have a ‘0’ in its second position. The letter in the third position, or a, corresponds to the data state, which is conditional. The default state of any page would not have a letter in its third position.
Create a Product Map

As an example, an application could have a page called “3.0 Profile” and “3.0a Profile – edit” to show that profile edit mode is another version of 3.0 Profile. In other words, the overall layout remains the same, but the data state has changed. 

Check out our wireframe kit for a full list of guidelines for how to set up your product map.

  • Understand the number of screens that will need to be designed and developed – By identifying each known screen, you will be able to generate a scope for the amount of work the project will require. This will be crucial to planning and setting milestones.
  • Align with developers and key stakeholders before beginning the design phase – Another important benefit of the Product Map is to make sure everyone is on the same page regarding the number of features and what it will take to design and develop them. As design is an iterative process, the exact number of pages may evolve over the course of the project, but it will allow you to agree on a starting point. Your development team can begin creating the skeleton for the app while designs are underway.
Connect with us

Are you enjoying our guides? Share your thoughts and let us know what you would like us to write about next!

Ready to reduce your technology cost?

Additional Mobile App Guides

top

Inactive

Innovating Top-Tier Mobile Experiences.
Platform partnerships