E-I-T

WIRE-FRAMING &PRODUCT ROADMAP

INTRO TO WIREFRAMING

ABOUT ME

I am the Chief Operating Officer of 2020shift.

I am a Lean Startup expert training over 1000+ entrepreneurs and

business professionals around the world.

I love helping people create life- styles that are fulfilling and freeing while

building success and confidence.

linkedin.com/DominiqueAubrytwitter.com/aubrybellafacebook.com/This30slife

(Definition): An image or set of images which displays the functional elements of a website or page

A VISUAL REPRESENTATION OF THE PROCESS A USER

GOES THROUGH TO INTERACT/USE/BUY YOUR

PRODUCT OR SERVICE

WHAT IS WIREFRAMING

EXAMPLE 1

EXAMPLE 2

EXAMPLE 4

HOW TO WIRE FRAME

Information Design

Navigation Design

Interface Design

3 PARTS OF WIRE FRAMING

WIREFRAMING TIPS

1

Be Clear About Your Objective

2

Make it Functional, Not Pretty

3

Draw on Your Experience

4

Avoid Designing Your Wireframe Too Much

5

Think About the User

BUILDING YOUR WIREFRAME

Select a Wireframe Owner, Timer & Product Map Owner ( 1 minute) You are going to draw out your own wire frame ( 15

minutes) Your wireframe will include 3-5 steps or phases

You are going to get out of the building ( 20 minutes) Compile your notes and edits (5 minutes)

CREATE A WIREFRAME