Back to articles Back to articles

How to Wireframe Your Killer App Idea

Tyler Tennant July 26, 2017

Why Wireframes?

Say you’ve got a killer idea. You’ve created the next big app that will redefine “ride-sharing” as we know it. You know who your target audience is, you know that people want your product, and you know that something like this has never been done before. So, with great confidence, you rush into the app-making process, not thinking too much about the UI/UX – after all, what matters is the product you’re selling.

And then? People download your app. They can’t figure out how to use it. There are too many buttons, CTAs, confusing navigation bars (yes, several menu bars) in unpredictable and random places. They can’t even read your content because of the immediate in-app messaging and push notifications you’ve flooded them with upon opening the app. The app looks pretty, sure, but nobody can figure out how the use the darn thing.

They delete the app and leave terrible reviews. People stop downloading your app, and your entire product sinks.

Obviously we don’t want that to happen, and neither do you. That’s why wire-framing is an extremely important part of the app-building process.

Wireframing allows you to start with the basics, determine the fewest functions you need and the most important bits of information that the client or end-user will need to see, and then design the information in a hierarchy that focuses on how the app will be used (how it looks will come secondary to what it needs to do).

Getting Started

One of the first steps we would recommend before anything is determining the most crucial components of your product and app before getting started with the wireframe and sketching. Need advice on crafting MVPs? Check out our other blog post here.

Once you’ve got that sorted out, it’s time to figure out a “mission statement” of sorts. Ask yourself a few questions:

1: What does or will my app do differently from the competitors?

2: What is the problem I am trying to solve?

3: What is my solution?

4: Who will be using my app?

Once you have that, develop something like the below:

(problem) for (users) = (solution) + (uniqueness)

Simple algebra. Write out something you can use as a guiding principle to lead you every step of the way in your building process: Too many users of ride-sharing apps complain that the drivers do not seem properly trained and are inappropriate. Our company, Green Light, extensively vets our drivers to ensure a luxury cruise in every car ride.

Got it? Great. Now think broadly:

1: What are the essential, necessary components of my app? An auto-save function? Social media linkage? Figure out what your app needs. Set a number if that helps.

2: How many pages do I want? One? Five?

3: How many images do I want, and where will they be?

4: What is your brand? What’s the best way to communicate that through the user experience and interface (not so much design at this point)?

5: Am I utilizing CTAs? Buttons? How many? Will you need to focus on mobile retention and adding push notifications?

Think generally about everything that will need to go into your app. Just focus on brainstorming, and don’t get overwhelmed. Think about all of the possible users of the app. Come up with three imaginary people and their stories and when/where they might use your app. Think about and consider things from their perspective: do they want immediate results? Do they want a cumulative and extensive amount of easily navigate-able information?

Putting it On Paper

What is your app’s primary task? Once you have your mission in mind, you can begin to sketch out your app. Pick the top three most crucial things you’ll need for app from the list above. Everything else can come after you’ve got something on paper.

Drawing by hand is a great way to represent all of your information in a simple, easy-to-follow model that isn’t made distracting by excessive typography, flashy colors, or pop-ups. Draw out page by page everything you’ll need.

Seek feedback and consistently redefine and rework your sketch. If this seems tedious, remember: it’s costing you a lot less time and significantly less money than it would to build this out digitally first.

It’s about information hierarchy, after all! Considering your app’s primary task, get that to the top and put it at the forefront of your app. What’s the secondary function? Put that underneath. Keep going until you’ve covered all the ground from the previous exercise.

Digital Copies

Now that you’ve got a solid sketch in mind, translate it to a digital design. There’s plenty of wireframing software out there to help you in this step (see the bottom of the article for additional resources).

Wireframing is about focusing on the end-user and figuring out how they’ll use the app. You want the app to be as seamless as possible. It needs to answer questions like what users can do, what they expect to do, how you’ll engage them in a non-intrusive, non-overwhelming manner, and how you’ll retain them. Keep them coming back with an excellent app design.

In fact, customer confidence can be built entirely on how your app looks. That’s why wireframing is such a crucial step. You can seek client or potential customer feedback before even stepping foot into the developmental stage. You can figure out what your CTAs will be, where to put them, and how to measure the metrics of successful app usage during the digital copy stage.

Just also remember that aesthetic quality is not a huge consideration at this point. Perhaps a little more so in the digital wireframing session, but still focus on user interface and making sure the information they need and the functions you’ll need to sell your product are at the front of your app. Making it look pretty will certainly help, but if you’ve got nothing that you can make pretty in the first place, then you’re in a bit of trouble.

EXTRA RESOURCES

We’ve compiled a list of additional resources you can check out to help in your wireframing process. See below:

«
»

Related Articles

prev next

Let's build together.

We'd love to hear about your product or idea.

Get in touch