My presentation from the M3 Conference, November 2011 in Columbus, Ohio.

1. Finding the Center
A Ruthless Approach to Conceptual Design
Andrew Heaton

2. Hi, I’m Andrew
I’m the Chief Chemist of Experience at Brilliant Chemistry

3. A quick note about my rocking moustache.
During November each year, Movember is responsible for the sprouting of moustaches on thousands of
men’s faces, in the US and around the world. With their Mo’s, these men raise vital funds and awareness
for men’s health, specifically prostate cancer and other cancers that a!ect men.
If you’d care to donate, please visit http://mobro.co/tigerstripe

4. Some Quick Rules about UX

5. Rule Number One:
There's no fucking rules, dude.
Photo by unknown, but it’s not by me.

6. Rule Number Two:
Draw everything 3 times before
you go near a computer.
Describe it out loud at least twice.
Photo by Glen E. Friedman

7. How do you describe your work?

8. How do you describe your work?
“ It's like Twitter, but it's curated, so it's invite only, with circles of
people like Google+, but restricted to an event, so it's all local,
and it's all about what's happening right now.
”

9. How do you describe your work?
“ It's like Twitter, but it's curated, so it's invite only, with circles of
people like Google+, but restricted to an event, so it's all local,
and it's all about what's happening right now.
”
Your work is not an it.

10. Flip it and try again.
“ An idea sharing app centered around an event (time, place,
topic) that allows authorized users to share text, images,
files and links within a controlled space.
”

11. Flip it and try again.
“ An idea sharing app centered around an event (time, place,
topic) that allows authorized users to share text, images,
files and links within a controlled space.
”
Now put some human in it.

12. Put some human into it.
“ At an event like this one, people like to make comments,
take notes and share these with their friends.
We recognize this behavior and want to give conference
”
attendees a place to share these comments amongst the
group, create an archive of the event, and share socially.

13. Your idea becomes a pilgrim.
We typically ask what the app does, when we should ask
"Why do they pull that phone from their pocket?”

14. The Conceptual Center
When you describe your work, you are mentally narrowing down or
expanding on features. Things your work will do.
This set of features is something that gets refined the more you draw it.
The more you tell the story.
At some point, the things you want your work to do will find their place:
a common theme of Behavioral Expectation.

15. Here’s the Zen
but not really...
Zen is a Buddhist concept.
This is more accurately
“Here’s the Way”

16. An ambitious piece,
based on chapter 11 of the Tao Te Ching.
We join spokes We shape clay into We hammer wood We work with being,
together in a wheel, a pot, but it is the for a house, but it is but non-being is what
but it is the center emptiness inside the inner space that we use.
hole that makes the that holds whatever makes it livable.
wagon move. we want.

17. An ambitious piece,
based on chapter 11 of the Tao Te Ching.
We join spokes We shape clay into We hammer wood We work with being,
together in a wheel, a pot, but it is the for a house, but it is but non-being is what
but it is the center emptiness inside the inner space that we use.
hole that makes the that holds whatever makes it livable.
wagon move. we want.
If you don’t have a The idea is a We build, but only so We create reality
center, the rest falls container for others may find from the intangible
apart. the use. success within. ideas we have.

18. Finding the Center, Part 2:
The Functional Center

19. How do you visualize your work?

20. How do you visualize your work?
An inherent problem with taking sketches to a
wireframe is that too much of the functionality
is inferred, and has yet to be figured out.
In other words:
Mostly accurate, but not quite right.

21. A few things to get started.
Name Everything.
Separate your Nouns from your Verbs.

22. Nouns and Verbs
N V
Session Create
Summary Edit
Post Respond
Photo Save
Gallery Fave
Link Rate
Place View
Mine Tweet
Yours Sort
Ours
File

23. Necessary Side Note:
There are no Pronouns
N V

24. Your verbs will tend to fall into three categories
Core
A primary feature. This is what your app is
designed for, and what the user does.
Adaptive
A feature that changes the way someone
uses the features or displays information.
Useless
More than you think. Get an axe.

25. Nouns and Verbs
N V
Session Create
Summary Edit
Post Respond
Photo Save
Gallery Fave
Link Rate
Place View
Mine Tweet
Yours Sort
Ours
File

26. Little nouns become big nouns
A view is a collection of nouns.
Sometimes it makes sense to call them out immediately,
sometimes it will be easier to cluster them later.
Regardless, it’s usually good to think of your screens as
a collection of nouns.

27. Name your Views
They don’t really exist until you do.

28. Carrier 11:58 PM
Verbs build nouns which create verbs w
User Experience / Design
Business / Strategy
N V
Conference SELECT
Intro
Windows
iOS Phone Android

29. Carrier 11:58 PM
Verbs build nouns which create verbs which change nouns wh
Main UX / Design
Keynote: Mobile Innovation with UX
Sara Summers, Microsoft
Thinking Beyond Apple
Brad Colbow, Colbow Design
How To Kill Your App
Martin Bowling, Digital Relativity
N V N V
Conference SELECT Sessions SELECT
Finding the Center Intro
Andrew Heaton, Brilliant Chemistry
Adaptive Mobile UX Design
Jen Matson, Ascentium
Stop Photoshop Dickery
Mike Wille, Brilliant Chemistry

30. Carrier 11:58 PM
uns which create verbs which change nouns which spawn verbs.
UX / Design
Sessions
Finding the Center
UserName
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer ligula ante, mattis tempus semper id, porttitor vel
tortor. Pellentesque dui nibh, dignissim vel dignissim n
Posted 20 Seconds Ago 16 3
UserName
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
V
Integer ligula ante, mattis tempus semper id, porttitor vel
tortor. Pellentesque dui nibh, dignissim vel dignissim n
ADD
V N V N
SELECT Seconds Ago
Posted 20
Sessions 16 3 SELECT Summary
UserName
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer ligula ante, mattis tempus semper id, porttitor vel
tortor. Pellentesque dui nibh, dignissim vel dignissim n
V
Posted 20 Seconds Ago 16 3 VIEW
UserName
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer ligula ante, mattis tempus semper id, porttitor vel
tortor. Pellentesque dui nibh, dignissim vel dignissim n
Posted 20 Seconds Ago 16 3

31. Carrier 11:58 PM
Posts UX/ Design Much better than boxes and arrows.
Finding the Center
V
TheGuiGirl Says: ADD
V
N Lorem ipsum dolor sit amet, consectetur
V
adipiscing elit. Integer ligula ante, mattis
tempus semper id full of crap. Pellentesque
N RESPOND
ions SELECT
dui nibh, dignissim vel dignissim. Summary
Reply V N V
VIEW DETAIL VOTE
Bump It Up Drop It Down VIEW
Tweet This Post Tweet
V
TWEET
We add the following:
- Short URL linking to post - Location set as COSI
- Contents (truncated if over 120) - #M3confv

32. Everyone does the same things
What is di"erent is more important than
how similar you are.
If you are operating the same as everyone else,
you are likely to find yourself in the middle.
You are not a beautiful and unique snowflake,
and neither is your app.
You better have something someone else doesn't.

33. V
Back to the Verbs
Implicit vs. Explicit
There are implicit verbs and explicit verbs.
Verbs the app does, and verbs the user does.
There are inherent system verbs that could be
taking place to make this more interesting.

34. Carrier 11:58 PM
Menu Snapshot View
Finding The Center
UX
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
V DETERMINE N Current Time
Integer ligula ante.
Posted 20 Seconds Ago 16 3
Lorem ipsum dolor sit amet!
V MATCH N Running Sessions
Posted 20 Seconds Ago 16 3
View This Session
V DISPLAY N Matching List
N V N V N
Current SELECT Session EXPOSE Recent
Display Posts

35. Always be Ruthless.

36. What the heck have you been talking about?

37. Conceptual Center
Describe the idea
Describe the features
Describe the user
Describe their behavior
Describe the scenario of use
Tell the story until you find that Behavioral Expectation

38. Functional Center
ONE
Nouns and Verbs, Dude.
TWO
Always be willing to flip what you’re doing.
THREE
Rip your own stu! apart. Be ruthless.

39. Thanks.

40. @tigerstripe