Different ways to test your MVP

If you have been following the Build and Scale newsletter, I have talked a number of times about an MVP.

It's the best tool in an early-stage startup's arsenal. Please check out other editions if you want to learn about what an MVP is and how can you prioritise features in an MVP. In this edition, we will go one step further to understand various ways you can develop an MVP with each serving a different purpose. Also over the traditional approach, I have added a surprise method of testing MVP using No Code. Follow along with the article to understand this method and evaluate which one serves your need

What Are You Trying to Achieve from an MVP?

Before we discuss different types of MVPs, it's important to understand what you are trying to achieve. Are you trying to validate a market fit? Testing a new feature? Or simply gauging interest in your product? Once you have a clear idea of your goals, you can select the right type of MVP for your needs. Essentially your MVP is trying to solve a hair-on-fire problem ( possibly with a brick) so it doesn't need to perfect Steve Jobs launch standards but something that gets you to test things faster.

What Are You Not Achieving with an MVP?

It's important to understand the limitations of an MVP. An MVP is not a complete product, and it's not meant to be. It's a test to validate assumptions and hypotheses. An MVP will not provide you with all the answers, but it will give you insights into what works and what doesn't.

Different Flavours of MVP

There are essentials five flavours or so to say level of an MVP -

1. Wireframe

2. Mockup

3. Prototype

4. No Code App ( New !)

5. Web App

Wireframe

A wireframe is a low-fidelity representation of your product. It's a static image that shows the basic structure of the product, including the layout and the user interface.

• Effort Required

• 2- 3 Days just you and your Cofounder Tool - Miro, Pen and paper

• Steps to develop

1. Identify Key Features: Determine the essential features that need to be included in your MVP. Focus on the core functionalities that address the main problem your product aims to solve.

2. Define User Flow: Map out the user flow or the sequence of steps users will take to accomplish tasks within your MVP. Keep the flow simple and streamlined, focusing on the most important user interactions.

3. Sketch Initial Concepts: Start by sketching rough wireframe concepts on paper or using a digital tool. Quickly iterate and explore different layouts and arrangements for key elements.

4. Create Low-Fidelity Wireframe: Using a wireframing tool or software, create a low-fidelity wireframe that captures the basic structure and layout of your MVP. Keep the design minimalistic and prioritize functionality over aesthetics.

• How to test

• To test a wireframe, you can show it to potential users and get feedback. This feedback can help you understand what works well and what needs improvement in the design. You can also use this opportunity to gather insights on the user experience, such as how easy it is to navigate the wireframe and whether it meets users' needs and expectations. Additionally, by testing the wireframe with different groups of users, you can gain a broader perspective on the design and identify any patterns or trends in user feedback.

• What can it answers ?

• A wireframe can answer questions about user interface design and layout.

Mockups

A mockup is a high-fidelity representation of your product. It's a static image that shows the product in more detail than a wireframe.

• Effort Required

• 1 week just you and your Cofounder Tool - Figma, Canva, Miro, Powerpoint

• Steps to develop

1. Gather Requirements: Clearly understand the requirements of your MVP. Identify the key features and functionalities that need to be represented in the mockups.

2. Define User Interface Elements: Determine the essential user interface (UI) elements needed, such as buttons, forms, menus, and content sections. Consider the visual hierarchy and placement of these elements.

3. Choose a Design Tool: Select a design tool that suits your needs and familiarity. Popular options include Figma, Sketch, Adobe XD, or even basic tools like PowerPoint or Keynote.

4. Create Wireframe Mockups: Begin by creating low-fidelity wireframe mockups that focus on the structure and placement of UI elements. Use simple shapes and placeholders to represent different components.

5. Refine Layout and Structure: Based on the wireframe mockups, refine the layout and structure of the mockups. Pay attention to alignment, spacing, and consistency in the placement of UI elements.

6. Apply Visual Design: Start adding visual design elements to the wireframe mockups. Incorporate colors, typography, and visual styling to create a more polished appearance. Consider your brand identity and design principles.

• How to test

• Share the mockups with stakeholders, including users and team members, to gather feedback. Incorporate their suggestions and iterate on the design, refining it further. Ensure that the mockups align with the requirements and effectively communicate the MVP's functionality. Document the design decisions, interactions, and specifications of the mockups. Provide clear instructions to developers or designers who will implement the MVP based on the mockups.

• What can it answers ?

• Mockups help answer questions about the visual layout, user interaction, and content presentation of a product. They provide insights into the overall design structure, user flow, and branding elements. Mockups also facilitate stakeholder feedback and serve as guidelines for development, ensuring a cohesive and user-friendly end product.

Prototype

A prototype is a functional representation of your product. It's a working model that can be tested by users.

• Effort Required

• 2-3 Weeks with a UI / UX professional or someone who at least knows basic of design and use tools like Figma / Adobe XD

• Steps to develop

1. Create Basic Screens: Start by creating the basic screens of your prototype, representing the main user interface elements and navigation. Keep the design simple and focus on functionality rather than visual aesthetics.

2. Link Screens and Establish Flow: Connect the screens of your prototype to establish the user flow. Set up interactions, transitions, and gestures that allow users to navigate through the prototype and interact with the core features.

3. Add Interactive Elements: Enhance your prototype by adding interactive elements, such as buttons, forms, and menus. Make these elements clickable and functional to provide a realistic user experience during testing.

4. Test and Iterate: Conduct usability testing with potential users or stakeholders to gather feedback on the prototype. Use their insights to iterate and refine the prototype, making improvements to enhance usability and address any identified issues.

• How to test

• To test a prototype of an MVP, first establish clear testing goals, such as assessing usability or validating functionality. Recruit representative participants and observe their interactions with the prototype while collecting feedback. Analyze the feedback to identify patterns and usability issues, and iterate on the prototype based on the insights gained to enhance the overall user experience.

• What can it answers ?

• A prototype can help answer questions about usability, functionality, design, market validation, and stakeholder alignment. It allows for user testing and feedback, validates core features, assesses visual appeal, gauges market demand, and facilitates communication among stakeholders.

NoCode App ( New !)

A minimal web app is a basic version of your product that can be accessed through a website. It's a functional product that is not fully featured. The effort required to develop a minimal web app is slightly higher than a prototype, but it's still less than a complete product.

• Effort Required

• 3-4 weeks which you can do yourself or hire a No Code Developer Use tools like Notion, Airtable ( Won’t advise Bubble at this point )

• Steps to develop

1. Plan the Data Architecture: Design the data architecture and relationships within Airtable. Identify tables and define fields to represent different data entities and their attributes.

2. Set Up Data in Airtable: Populate Airtable with the necessary data. Input information into the relevant tables, ensuring data accuracy and completeness.

3. Design User Interface in Notion: Utilize Notion's flexible interface to design the user interface of your app. Create pages, layouts, and blocks to represent different app screens and components.

4. Connect Data and User Interface: Establish connections between Airtable and Notion. Use formulas, relations, and linked databases to synchronize data between the two platforms.

5. Configure App Functionality: Leverage Notion's built-in capabilities to add functionality to your app. Utilize features like formulas, filters, and rollups to perform calculations, automate processes, and enable dynamic data display.

6. Advance: You can also deploy a Web App using your notion as CMS using a tool like super.so. This will help you whitelabel your product while giving a feel of an actual app that users can use.

• How to test?

• Testing a No Code app is much similar to an actual app. Additionally you can use the comment capabilities of the app and ask your users to add them as they use your product. You can also run a focus session where you can sit with your customer across the table and ask them certain tasks on your app while they speak there thinking and steps aloud . Then question certain things about your app functionality which helps you learn further the usability of your app.

• What can it answers?

• A No-code app helps answer questions about functionality validation, user experience testing, market demand validation, stakeholder alignment, and cost and time efficiency for a product MVP. It enables rapid prototyping, user feedback gathering, and alignment among stakeholders without requiring coding expertise or extensive development cycles.

• Note that this kind of app could only be used mostly for information products or testing minimal functionality in an app.

Web App

A web app is a complete version of your product that can be accessed through a website. It's a fully featured product that is ready for release.

• Effort Required

• 6-8 weeks with a frontend developer + Backend Developer / Full stack developer

• Steps to develop

1. Choose a Tech Stack: Select the appropriate technologies and frameworks for your web app, such as HTML, CSS, and JavaScript for the front-end, and back-end technologies like Node.js or Django for server-side development.

2. Develop Front-End: Start building the front-end of your web app by coding the user interface using HTML, CSS, and JavaScript. Focus on creating responsive layouts, incorporating user interactions, and ensuring a smooth user experience.

3. Develop Back-End: Build the back-end functionality of your web app by implementing server-side logic, data storage, and integrations. Use appropriate frameworks and databases based on your tech stack choice.

4. Test and Debug: Thoroughly test your web app for functionality, compatibility, and responsiveness across different browsers and devices. Identify and fix any bugs or issues that arise during testing.

5. Deploy and Launch: Choose a hosting provider and deploy your web app to a server or cloud platform. Configure any necessary domains, SSL certificates, or other deployment settings.

• How to test?

• Much similar to the No Code App, testing could be performed with focus session where you can sit with your customer across the table and ask them certain tasks on your app while they speak there thinking and steps aloud . Then question certain things about your app functionality which helps you learn further the usability of your app. You can also use website recording tools like Hotjar or PostHog to learn from user behaviour

• What can it answers?

• No need to tell this you, you will really know by this time whether your app is of any real use or just waste of engineering hours.

Which One Is Right for You?

The MVP flavour you choose depends on your goals, your resources, and your timeline. If you're looking to test a new feature quickly, a wireframe or a mockup might be the best option. If you're looking to test the user experience, a prototype might be the best option. If you're looking to test market fit, a minimal web app might be the best option. If you're ready to release a complete product, a web app might be the best option.