You Need Wireframes for Your App

Wireframes are among the best and cheapest tools for refining and defining your app idea. They can often be a great place to start getting feedback from potential users or investors before spending a single dollar. Check out what Andrew and Cody have to say about creating wireframes for your application.

Full Transcript Below

Andrew:

Welcome back to another Bixly Tech Tuesday. On this Tech Tuesday, I have Cody Beardsley with me, one of our senior developers and I’m Andrew, the COO at Bixly. We’re going to be talking about wireframes and how they can be beneficial to building your application. So Cody, what are wireframes and why would somebody use them?

Cody:

Wireframes are usually used as a project plan. Effectively when you’re doing any sort of software project, the idea that if you just go straight into it and find out if ideas work along the process, it takes a lot of money to double back and redo something. Ultimately it’s a lot cheaper to change something in a project plan than it is to change the code itself. So a wireframe serves that purpose. It allows you to field out ideas visually and with your team to work out ideas before you’ve gone too far to double back. And it costs you money to do even that.

Cody:

Could you tell me about what the relationship is between a site map and a user flow and how are they different? How do they help the process of wireframing?

Andrew:

Sure. So the wireframe is actually going to be what each screen is going to look like in a very rough sketch format. When you start talking about site flow or site map, that actually is how do the screens relate to each other. So that’s more of an organizational structure of, you go to this screen and then you go to this screen and then you go to this screen. That gives you context of how the user progresses through your app, how they’re going to use it. Whereas the wireframes are more about just visualizing what the screen’s going to look like without taking the time to do a very high fidelity design or taking the time to code it. So wireframe’s like a very fast mock-up whereas the user flow is: how does the user progress through those screens.

Cody:

Could you tell me some of the areas and places that people could go, if they want to know more about wireframing and what tools might be available for them?

Andrew:

Sure. So if you want to create your own wireframes, there’s a couple of different routes you can go. Since we have a designer in house, we use some of the more advanced tools that allow you to build very elaborate wireframes, and so we’ll use tools like Figma or Sketch or Photoshop, but those require more design expertise. If you’re not a designer and you just want to do it on your own, then using a tool like Balsamiq is really good. It’s very simple as far as they have components that are already created for you that represent buttons and windows and things like that. And you just drag and drop them on the page and size them around.

Cody:

Yeah. That makes sense. Would you say that let’s say you’re not a very experienced UX expert and you’re just a client or someone who’s heading up a project as a stakeholder, and you want to just communicate a design, ultimately, whatever allows you to easily draw out those designs is a good tool, or is there specific things that they may need that are available only in these special UX tools or whatnot?

Andrew:

Yeah. So the reason that we would use a tool like Balsamiq, let’s say, if the client was going to do it themselves, is because it does have these pre-built components to it. If you just open up, say Microsoft Paint or something and you try to draw every single button yourself, it’s going to one, be very tedious, and two, it’s going to not be uniform from page to page. It’s just going to be much more difficult to make something that’s actually usable. Whereas if you use a design tool, okay, if this is for iOS, they’re going to have the iOS menu that you drop at the top, that’s going to have the buttons and the way the battery looks and the wifi symbol and all the things.

Andrew:

So by using those kind of tools, it just allows you to mock up things much more quickly and even make them look just more believable. It doesn’t look like you’ve sketched it out on a napkin, but at the same time, you’re not taking the time or cost to actually hire a professional designer to build it. So what tool you choose really just depends on your level of design expertise. Again, we’re designers, so we use the more advanced tools, but if you’re going to do it yourself, tools like Balsamiq are great.

Cody:

Yeah.

Andrew:

Cody, how does using wireframes help provide clarity for a project?

Cody:

I think an important part of the wireframe clarity idea is again, touching on the initial aspect of, you don’t have to double back while already in development. Me as a software engineer, I’ve encountered situations where we just went into stuff mainly because we typically use agile development, right? So with agile development, you’re iteratively developing. You’re not making a whole project roadmap. You’re just a loose idea of what you want to be. And if you don’t couple agile development with some decent wireframes or some sort of a UX outline of what you want, ultimately, we’re going to get into situations that I have personally experienced this a bunch, where you’ll develop something for a customer, and then at the end of whatever that development was, they’re going to look at it and be like, “That’s not what I asked for. That wasn’t what was in my mind.” Well, it’s like, how was I supposed to know that as the software engineer? How was even the project manager supposed to know that?

Cody:

And that’s what wireframes do. They fill in that communication void to allow you to accurately communicate your business ideas and make sure that what you get in the end is exactly what you asked for.

Andrew:

And many clients too, they’re not designers, they’re not spatially minded and maybe they know what they want, but then once they see it, they realize that it’s not really what they wanted, or they look at it and say, “Oh, I thought there was going to be a button to select whether I wanted this in English or Spanish.” And they don’t really think about that until they look at it. Or they can potentially show it to one of their users and say, “This is what we’re going to build for you.” And that allows them to look at it and say, “Oh, well, what about this particular scenario?”

Cody:

Exactly.

Andrew:

And another thing too, is that it’s just very cheap to change wireframes, these sketches. We can very quickly drag another button on there and say, “Well, what about a cancel button?” Whereas if we have to code it or we’ve taken the time to code all this, going back and adding that functionality, even though it may seem trivial on the surface, can add a lot of ripple out complexity to it. And changing wireframe takes very little time at all.

Cody:

So from that, how does actually doing wireframes add clarity to even the client themselves?

Andrew:

Well, it gives the client an opportunity to see what the user interface is going to look like and how the user is going to progress through the screens, again, the user flow or how they’re going to move through it. And many times they don’t know what they want fully until they have a chance to really touch it and look at it and say, “Okay, I’m going to press this button. I’m going to press this button and this thing’s going to pop up.” The wireframes allow them to really not have to use quite as much imagination and really get clarity on what it even is they want.

Cody:

Yeah, that makes sense. I think another aspect of that is it also offers a layer of collaboration between you and other stakeholders. That can be a project manager, other business partners. It gives you all a collaborative medium, perhaps, even to figure out these ideas and realize, “Oh, that doesn’t really work in our long-term strategy. Is that going to actually provide a return on investment? Because of how this looks, does the user even want to engage in this area that’s core to my idea?” And I think that in terms of doing wireframes, that helps field out all that information and planning, early on and cheaply, without having to double back and having people get upset in the process probably.

Andrew:

And that collaboration is important because the client may convey to us, “We want you to build this. This is why we want it.” And that’s great, but it’d be difficult for the client to then turn around and explain that to 20 other people and help those 20 people understand what the experience is going to be. Maybe those 20 people are investors or users that they’re trying to gather feedback from, but if they have a wireframe, they can turn around and send it to all those people and say, “This is the experience you’re going to have. These are the problems it’s going to solve.” And it does allow them to collaborate more and gather feedback, to gather very early feedback.

Andrew:

Thank you for joining us on another Bixly Tech Tuesday, where we covered how wireframes can help make your project a big success and help you collaborate too, in the early phases of a startup project.

Andrew:

Cody, so if someone would like to get more information on how to work with Bixly, what would be the best way for them to do that?

Cody:

That would be to go to our website, bixly.com. On there we have contact forms for all of us, for any of your information you may need, be that services, or perhaps if you just want to know wireframing. In addition to that, if you stick around to the website long enough, there’s a pop-up that will show up that allows you to download a free PDF with all the knowledge we’ve shared on wireframing condensed in a nice digestible form.