A Journey Through Prototyping

Clément Génin UX Architect at ONE Agency

@ClemGn

From Aligning Boxes To Aligning Visions

UX Ghent www.uxghent.be | @UX_Ghent

Balsamiq Mockups

Omnigraffle

Omnigraffle

Wireframes as a document

Limitations:

Hard to explain interactions Not optimised for changes

Not always clear for clients Not adapted for responsive design

Other tools I tried

Paul Adams

Full talk (YouTube)

Paul Adams

Jeff Gothelf

“Getting Out Of The Deliverables Business”

“Introduction to Lean UX” (SlideShare)

My conclusion

“How can I avoid wasting time aligning boxes?”

I decided to minimise/skip wireframes in my process.

Doing that forced me to compensate:

Sketches

Listen Sketch Document

Graphical design Code

Oral communication

Examples

Existing examples

Listen Sketch Document

Graphical design Code

Oral communication

Examples

Textual description

Listen Sketch Document

Graphical design Code

Oral communication

Examples

Conversations

Listen Sketch Document

Graphical design Code

Oral communication

Examples

Epiphany

None of these aspects work on its own. The projects for which I had skipped/minimised wireframes

had poorer results.

It hit me: there nothing wrong with wireframes.

What matters is the intent:

Aligning visions

Sketch Document Gra. design

Diagrams

Examples

Wireframes PrototypeOral com.

YouPM

Client

Designer Dev

Partner

Stake holder

Content team You

PM

Client

Designer Dev

Partner

Stake holder

Content team

5 things I changed

Frame the problem first

Use real content

Annotate

Expose it

Keep it proto

Frame the problem

Hey Clément, can you quickly make a wireframe of this page?

Sure, all I need is to know: • who is the user • in what situation they are • what they want to achieve • what their current options are • how it fits in the business strategy • if there are any constraints

Use real content

Annotate

Expose it early/often

YOU TEAM

STAKE HOLDER USERS

Keep it proto

Activity Flow (work in progress)

Activity on screens

User context:

(Inter)Actions Thoughts

Environment Time

Business context:

Actors (Inter)Actions Environment

Time Content

Activity name User goalBusiness goal

Thank you! What do you think?

“Prototyping - A Practitioner’s Guide” by Todd Zaki Warfel