What are the best steps to use Miro as no-code project scoping tool?

This article is all about, how you can structure your app before actually developing it. Poorly organized apps tend to end up lying around as a wastage of resources and money. You should know what you’re building before you build it. One of the widely used tool for project scoping is Miro. We will be looking into how we can use Miro for no-code project scoping. Grab your notepad and pencils as we move along this short but useful journey.
Going forward we will be discussing various steps that should be taken in order to define the estimate of the project and excellent project development roadmap using Miro

1. Introduction

As a first step, gather around your team which will be working on the project including the design team and give formal introduction about the app. Create communication channels for the team to collaborate. Share the link to Miro Board (Project Scope) with the team in the communication channel.

2. Discovery

This step is further divided into 4 steps so that the team is engaged and they feel more energetic and responsible towards the development and completion of the project

• Introduction

Explain to the team what this is about and share with them the necessary resources to understand the project requirements and the approaches that are going to be used to build the project

• Kick-off

It’s like a coach is trying to make a team of players find purpose to play and win out there in the field. Make the team interact with each other ask them why they think they are onboard and what are their expectation from this project

• Product Introduction

Now that all the things are in their place and everyone is smiling at each other in the conference room, it’s time for a pin drop silence and a high level discussion of the project. This primarily includes types of users, competitors, languages, supported devices and color schema (design draft). Valuable insights of the team are welcomed. Questions and Answer session

• Communication

Everyone has now the idea of what they will be getting their hands on in the next couple of weeks so now we need to be in the loop and be updated at every step hence schedule a follow up calls and share zoom meeting links or whatever tool you want to use.

3. Idea Definition

Ask yourself basic questions as to why you are developing this solution, what is the need, what will be the challenges and what are the most critical assumptions of the MVP and who are the competitors and what advantages will you have over them?

Let’s break this further into two steps, each step being briefly explained

1. Share Idea, Customers and Challenges in the first official meeting after discovery
2. Make Sure that the design team understands the idea

Don’t worry. I’ll tell you how to define Idea, Customers and Challenges. We will not be sticking to this brief of a description.

Idea and Hypothesis

The process of sharing an idea, rather the formula for sharing an idea is

This is an idea, We believe in this hypothesis. Why? Because of XYZ Hypothesis

Customer Segment Canvas

Make a canvas inside your Miro board and gather some information related to the potential users of the product. These need to be real customers

Challenges – Problem Canvas

Make a canvas inside your Miro board and start with the problem rather than solution.

Include the following things in your canvas

• Vision
• What is the problem, one liner?
• Customer Segment (B2B, B2C, Industry, Sex, Location)
• Root Cause of the Problem (Write 5 whys: when, where, what, who, why, till you get to the root cause)

• Alternatives (What do the potential customers do to solve the problem?)
• What will happen if the problem is not solved? (How does it impact the customers?)
• What is the impact on the numbers? (Time, Revenue Loss, Cost Overrun)
• How will the future looks if the problem is solved? (Positive Impact)

4. User Journey Map

1. Plan user actions in the app, step-by-step
2. Together with designers, create the current user journey and mark the pain points.
3. Together with designers, create a planned user journey with defining the primary focus area.
4. Think about the application type and most important features that define the core business process

5. Process Diagram + User Flow

Let’s decide which minimum features do we need to include in the prototype, so core business processes are covered and major user pain points are solved.

1. Plan user’s action in the app, step-by-step
2. Group user’s actions by stages e.g., select product, add to cart, setup payment etc.
3. Think about the most important actions that a user will perform and you will have to validate. Rank them from top to bottom and draw a line between them that limits the prototype scope.
4. Describe steps to completion of the main tasks.
5. Put the final interaction – the final screen the user will see when they accomplish the desired task. It could be a confirmation screen to inform the user of completion of their action.
6. Make labels meaningful, try to use a little description that describes exactly what the user flow represents.

6. Information Architecture (Breadboarding)

Create an information architecture that will help us understand how the users will navigate through the app.

Designers will present the Information Architecture based on previous discussions

Provide feedback and suggestions to improve the information architecture

7. Features + User Stories

Create and describe product features in the form of user stories. The user story focuses on the experience – what the person using the product wants to be able to do.

8. Wireframes

Create wireframes that will help us understand how elements on all pages will be placed

1. Designer will present the wireframes.
2. Provide Feedback suggestions to improve the wireframe.

Create one or two versions of the wireframes in case one gets rejected or has too many flaws in it and also build some ideas for the landing pages.

9. Visual Palette

Discuss how the app should look like, so once the wireframes are finalized, we’ll know how to decide them.

Describe in adjectives how you see your product personality and what will appeal to the users?

Are there some existing brand guidelines that you can follow or have to redesign it all together?

Also apply visual styles to the wireframes that will help us to see how all pages will look in the final app!

Questions like:

• Does the design follow the plan completely?
• Is real content displayed in the designs?
• Does design cover corner cases e.g., empty screens, buttons state, hovers, errors, appearance on big and small screens?
• Does design fit the expectation?

10. Clickable Prototype

Create a clickable prototype that you can test with real users and get feedback.

11. Product Roadmap

A high-level Roadmap, it is a high-level visual summary that maps out the vision and direction of your product offering over time. Mainly it shows which big features will be released and when.

12. Product Estimation

Developers will decompose User Stories in smaller tasks and prepare a rough estimation for them. In the end we’ll see how much effort it takes to develop a product. When the milestone is set. It should be reasonable

13. Release Plan

Phew! Finally. The last step is to create a release plan – what will be included in each sprint/milestone.

Wow. Looking back we have came a long way in this short journey of ours. Hope that was helpful to you in planning your next no-code project

‍