Minimum Viable Application (MVP):
Planned Success and Users
You have an idea, an innovation, an invention — building something is your goal, reaching users is the method, and monetary acquisition is your path. Entrepreneurs make, sell, and reach new heights everyday, so why can’t you?
Meet the M.V.P or Minimum Viable Product. A usable idea-based solution that fits the framework of your larger objective and becomes the solution to showcase your concept, gain funding, and move forward while gaining traction.
Multiple Step Processes
Trust the process is a common turn of phrase that is immensely true here. Figured out what your problem is, the solution to your problem, and then identify who, what, where, and why users would find your solution as a successful outcome.
Matrices and Lo-Fi mock-ups can help test & validate the concept, while working in tandem with actual users to motivate the outcome can increase the result’s capability. As in each state of play, you should become more aware of your solution and it’s ability t0 result success for everyone involved.
Lean Startup Methodology
The goal is to be lean, meaning costing little, and doing much. There are many software's that do a lot, there are also many solutions that cost a lot. Your goal in lean is to position the concept very narrowly so that the exact solution is precise and can quickly create success.
Success leads to users, users lead to money, and money leads to a bigger and better product. If you start small, you miss small, so there is little for you to lose and much for you to gain in positioning a product with little boundaries and many opportunities.
Planning a Product for Core Users
If you remember ever hearing about surface area, you can imagine this as such, if your product serves a large audience, and has little pre-established requirements, then you are able to position and reassemble to continue moving in a specific direction, also known as, pivoting.
For this example I will venture through the above M.V.P roadmap with interactive examples that help correlate how this method work, from start, to MVP.
The Problem
It can be difficult to quickly calculate the difference in hours between two floating points.
The Solution
A calculator that could compute these two instances and them add them algorithmically.
Use-Cases, Features, Action Points, and Priorities
In this case the user is a group of business employees that would need a way to quickly calculate these outcomes, separate from any software used to enter or schedule these events.
Leaving out monetization is a goal to get to a top down solution quickly, and then validate product market fit, which is equivocally important and should be the method normally followed.
Users at least should be able to enter information into inputs and receive a results as an outcome of the practice to find success. The total solution, at most should include a login, storing, and features for the users to track and compare their results overtime.
There could be much simpler solutions, much better solutions, and way more complex solutions but the pillar of the product market fit is that once you have enter these times, there is visualization that helps logically understand time-spent.
The initial problem was inspired by an app, this app does not have these features, therein, they can be integrated to be competitive.
Success Goal
There should be simple inputs, a success based submissions and a successful output of the calculation.
Success Validation & Research
Developing a solution would require being able to compute the difference of the times as duration, then the distance between each of the two times within twenty-fours hours.
In this scenario, the duration is during the same day, so there is an accepted belief that these outcomes occur, in the same day. It is important to the experience for users to be able to enter AM/PM to establish the difference between when the difference happens as a 24hr duration and return a simple outcome.
The changes here to the UI could either be to use 24:00 times, add an input for AM/PM, or even have a selection between the two, where also the form validation could accept an entered response or settings for results within a 12 hour span.
Logical Parallels
In this scenario, the simplest resolution to this idea is to use an advanced statistical calculator method such as Google Sheets. In this sense, Sheets has preset hour increments, also minutes, and seconds.
It converts the hours to twenty four hour times, and then results them into a calculated duration. This is a calculation in the application to hide from the user, and keep them focused on inputs, rather than additional calculation.
The gap is that infrequently users are versed in twenty four hour times, so entering the AM/PM reference is a much more comfortable and quick format, handling the equation would be the application in this sense.
success=((B2*24)-(A2*24))/24
There are also addition applications that net these values for you, built on top of sheets/excel. You can reference the initial office precedents for cell formats to make quick use of converting and establishing the base-line.
Simulations like this let you validate the concept and think through how your users could make use of a simpler application in which solves the need and improves upon continuous use.
Building a Scalable & Stateless Application
Following the alignment and tuning of the M.V.P the beginning of the product development turns to the coding phase of the solution. As design, experience, and interface begin to unfold in the first sets of iteration, now the interaction, processing, and computing takes over.
Focusing on accessible and definitive technologies pairs well with building a viable product to validate the solution and product market fit. A lot of products function well as JavaScript frameworks, with headless back-ends, and NoSQL databases.
In this scenario you can quickly iterate a framework for success then introduce feature based updates to improve the quality of the code. For a simple architecture you can turn to JavaScript applications, scaffold the application into a web application.
Moving the MVP it into an additional method like React Native or Electron once you have the concept developed, helps progress the pace to market. Packages can accelerate the development process as well, where in which can be replaced by business driven code later on.
Minimum Viable Architecture
Building an MVP often starts with a boilerplate, Create React App, Create Next App or even “Hackathon Starter” which has methods pre-configured for handling authentication.
For this project the architecture outlines Tailwind with Next.js to mockup a working application that will validate the concepts above as the minimum viable product.
Initialize the product by following the Next.js application documentation and create a new application. Once you have the application running, test the development environment and then move forward.
yarn create next-appyarn run devThe documentation brings us to the first step of choosing how in which to navigate the framework, depending on our application. For Tailwind, follow the application for the Next.js configuration
yarn -D tailwindcss@latest postcss@latest autoprefixer@latestOnce Tailwind is installed you can move to an example setup from their documentation pages, or mirror the example from the play page, which is one of the most fitting layouts for the MVP, so jump in there.
Now that you have an application setup for building the basis of the application it is an important point to define how in which the functionality will align with the information your application is looking to exchange.
Login or Functionality
This could be your login page if authentication is core to the application, though here, first in this scenario, with the above the focus is to build the inputs, then collect them inputs, and render a result based on the Google Sheets example.
Minimum Viable Functionality
Forms are a series of HTML inputs that require valid inputs and then a handler in .PHP to submit the information and either pass it to the database or return a result.
In this case, a great way to handle forms within react is to utilize state to create a layer on the DOM, to be able to pass back information to the components as props (properties). For this, with the addition of HTML5 form fields, you can use Formik, which will handle validation, and application state.
yarn add formik<input type="time" required>Forms in the initial phase require hooks to process data, on change event handlers to switch data, and databases to receive the information to process back. You could handle these form events on change, and useRefs to reinput the examples, but that would go against the full application solution.
Partially Viable Functionality
As chosen the Formik solution has ability to extend forms and send data to a databse with hooks and event handlers. Playing to this strength, the M.V.P functionality will emulate how this would occur within a database, to further the understanding of what full-functionality could progress.
You can see Formik is quite a solution, the ideas is less about controlled the inputs of the form but parse and redistributing this data. Eventually the content of the form, submitted, will inform features and improve the understanding of total hours.
For now emulating the functionality with JavaScript lets the framework showcase the core MVP of the application, extensibility can be built on later so that the form can reference the database and build something like visualizations.
jQuery and JavaScript, much easily handle react instead of creating lifecycle hooks for each type, if you are familiar with editing elements, you can access all of these DOM states, without the virtual DOM through jQuery.
Pitching the Solution & Gathering Users
After the Minimum Viable Product is developed, you can take the problem statement and the solution to the stage, conference room, group and hand-off a working example with functional code that will be able to deliver feedback and testing.
Now that you have an MVP there are thousands of ways to move this to the next level, pivot the positioning, and develop solutions through the lens of a focused experiment. You can begin, now to build a brand around a product and continue to understand your offering.
If you are looking for ways to develop a UI and work on the UX before moving to development — which is recommended, you can jump into Figma to create and build a solution for pre-validation. For presentations, you can utilize tools like Morflax to extend your UI into a real world model.
Thanks for Reading, Keep Pitching!
Looking for more Application Development advice? Follow along on Twitter, GitHub, and LinkedIn. Visit online for the latest updates, news, and information at heyitsjoealongi.com.
