CONCEPTS!!!

GAMESTORMING.COM

STOP 1

VALUE PROP

WHY

Quick way to place your persona in their environment with their problem and proposed solution side by side. The proposed solution should be conceptual and doesn't include UI work-flows.

 

 

STOP 2

STOP 3

4-UP

WHY

Quick way to  sketch out the scenarios your designing for and include the users environment without getting into the "weeds" about the details of the solutions. Think of this as a story boarding tool. Talk about the details if you can't fit them in.

 

 

 

 

 

THE PICTURE

FRAME

-

WHY

This technique is used to simplify sketching down

to ONE screen and NOT DRAW WORK FLOWS.

-

Think of different concepts and UI layouts that

you can draw within the picture frame.

Do this with groups of Designers, none designers
and clients.

-

Draw this on a white-board

Have people sketch on paper
1 per concept per sheet of paper

 

 

 

 

 

get the book too!!!!!

GOOD

HAVE JUST THE RIGHT AMOUNT FIDELITY

DOES NOT HAVE FAKE COPY (lorem ipsum)

USES REAL PHOTOS AND QUICK ICONS WHEN NEEDED

HIGHLIGHTS THE CONTENT

VALIDATES THE WORK-FLOW AND INTERACTION MODEL

HAS GOOD PLACEMENT FOR USER LOCATION (pagination)

USES GOOD DESIGN PATTERNS AND DEVICE PARADIGMS

GETS INTO THE DETAILS AND VALIDATED MICRO INTERACTIONS

NOT

LOOKS LIKE A FINAL PRODUCT

USES FAKE COPY

JUST USES GRAY SQUARES TO INDICATE PHOTOS

LOOKS SLOPPY AND NOT "STRUCTURED"

EVERYTHING IS A 1-OFF AND NO RE-USE OF MODEL MATERIAL

THE USER HAS NO IDEA OF "LOCATION"

INTERACTION DETAILS ARE NOT MAPPED WITH LOGIC (CHECK BOX)

DOES JUST HI-LEVEL AND DOESN'T ACCOUNT FOR DETAILS (ERROR)

GOOD

EXAMPLE

Has clear work-flow location, content and highlights content

GOOD

EXAMPLE

Does good at mixing the repetitive while giving photo context.

NOT

EXAMPLE

Don't know what the boxes are. The square bars are confusing..

NOT

EXAMPLE

Context is unclear and repetition isn't distinct enough

Getting into the details and micro interactions

Not showing enough details

Good use of alignment, grid and negative space

No a good use of negative space and symmetry

GOOD

GOOD

NOT

NOT

EXAMPLE

EXAMPLE

EXAMPLE

I WANT YOU TO DO 2-3 DIFFERENT CONCEPT IDEAS.

SKETCH THEM AND THEN CREATE WIRE-FRAMES
& PROTOTYPES TO TEST.

-

GO OUT AND TEST THESE WITH USERS, EACH

CONCEPT ARE NOT COMPLETE WORK FLOWS BUT MORE

3-4 SCREENS THAT CONVEY THE CONCEPT.

-

 

 

THE GOAL IS TO TEST THESE CONCEPTS/IDEAS

AND HAVE USER PICK WHICH CONCEPTS THEY LIKE
THE MOST AND WHY THEY LIKE THEM...

 

 

 

 

CREATE CONCEPTS

WIRE-FRAME

WHY

Wire-frames are not half-ass design, they’re well thought out designs that look unpolished. Users are more willing to give honest feedback to something that looks “unfinished" and it's important to not spend time polishing something if you're not certain. Avoid the " i spent a bunch of time making that look good and we ended up not needed it."

 

 

3-4 SCREENS THAT CONVEY THE CONCEPT.