Make Something

Wireframes (Paper)

in progress

What you have so far

- A name
- A short explanation of your app
- A list of the problems your users are trying to solve
- Your reason for doing this
- A list of users that we will target
- A persona (based on user needs) for our first set of users
- A user journey map for our first users
- A list of assumptions and ways to de-risk those assumptions
- A short description of your MRP
- Feature Sets (v1, v2, icebox)
- A list of your competitors
- A list of keywords and searches your customers might use
- A chart showing which problems your competitors solve and how well they solve them
- A list of table stakes jobs
- Your USP 
- A list of User Groups
- A list of User Stories  (v1, v2, icebox)
- A list and screenshots of inspiration sites, screens and features (with notes)
- A list of all the pages/screens for your app
- A list of all the functionality that is required on each screen with importance values

Objectives

  • Create paper wireframes
  • Focus on providing the most benefit
  • Make user paths obvious and discoverable

One recommendation

Super Book Recommendation: Don’t Make me Think, by Steve Krug. This book really hammers in the keys of user experience design. If you learn these ideas well, you can design a great app or website.

Tasks

1. Sketch your ideas on paper

2. Re-work your wireframes

Tasks (with instructions)

1. Sketch your ideas on paper

Print out phone or web templates — I use sketchize.com.

Pick your “main screen” — this is the central functionality of your app that users will ideally be using most often.

For each screen, refer to :

  • your list from the screen-by-screen requirements to determine what goes on that screen
  • ‘importance values’ to determine the size of that content
  • lookalikes and inspiration apps, for reference (I like to have these all in a single file so that I don’t need to search or use the computer for anything other than as a quick reference)
  • for an IOS app, you may also want a reference to the standard IOS

Use two colors, and sharpies (to limit the amount of depth/detail):

  • primary color for the all regular content and scaffolding
  • secondary color for any buttons or important content

You can use a third color, but usually that’s a sign that there’s too much going on (or maybe you’re a better designer than me!)

Try to limit the time you spend on each screen (90 seconds per screen), the idea is to get a rough outline. You don’t want these to be perfect, just to get your ideas on paper.

Include any areas where copy might go, and a quick example of what copy might go there.

2. Re-work your wireframes

At this point, you can see your app coming together visually.

First we want to scrutinize the entire process. Go through your user flows again, pretending you are a user. Is there another way you could have formulated your screens to make it more simple & obvious for the user?

How easy is it for a user to get the benefit they want from your app? How obvious is it? How many clicks does it take for a user to complete the most important tasks in your app?

Now we’re going to go through each screen individually - again, 60 or 90 seconds is a good target.

How important is the primary color content? Can it be removed to make the focus even more prominent?

How important is the secondary color content? Can it be made into the primary color to make the important content more prominent? Are you leading the user down the most valuable path to get the benefit they desire?

Is there anything missing from the screen?

Outputs

- Paper wireframes