This is the keynote presentation from the HTML5 Meetup in Toronto, CA that took place on February 27, 2014. Planning your projects at the very beginning can be a fun yet daunting task. Showing clients early concepts, prototypes, wireframes and ideas at early stages can help you land the contract, or perhaps see concerns or new features for your own project that wasn’t apparent before. Michael McArthur and Paul Crimi, both of whom are Product Designers at BNOTIONS, are going to walk us through their processes of how they begin a project, what resources they use, and what goes on in their minds as they get everything off the ground.

1. Back to Basics:
Wireframing & Planning
Michael McArthur
@gorfed
Paul Crimi
@paulohnine

2. planning
So, you want to
create your own
digital product…

3. planning
Here are a few
things you should
know:

4. what is IA?
Information
Architecture is:

5. what is IA?
Grouping of content so that
it can be presented in a
logical order.

6. what is IA?
Creation of clear and
consistent navigation that
allows the user to easily find
the content they are
looking for.

7. what is IA?
Clear and visible content
hierarchy on each page
or screen.

8. why is content hierarchy important?
#1 UX rule:
!
Don’t make me think

9. when approaching IA:
Always ask yourself:
!
· What must users know first?
· Which actions do I want them to take?
· How can I persuade them to take those actions?
· How can I make the user feel good about the
action they just took?

10. action funnel
welcome
supporting info
user takes
action
what am I looking at?
what do you want me
to do & how do I do it?
what happened?

11. IA design
Define the end-game for
your site/app.
!
Define the end-game for
each screen.

12. remember:
The best interfaces are
invisible. They get out of the
way so that the user feels like
they achieve their goals
without interruption.

13. App Maps.

14. what is an app map?
A high-level (bird’s eye)
overview of all the screens or
pages that exist within an
application.

15. what is an app map?
0.2
0.0
0.1
Register
Entry
Login
Forgot
Password
1.0
5.0
Stream
Legend:
0.1.1
Other User
Profile
X.X
Page
2.0
3.0
4.0
5.0
Explore
Take Photo /
Video
News
My Profile
2.1
3.1
5.0
5.1
Explore
Results
Filter
Selection
Other User
Profile
Profile
Options
5.0
3.1.1
Other User
Profile
Confirmation
X.X
Duplicated Page
X.X
Conditional Page
X.X
Not A Physical Page

16. planning
Well then, how do we
go about planning a
product?

17. planning
UX Methodologies
!
· Deep dives
· User empathy
· Creating the appropriate hooks
· Iteration

18. Nir Eyal’s hook model
H
K

19. planning: iterative approach
fig 3. the ux design cycle
idea
learn
build
data
product
measure

20. planning
Step 1:
!
Outline the key features and/or
requirements

21. planning
Step 2:
!
Research the competitive landscape
!
· Outline key features/requirements
· Define differences in feature sets
· Establish each product’s brand essence

22. planning
Step 3:
!
Create a feature set comparison
!
· Identify common and rare features
· Outline what works and what doesn’t
· Highlight the good, bad & ugly.

23. planning
Step 4:
!
Perform a heuristics on any competitor
products in market
!
· Outline assumption, observations,
implications and recommendations
· Be harsh :)

24. planning
Step 5:
!
Draw a high-level (rudimentary)
Application Map
!
· Boxes & arrows are your new best friends

25. planning
Step 6:
!
Map features to the pages you outlined in
the Application Map.
!
· Put functionality in the boxes (figure out
what goes where).

26. planning
Step 7:
!
Make sketchy love to your whiteboard
!
· Once satisfied that all requirements and
functions have been accounted for, take
those words in your boxes and start
iterating on your interface.
!

27. planning
Step 8:
!
Capture your work
!
· Take pictures before you erase anything
from the whiteboard
· Erase everything
· Make improvements
· Repeat until satisfied

28. planning
Step 9:
!
Massage your wires
!
· Open your wireframing app of choice and
vectorize your whiteboards

29. Wireframes.

30. what is a wireframe?
A visual representation of an
interface that excludes visual
design.

31. what is a wireframe?
instagram
username
location lorem ipsum
13 m
username comment lorem ipsum dolor sit amet
consectetur.
userTwo reply lorem ipsum.
Like
Comment

32. why do we need wireframes?
To express how our website
or app will function.

33. who is it for?
The client.
!
To show them what we’re building

34. who is it for?
The dev team.
!
To define scope &
begin development

35. who is it for?
Our users.
!
For user testing

36. who is it for?
Yourself.
!
To test and iterate from

37. fidelity:
!
lo-fi vs hi-fi

38. tools:
Kick it old skool.
Good ol’ paper and pencil

39. tools:
Quick n’ dirtys
whiteboard

40. tools:
Step it up a notch
Balsamiq
Omnigraffle
!
(…and many more)

41. tools:
Hi-fi
Illustrator
Fireworks
Omnigraffle
!
(or your vector tool of choice)

42. ok, let’s solve your problems*
(workshop.)
*all problems not guaranteed solved.

43. resources
Wireframes, App Maps, Flow Charts &
Prototype Resources:
App Maps, Flow Charts & Wireframes:
!
Prototypes:
!
!
!
Omnigraffle
http://www.omnigroup.com/omnigraffle/
Omnigraffle Stencils
https://www.graffletopia.com/
!
Sketch
http://www.bohemiancoding.com/sketch/
!
Adobe Illustrator
http://www.adobe.com/ca/products/illustrator.html
!
Adobe Fireworks
http://www.adobe.com/ca/products/fireworks.html
!
Balsamiq
http://balsamiq.com/
!
InVision
http://www.invisionapp.com/
Axure
http://www.axure.com/
!
Origami
http://facebook.github.io/origami/
!
UXPin
http://uxpin.com/
!
Keynote
http://www.apple.com/ca/mac/keynote/
!
Using Keynote To Prototype
http://www.lukew.com/ff/entry.asp?1155

44. resources
Recommended Books
Don’t Make Me Think
Steve Krug
Lean UX
Jeff Gothelf
Envisioning Information
Edward R Tufte
The Essentials of Interaction Design
Alan Cooper
The Laws of Simplicity
John Maeda
Sketching User Experiences
Bill Buxton
Head First Design Patterns
Eric Freeman
Mobile First
Luke Wroblewski

45. resources
Recommended Links
Luke Wroblewski
http://www.lukew.com
Capptivate
http://capptivate.co/
Interaction Design Association
http://ixda.org/
The Hipper Element
http://thehipperelement.com/
Boxes and Arrows
http://boxesandarrows.com/
UX Archive
http://uxarchive.com/
UI Patterns
http://ui-patterns.com/
UX Porn
http://uxporn.uxpin.com/
Pttrns
http://pttrns.com/
UX Magazine
http://uxmag.com/
UI Parade
http://www.uiparade.com/
Mobile Patterns
http://www.mobile-patterns.com/
!
!
!
!
!
!
!
!
!
!
!

46. Thank You.
Michael McArthur
@gorfed
Paul Crimi
@paulohnine