Episode 21: Defining the Differences in Mind Mapping, Mocking Up, and Wireframing

Garret Pierson, Scott Brandley, and Lindsay Halling review some of the most critical steps to building software in this episode. It’s easy to think that mind mapping, mocking up and wireframing software is all the same. We take the time to talk about why each one is different and why each one is important in this episode.

Also, listen for the latest update on Software Funnels! We are just about ready for our beta launching phase and we are excited to have other people using this tool! If you are interested in being one of our beta testers, click here to opt-in.

Be sure to subscribe to our podcast and automatically receive updates on each episode release. Thanks for listening!

Click here to read the podcast transcript

Garrett P.: Hello everyone, and welcome back to episode 21 of the Software Secrets podcast. Garrett Pierson here.

Scott B.: Scott Brandley.

Lindsay H.: And Lindsay Halling.

Garrett P.: That was a very exciting-

Scott B.: I’m excited man, 21 man!

Garrett P.: 21 episodes.

Scott B.: I can’t believe we’ve done 21 of these things, it’s crazy.

Garrett P.: Yeah, that’s great. So quick update and then we are going to be talking about three things. There are three words we use a lot in the book, we use a lot in the training. To me, this is the secret. This is the number one thing that you guys need to learn how to do. And those three words are mind mapping, mocking up, and wire framing. So we’re gonna go in depth into those and why they’re so important. We’ve talked about them in the past, but we’re bringing it up again because they’re just essential to you creating your software faster than you ever thought possible. So quick update, Lindsay, on Software Funnels version one, minimum [inaudible 00:00:59] product, where are we at?

Lindsay H.: So we’re just wrapping up little things here and there for the live servers for Software Funnels, but we really are pretty much ready for our beta testing phase, with the exception of our help desk tool. It still may not make the big test launch, but it’s about 80% done so it could be in there.

Garrett P.: It could be in there. I mean, it will for sure be in there for the September big launch, but we’re trying to get it in there, the help desk tool, ready to go for the beta test launch, which will be awesome. So things are going well. Lindsay is just amazing. I mean, she just gets things done. She makes sure things are moving forward. The programmers are working hard. We did have one programmer that’s gonna leave us, of the, how many are there? Four or five?

Lindsay H.: Five?

Garrett P.: And he’s been with the agency, Pure Logic’s Agency over in Pakistan, for like nine years. He just needs a change. He’s actually, to me, in my opinion, was one of the best programmers out there. I think he just got burnt out with working on our stuff and working with that company for so long. He’s actually going to work for their government over there.

So anyway, the minute Amir over at Pure Logic told us that, I got right on him and said “Okay, we need a replacement right away. We need the best, we need the brightest.” So that person has already come on board and the programmer that’s leaving is getting him caught up. He’s getting all the stuff installed on his computer, all the stuff we don’t really understand. Because we get email updates every day, which soon will be report updates in the Software Funnels tool, the reporting tool, where they gave us daily updates of what they’re doing. He said he had to install Ubuntu or this thing on his computer, because they do all their programming locally on their computer and then they push it onto the server, but I didn’t understand any of that. And I love that about building software, I mean, we don’t understand half of, or more than half, of the stuff that these guys are talking about. You don’t have to know it all. So, anyway, things are moving forward. Did you have something?

Scott B.: Well, I was just going to say the nice thing about working with the company we worked with over there, is that they know the right procedures, they know the right foundational tools to make sure that they’re smooth transitions when we do lose a programmer or when we’re setting up a server and they build on common platforms so that other programmers can, we can add new programmers, we can swap out a programmer if one’s not working out, or if somebody moves away. And, it’s so nice, and it doesn’t skip a beat. Yeah.

Garrett P.: Perfect. So that’s where we’re at. We still do not have a date on the beta launch. We’re working trying to get in touch with Russell Brunson, on when that will be, and then we will let you know on the next couple podcasts of when exactly that date’s gonna be. We think it’s gonna be in the next couple weeks. We’re about where we wanted to be on that beta launch, so it’s coming soon. Just FYI.

Let’s get into today’s content of mind mapping, mocking up, and wire framing. These three things are, as we said, essential because, and we’ve talked about this before, but I want to bring it up again. Generally how people go about building software is they have an idea, they go to the programmer, right off the bat, and say, I want it to do this. The programmer has no idea what they’re talking about generally, and even if they do, they didn’t explain it really how they wanted it, and they didn’t do a good job of getting them the details, and the programmer starts building, and it looks like garbage, first of all. Because programmers don’t know how to design, generally. [crosstalk 00:05:04] Nine and a half times out of ten, yeah.

Scott B.: Pretty much every case.

Garrett P.: 99.9% of all programmers don’t know how to design, or at least don’t design well. So first of all, generally what happens is it looks like garbage. Then secondly, it doesn’t do what they wanted them to do because they didn’t explain the functionality well enough. So, that’s where mind mapping, mocking up, and wire framing, all come into play and this is the number one secret, is to design first, program last. Design first, program last. Lindsay, tell us, since you’re somewhat new to this, coming into this, why do you think that’s so important?

Lindsay H.: I guess what I would resort back to, and really the only thing I can rely on, is what I read in the Software Secrets book. I love the analogy that we give in their cuz it really paints a good picture. No pun intended. But what Garrett’s got to talk about in the book is that you could just hand a programmer a piece of paper, and tell them to draw a fictional character out of your mind, and it may look nothing like it. But if you hand them one of those number to number, coloring pages-

Scott B.: Paint by numbers?

Lindsay H.: Yeah. Paint by numbers. It’s gonna look a lot more like what you wanted it to. I think that’s just a really good illustration of what we’re trying to describe when we say mind mapping, mocking up, and wire framing.

Garrett P.: Perfect. The analogy, I like that. I probably forgot. Scott added that. That was really good. The example that I just gave of generally how people do it is they do that. They give them the piece of paper, say I want you to draw this thing, and the programmer says, okay. They get this blank piece of paper, they draw that thing, and they give it back to the person that told them to do it, and that person’s like, that’s not-

Scott B.: That doesn’t look anything like what I said.

Garrett P.: Yeah, that doesn’t look like what I wanted. Go do it again. So you’ve just wasted so much time. The programmer’s now frustrated. So basically that’s what you’re telling the programmer, if you don’t do what we’re gonna tell you in the minute. You’re telling them to read your mind. That’s not possible. With the mind mapping, mocking up, and wire framing, what we’re doing, and what we’re doing for the programmer is, we’re taking all that guesswork out. We’re taking all that pain and anguish away, and we’re giving them the draw by numbers. So basically, what kids do is they have the one and they draw a line to the two, and then they draw a line to the three. It’s super easy. Now it’s exactly what you want it to do. They just had to connect those lines, and that’s the programming side, where you aren’t the programmer so you don’t know what to do, but at least they have those numbers of where they need to go.

Let’s get into mind mapping. Mind mapping is, once you’ve got your idea, you need to mind map every single page that you can imagine would exist for the back end. Now this is where the control panel, the dashboard, or whatever it is, if you’re building an app. It’s when they first log in. Whether it’s an Iphone app, or whatever. It’s what are all the pages that are going to be needed for a customer or a client or a user to log into, to accomplish what they need to accomplish. You need to get in front of a whiteboard, and you can use our white boarding tool, and someday, we are hoping to add a mind mapping tool into the Software Funnels program. That might be a version two or version three thing.

Basically all you gotta do is just draw some circles, put the name of the page in it, and draw arrows to where if they click on a link in that specific page, what other pages are possibly needed. You just need to come up, and you’re gonna forget some, or not even that you’re forgetting, that you don’t even know that they need to exist. That happened with us, right Lindsay?

Lindsay H.: Yes.

Garrett P.: Just even with building Software Funnels, there was lots of pages that we totally spaced out, or didn’t even think of, and that’s okay. You gotta start somewhere.

Lindsay H.: There are times where even today I was building out of the instructions for one of our programmers on a page, and I thought, I’m probably missing something here, but I’m not quite sure what it is. More often than not, our programmers will kind of help connect those dots.

Scott B.: I think mind mapping can be a little boring, but it’s very important so it’s using your brain a lot. You’ve really got to sit down and you’re basically throwing up everything in your mind onto a white board, or a piece of paper, or whatever. You’re just trying to connect mental dots, because you’ve got ideas of what you want it to be, but you probably haven’t connected all the dots together yet. So you’ve just gotta basically just get everything in your mind out. However you do that. It doesn’t really matter, but eventually, it’s going to start to look like something.

Garrett P.: Like a map.

Scott B.: Something. Like a map

Garrett P.: We have, in Software Secrets training system, do we have a video of us doing that?

Lindsay H.: Yes.

Garrett P.: So in the Software Secrets training video, in one of the modules, the mind mapping, and wire framing module, where you can actually see us doing it for Software Funnels. When we’re building Software Funnels. It’s like us doing it. So that will help a lot. Basically, what you’re gonna start out with is the login page. Start there. That’s the easiest starting point. Login page; somebody logs in, where do they go? Okay. So they might go to a dashboard, or a control panel page. Now that they’re on that page, what are other pages that they go to, again, to accomplish what it is that, the problem that your software is solving.

It’s anything from the billing page to the user profile page, to the, I’m just going through some of the Software Funnels ones. The create teams, and create users page, and then on those pages, that’s where this mind map is coming. It’s almost creating this spider graph of all these different things. If I’m on this page, are there any other pages that I need, or any other pop ups, or anything that I need on this page to accomplish what needs to accomplish on that page. You’re just throwing this all up.

Now that you’ve got your mind map, it’s now when you start mocking up. You do this page by page. Let’s start with the login page. Now when you’re mocking up, basically all you’re doing is you’re going to a white board, or a piece of paper, or whatever. What we always do is we just draw a rectangle. A vertical rectangle, just like a page. That’s the first thing we do. Again, this also is in some of the videos in the Software Secrets training system, of us actually doing it for building Software Funnels. We basically do this for every page. We grab the page, we draw just a page, we say Logo up here, and Menu bar up here, and then we go, okay, what is everything on this page, what is the functionality? What are all the fields? What are all the uploaded image, or date picker, or what are the things that happen on this page? A login page is basically pretty easy. We draw a rectangle. We put user name, and password, and then a forgot password, a link under that, maybe down at the very footer, a copyright, terms of service, privacy policy.

Scott B.: You don’t even need to add that until you get to the wire framing.

Garrett P.: You don’t really until you get to the wire frame, yeah, but you can. You’re just mocking up. Ugly, it’s ugly as possible.

Scott B.: It’s super ugly.

Garrett P.: It just needs to be fast. Lindsay, you had a hard time with this, didn’t you?

Lindsay H.: Yeah.

Garrett P.: More on the wire framing. There are times when Lindsay would draw something up, or wire frame something, I’m like, “It needs to be more ugly. You’re taking too much time.” Because it needs to be quick and fast. Just what are the basics. What are the things that need to be on there, on that page? Again, with this one too, you’re going to forget something. That’s okay, but do your best to get everything on there that you think needs to be on that page.

Once you’re done mocking up that page, now you take that specific page and you wire frame out that page. We have a wire framing tool that is amazing in Software Funnels that you can use. Basically it’s got a lot of the pieces and the shapes and the items that you need to mock up a page. The wire framing does look a little bit more pretty than the mock up. The mock ups just you scribbling, and writing, and drawing quickly on a white board. The wire framing; you are making a little bit prettier, a little bit straighter lines, and generally what happens in my case, and I think Lindsay, you’ll agree with this is; I’ll notice something missed on the mock up, and then it gets added on the wire framing. It’s almost like you’re doubling your efforts, and not forgetting something. You still will forget something possibly.

Let’s take the login page from mind map to wire framing. We started with the login page. We put on the mind map, and added all the pages after they login. We know that we need a login page. We mock up that login page where we just draw it on a board that is a rectangle, just like a webpage, and then we draw the login area with user name, password, forgot password. Now we take that and we wire frame it, where we get that rectangle webpage on the wire frame and making the mock up look a little bit better, but still, as fast as you can, it doesn’t have to look pretty, cuz you’re not the designer. Once you’ve wire framed, that’s when we give it to the designer. We are giving the wire frames to the designer. We still have not even touched the programmer yet. Programmer’s still has not even seen this. Maybe they’ve seen it, but generally they haven’t, but they’re not gonna do anything yet until the designer designs from the wire frame. You make a couple of tweaks, then it goes to HTML and CSS, where we’ve already had these.

There’s other podcasts and other training episodes in Software Secrets where we talk about those next steps. Then, and only then, when all the HTML and CSS is all nice and perfect, then do you give to the programmer, and tell them what the functionality is. That is mind mapping, mocking up, and wire framing. Let’s go into a little bit more details of, not necessarily why this is important, cuz I think people now know why it’s so important, but are there any thing that we missed, Lindsay and Scott, of those three things?

Scott B.: One thing you can do is when you first make your wire frame, you can make a template, right? Because your backend control panel’s probably gonna look similar on all the different pages. So you can create a generic template of your wire frame, and then just fill in the body. The different fields.

Garrett P.: So tell them the functionality-

Scott B.: That’ll speed up things quite a bit.

Garrett P.: Functionality in wire framing is where they can just copy.

Lindsay H.: Yeah. You can just save that template as your background so that it never gets changed, and like Scott said, just throw things on top of it, and kind of fill in the body of it. One thing I think that I’ve learned as I’ve wire framed so much throughout building Software Funnels is that sometimes, it’s almost a double edged sword; you want to keep your wire frame really simple, and clean, but yet informative. On the other hand; you want to still give the designers that liberty and creativity leeway so that they come up with something that’s not just exactly what you gave them.

Garrett Pierson.: Right. That’s a good point to bring up is; you need to make sure that your designer knows to not design it exactly how you just wire framed it out. That’s pointless, right? You need to let them know to be creative, to create that user interface just beautiful, and give them other ideas. Funnel hack, as Russel’s talked. Login to some other control panels or back ends that’s not related to yours necessarily, and show them, like I really love this design. This looks good. Please make it your own, and to our brand, but I really like this. Give them two or three ideas, and that doesn’t have to be control, but that can be a front end page, that can be any type of pop up, anything. That’s something that we do a lot of. Here’s the wire frame, and what needs to be on that page, but here’s the design that we really like, a user interface design that we really like.

I really like that; creating the template, wire framing. Software Funnel’s tool does that, where you can just create duplicates and create a template and just create a duplicate or put it onto the background. We’ll have videos and walkthrough videos of how to use the wire framing tool. That’s basically what we wanted to talk about today; the importance of those three things, and the order in which you do them. Why they’re important. How to do them. The biggest benefit you’re going to get is by becoming a member of Software Secrets, and getting access to the training modules where somebody’s actually filming us or we’re filming ourselves, doing it on a white board for Software Funnels. You can walk through with us as we build Software Funnels, and doing a mind mapping, doing a mocking up, and doing the wire frame.

Scott B.: And seeing what it looks like when we get it back from the designer.

Garret P.: Yep. Don’t you even have some where you’ve done that? From mocking up, all the way to getting the design done? So seeing the mock up, seeing the wire frame, seeing the-

Lindsay H.: Yeah, we’ve created videos where we show, not really a time lapse, but the transition between each of those steps, and what that looks like.

Garrett P.: That’ll all be in the training system of Software Secrets.

Scott B.: All of this is foundational to your software. If you don’t get this right, you don’t have a solid foundation to build your software on. You’ve gotta think all of this through before it ever gets to the programmer because you’ve gotta understand how your software’s gonna function, and how everything relates to each other. If you don’t ever think this through, then you’re gonna be putting the puzzle together as you’re building it. That’s what most people do, like you were saying at the beginning, it’s like they have a puzzle and they’re just kind of putting pieces together as they go, rather than-

Garrett P.: Or getting the edges, all the edges around first.

Lindsay H.: Just to┬átake that analogy a little further; what it will cause is it’ll cause a lot of frustration for your programmers, so it’s like giving them the whole puzzle without a couple pieces, and then later coming back and saying, “Hey, I forgot to tell you this, this, and this.” It’ll cause a lot of frustration.

Garrett P.: That does happen sometimes.

Lindsay H.: It does a little bit.

Garrett P.: But you’ll mitigate a lot of that. The other thing, that I want to mention is this doesn’t end. It’s not just on the starting of building a software build. You will do this, we’re still, Software Proof’s been around for seven plus years. We still are doing mock ups to this day, like today, our team is doing a mock up for the full survey. They are mocking up and they’re wire framing out, and then the designer will design it. This isn’t just for building, this is ongoing, because you’re gonna be adding version two, you’re gonna be adding new features and tools. You might have forgot something so you need to mock it up, and wire frame it out so that the designer can design it out, and the programmer can add it in, cuz we forgot it. Software Funnels is almost, version one is pretty much done. When’s the last time you’ve done a mock up, and wire frame?

Lindsay H.: Today.

Garrett P.: Today, right? Perfect. That worked out really well. My example. This doesn’t end. Make sure that you do these things in order, and that you don’t skip them, because its not that you’re going to fail, but if you don’t do them, it will take you a lot longer, be a lot more pain. We’ve been there, and done that. So just do what we say. Anyway, make sure that you are on the early bird list. You can do that by going to SoftwareSecrets.Com when we do launch the beta. Anybody that’s on that list, anybody that listens to this podcast, and couple of small, Russell Brunson’s small groups, will have access to the beta launch, and then we’ll be launching the non-beta in September so make sure you get on that list at SoftwareSecrets.Com. Thanks for listening everybody.

Scott B.: Talk to you soon.

Lindsay H.: See ya.