CaddieOpen in CaddieDownload for Mac

How to Build a Minimum Viable Product (Part 2) - App Startup Series

Shared by Caddie Library · Updated
App Masters21:30Open on YouTube
Chapters show their main points

The bottom line

An MVP is the smallest set of features that makes an app usable, lovable and stable, described in a detailed spec document and mockups. Starting small cuts cost and bugs, and clear documents get accurate developer quotes.

Key takeaways

  • A first version should hold only what is absolutely necessary. 4:41
    • The big players started small and added features gradually. A simpler app is cheaper, faster to build, more stable and has fewer bugs.
    • A lean build also leaves budget for marketing, which an app needs to become known.
  • Familiar screens keep the first version easy to learn. 2:44
    • Chat apps like Telegram and Signal look alike, so users feel no learning curve. A steep curve makes users leave and lowers retention.
    • Successful apps rarely have more than about 10 main screens, so copying common elements is a good way to draw a user flow.
  • A detailed written spec closes the gaps that cost money later. 9:18
    • Use cases walk through each step, such as a login that succeeds and moves on, or fails and shows a "retype your password" pop-up.
    • Gaps confuse developers and investors, and fixing the navigation problems they cause costs more to design and build.
  • Wireframes and clickable prototypes show the flow better than words. 11:22
    • Balsamiq lets a non-designer drag and drop pre-made elements. Envision turns those screens into clickable hot spots with transitions.
    • Design the empty state, not only the full one, so new users know how to add a task or buy a subscription.
  • The spec should also name the technical tools the app needs. 16:37
    • Firebase covers chat, push notifications and analytics, and it has a free plan that can be upgraded later.
    • A marketer can switch a Firebase setting to show a promo pop-up without a new release.

Start small, but do it well, do it solid, do it stable, and then you will grow up.

Heim, B7Dev

Chapter summaries

0:00 Mapping the idea for a developer

An accurate quote needs a document that shows every screen and how the user moves between them.

  • The document must cover the main screens and the smaller satellite screens. 1:37
    • A reader who has never heard the idea should grasp its full scope.
    • Each button says which screen it leads to and how the user got there.
    • Specialists also weigh UX ideas such as redundancy and not making the user think.
    • The first stage is pouring all these elements into one document.

3:52 Deciding what the app is for

An MVP does one job, and extra features wait until users love the first version.

  • The first draft should ask whether the app solves a problem or entertains. 3:55
    • Fear of competitors' long feature lists pushes founders to overload the app.
    • The test is simple: ask do I need all this? and cut.
    • Once users love the app, updates add new elements slowly.
    • Too many features at the start leave users not understanding the app.
  • Pick the one thing you want the user to do. 6:50
    • Seeing a successful app makes you want stories, chat and everything else.
    • Focus on that single action instead.
    • Sometimes less is more when putting the idea on paper.
    • A budget may not stretch to every bell and whistle.

7:17 Writing the spec document

A spec needs no technical skill, only every detail of what the app does.

  • Choose a graphical or a textual route, depending on your skills. 7:20
    • Start with a list of features.
    • Someone without graphic skills can write it all out.
    • The spec explains what the app is about and what the idea is.
    • You can simply say I want the app to do one, two, three.
  • More detail saves arguments with the designer and developer. 10:01
    • Example: tapping a small lock icon opens a pop-up saying you need to go premium.
    • Then describe what the premium screen shows.
    • Say what the app does behind the scenes after each tap.
    • A jump from configuration to log off leaves a missing step in between.

10:45 Show the idea graphically

Screens and clickable prototypes get the idea across better than text, and a beginner can start with simple tools.

  • The more graphical the spec, the better. 12:51
    • Zeplin, Balsamiq and Envision need no graphics expertise.
    • A designer can upload finished screens to Envision for the same clickable result.
    • Wireframes look sketchy on purpose, so the focus stays on the elements and not the style.
    • Dialogues can be added to the mockups to explain each screen.
  • Real usage data should shape later versions. 14:45
    • Analytics built into the app show how people really use it.
    • Updates then fix what the data shows.
    • The team gets hard feedback from real users, not guesses about how they will behave.
    • Planning every state of each screen is the work of UI/UX engineers.
  • A beginner should start with simple wireframing tools. 15:26
    • Search for "app wireframing tools" and play with them.
    • Prototypes are more interactive, but at first explain it graphically as best you can.
    • Visio from Microsoft is the old-school option for mocking up screens and systems.
    • Skills improve slowly with practice.

16:16 Name the technical stack

The technical spec must list the tools the app depends on, and a non-technical founder needs help to write it.

  • The spec should state each SDK and technology the app will use. 16:37
    • Social sharing, analytics and any special feature each need a named SDK.
    • A founder who is not technical should ask someone who is.
    • Firebase is one of the most used platforms today for this kind of work.
    • Firebase lets one app trigger actions on the other side through push notifications.
    • The advice is to list Firebase in every spec, because you can do so much with it.

19:00 Documentation and funding

A founder should put as much as possible into the document and let the developer fill the gaps.

  • An incomplete spec is still worth writing. 19:15
    • The developer fills the gaps afterward.
    • The more that comes from the founder's own view, the better the developer understands the idea.
    • Customers are told to put in as much as they can and not to wait for perfect.
  • Good documentation is vital for funding. 19:41
    • A proof of concept is a stage smaller than the MVP.
    • Funding may call for a proof of concept before a full MVP.
    • The same document serves developers and investors.

In the growth library

Steve P. Young and Haim (B7Dev), Steve P. Young, founder of App Masters; Haim, app development agency lead at B7Dev. Explains how to define an app MVP and document it for a developer: keep features minimal, write a detailed spec with use cases, and mock up screens with wireframe and prototype tools. Following this lowers development cost, gives more accurate quotes and avoids feature bloat.

More from App Masters · The whole library, and ask it anything

Transcript613 lines
0:05

what is up app nation it is steve p young founder of webmasters.com the place you go when you want action-packed content related to helping you grow your app downloads and more importantly those revenues and in part two of this youtube series we're going to talk all about now that you've said i've done the market research i really want to pursue this app idea i want to put all my energy into it how do you build that mvp minimum viable product making sure you don't become feature bloated making sure that you don't over spend on all your development just focus on the key features that are going to get you to downloads to revenue and then you know build upon those features today with me my partner in this youtube series is heim from b7 dev if you're looking for an app development shop to really build your mvp and take you to that idea to mvp to launch the ultimate success go check them out be the number seven dev.com i'm welcome

1:05

back hi steve how are you thank you for having me all right what now that i'm the developer i have this great idea i did all the market research i went to app benny i looked at sensor child i know there's a market for this i did that four phase process where i research i did a simple validation and now the critical one is coming up with a document so how do i mock up or how do i document this app idea how do i take this app idea that in my head and tell a developer so that i get the most accurate quotes if you want to do the game you need to explain the main screens the bigger the smaller screens the auxiliary or satellite screens also for someone that needs to re deduct this document trying to understand this document to understand the full scope of the idea okay you need to start trying to do okay if i click this button i go to this screen how do i get to this point from where okay again for a specialist there are a

2:10

lot of concepts for user experience for user interface such as redundancy though making the user think about a a solidity of the the design etc etc okay so this this is the first stage a trying to pour into a document all those elements okay this is the something that we want to try to do today and the best way to do it is trying to don't re-educate the user okay the user is already used to what's up okay so telegram sorry about the people of telegram or signal or any other chat will do about the same but technically they will do the things different okay but the screens will be about the same because the user won't feel the difference or they won't have a big learning curve for using your app because if you do a big learning curve for your app that will mean that the user will leave the app in the middle okay the retention will be lower okay so this is the first step if you don't know how to do

3:21

a a flow a user flow is trying to emulate other apps with common elements okay it's not that hard if you check a successful apps they don't have more than 10 screens or so okay the main screens shouldn't be that much okay this brings me to another point if you already did this first stage trying to create all those screens we will talk about with what tools very soon but you need to to in the first draft you need to say okay what is me what is me up about what is the main idea should i bombard the user with a ton of ideas okay with a ton of features or should my app just solve a problem or just the game entertain the people with this this thematic and not with one million things one of the the most common pitfalls and problems that some entrepreneurs also apprentice they have is that they want to put too much into the apps okay they are fearful that other competitors they have all those features

4:34

what the what the user will compare between my simple app and those apps let me tell you this those big apps those big players started small and then they were adding more features and more features gradually because if you put a lot of features at the first stage the users won't understand so you need to just do a simple exercise you need to start telling okay do i need all this okay and i simplify the app so if you simplify the app that will be cheaper to develop faster to develop simpler to develop more stable less bugs more enjoyable but the user the user experience here will be easier because you need to focus on solving a problem entertaining someone okay just remember about the big players how they started and what they did after this okay start small but do it well do it solid do it stable and then you will grow up okay once the user loves your app and then with upgrades and updates you will be

5:46

sending slowly new elements but in the beginning focus on what is absolutely necessary because of this we have this name mvp minimum viable product what is the minimum thing the minimum list of features that you need to provide for the product to be lovable to be usable and to be stable okay this is what mvp means don't try to put all the whistle and bells from start because it's a big mistake okay and your maybe your budget won't be ready for developing all these because you will need as we were talking about in the last in the first episode about you will need budget for marketing you will need budget for a strategy for making your little app known in the market okay so the the sometimes less is more and this is very important when you design or you put your app idea on a paper okay i love it so i love it i think that's so incredible like what what you said time is what is absolutely necessary that is how you should really

6:57

determine all the mvp features i think too many times we look at the success of an app and we're like i need all that i need this i need that i need stories i need chat i need all this no like what is the one thing that you want to get your user to do and really focus in on that all right go ahead what's next let's talk about some tools to write this document okay yeah basically a lot of people will tell me i don't have any graphical skills myself so you know yeah we are several so but so um we have two ways mostly graphical if you don't have some writing skills or you have a textual if you do have some textual skills okay you you know how to explain your ideas yourself so first of all let's start by a list of features okay and then uh what is a spec document or a document that explains what the app should do a spec document and we will see very soon why we need this document is a document

8:04

that explains could be also text and graphics okay for a more more truthful explanation is a text or document that explains all the details about your app what is the app about what is the idea if you can explain some what is called or name case uses what is a case use it's very simple okay so i will put case use a user one point number one a user logs in okay number two the login is successful he goes to the next screen the login is is wrong he will be displayed with a pop-up that says bad password or file that password please retype your password wherever you want to okay okay let's continue from the next screen what this screen looks like okay what the what this the the user clicks on and what the app does or what the next screen or the next visual element the user sees what the process that is done in the backwards okay so you can explain you don't need to be a very technical guy you need just to explain i want the app

9:16

to do to do one two three okay every possible detail helps a lot because otherwise if you just put three three phrases okay you will leave a lot of gaps between the ideas what is the problem with the gaps the gaps in the future will be problematic for a developer to understand the full extent of your idea for an investor to if you are looking for funding to understand what you mean by that okay maybe we jump from configuration to log off i need to know what what there is in the middle okay why i mean all kind of navigation issues that you will see and then will cost more money to design to develop etc etc okay so be as much as details that you can here trust me the most information that you put will save you from discussions with the designer with the developer etc etc okay this is some text okay i will explain everything i will explain if i want to click on this product on on this a graphic on this feature

10:24

i will see a small log that says if i tap on the small log it will prompt a pop-up that says you need to go premium for this feature okay then you will put what the premium does in the screen in the premium screen you should do a you will see your login or or you need to to register into the in a purchase or a with some payment method whatever it is okay try to put as much as detail as you can okay this will help everyone a lot again if you don't know how to do it if you need help get some professional help in this case we can help you steve can help you uh some some a development agency perhaps of our system can help you okay so if you don't know how to do it uh try to do your best or get someone professional to help you the graphical way we have a lot of tools that do not you don't need to be an expert on graphics okay we have a ambition that maybe steve you can show we have zeppelin we have balsamic mock-ups that i love

11:38

here we see a screen what is a wi-frame okay you can see very something in this in in a very sketchy way that you can see all the elements you can just drag and drop all the elements uh on the screen like okay this will will will present a video player i need a button here so you have all the pre-made elements you just drag and drop do your best effort to to show it nicely okay and to explain you have dialogues that you can put in with with some wireframing or prototyping tools uh you can even do interactive prototypes like this okay even if you already have a designer working on this your designer can upload to ambition then you as you you may see if you click this you will go to this screen this is excellent for for developers to understand for designers to understand for investors to understand this like such uh interactive pilot okay for this and this is crucial the the the more a graphical you can go this is

12:58

the better okay we we can see here nice examples about how to show your ideas yeah i like how envision you can do what they could kind of say like hot spots so i can click on something go go interactions you can do all these transitions overlays you can do all this stuff in in vision and you know like what you you tell me if this is wrong but like you can create an easy balsamic interface and then just put it into envision and just say hey here's how it sort of interacts with the app these ugly black and white screens that look like markers here's how it's going to really interact with each other and so it's a great way one of the things i want to highlight too heim before you move on to the next thing but is really thinking through and i think i got a visual here how does how normal design professional designers i'm not a professional designer but they like to think about an empty state a full state

13:50

and a normal state i think too many times developers and or business guys they think about this like what's the best case scenario right and they don't think about like let's say for a to-do task they think about like oh look at what it looks like when you have so many to-do's and they design for that and they forget about what it looks like when you first enter in the app and it's empty how does that look like how can i make sure that they the users understand how to add a task how to finish a task how to buy a subscription if i eventually want to make money so you got to think through these things and think about the empty state which is what most people kind of forget about yeah again this is the the realm of uiux engineers they are thinking all the way all the time on the different use cases okay and the different different status the the initial status then what happens when a customer starts to use the app

14:44

okay and then another thing that we will have once the app is developed just for you to know is a lot of analytics inside the app to understand how the user uses the app okay so then we can improve this over time with future a updates and upgrades uh to improve the the the real usage from because we are getting a stream of real world data from the the real users okay we are not just thinking theoretically about how the user will behave okay we have real hard feedback from them okay so the idea is also but i don't think that those status are for a beginner on this i will recommend to start playing on ambition with balsamic mock-ups with the sampling we have a lot of tools for this or googling for wi-framing or app wireframing tools okay even or you know for the old school guys we have visio for for microsoft that allows you to to mock up or wireframe a all kind of systems and screens okay just play with that get used to

16:02

that and then slowly you will improve your skills as a great creating prototypes or wireframe okay prototypes is more like an interactive thing but in the beginning do your best with explaining graphically yeah hey so the last thing i want to end with is in the specification docs as you put a working prototype it's going to be way more valuable to you to see it as a working prototype because then you can really think through okay i got to build this i got to build that but from a sdk perspective what are some like crucial sdks that we need to have in that mv mvp okay the the mvp i mean this is more related to the specs the technical uh document okay the technical specifications you need to explain them the the the technical stack that you need to add okay then if you will go for social sharing for any kind of interaction with social networks analytics okay if the app does something specific with some special

17:06

feature that you need to get an specific sdk you need to tell okay we will work with this technology and that technology for this if you are not a technical guy you need the specific help from someone technical that will will create the idea of the technical requirements behind all your ideas for example in a chat application again we classically we will do all the chat integration with firebase okay we google firebase this is one of the most used platforms uh today for doing this also we can use it for analytics because because they have a lot of features but chat notifications and such we will do it with with the integration with firebase okay so if you already know that put it on the document i want firebase for doing the the interactivity these chats these these pull notifications okay you can even interact between apps forget about chat or forget about something with tips you can provoke the the other side chat

18:15

okay to do certain stuff with a firebase because you can send push notifications okay it's this is more complex to explain right now netnet have firebase in there have it as part of your spec doc because you can do so much with it i know one of the things just a quick little example that you and i we had a shared client that we did was you guys set up firebase to show a pop-up and then within firebase i can just log in as a marketer and say hey set this to true and show this pop-up so that we can run different promos or you can show different messages so firebase is very powerful and i just want the the viewer and the listener to know that hey here's firebase definitely a must-have in any spec dock as you launch your mvp because it's got a free plan and you can always upgrade to the pay plan when you need it as well all right anything that we missed you want to make sure we cover no for this stage i think that it's okay

19:07

about the documentation again if you still don't get a lot of confidence on yourself on showing the the specs i always tell my my potential customers do your best try to to put as much as possible in a document and then we will fill the gaps okay but i mean the most that you can put from your own perspective the better because that will help us to better understand your idea okay and a small and last thing again a good documentation is very crucial when you want to go for funding okay a good documentation is vital for funding even more maybe you need to do something that is called proof of concept okay there is a stage smaller than the mvp i like it all right in part three of our video series we're going to talk about now you have a mock-up now you have something solid that you really thought through how do you hire the right developer should you go freelance should you go to heim and his development firm

20:11

what do you can you do and i know i get this question a lot so that they don't steal your idea trust me they won't steal your idea but we're going to show you all the process all the questions that we've been getting from people about how do you hire the right developers and make sure they do a good job and they don't mess up your code because that's what most developers will do if you don't see the ins and outs of it as well all right so stay tuned and for that in part three and if you want to learn more about what hymen's team are up to and work with them go check out be the number7dev.comb7dev.com it is linked up into the youtube description or wherever in the podcast after you're listening to this heim if the audience wants to connect with you in any other way you want to send them anywhere else yeah my email is heim c h a i am at b7dev.b7dev.com that is my website my website also has a

21:02

contact form you can look after me my name like i think that will be on the episode on on facebook or even linkedin and then contact me guys i do trust hyman his team and i've been working with him since 2013 so it's like eight plus years the day that this is launching as well so go check them out b7dev.com and stay tuned for part three of this youtube series