Finding the Center
A Ruthless Approach to Conceptual Design

Andrew Heaton
Hi, I’m Andrew
I’m the Chief Chemist of Experience at Brilliant Chemistry
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
Some Quick Rules about UX
Rule Number One:
There's no fucking rules, dude.




                                  Photo by unknown, but it’s not by me.
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
How do you describe your work?
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.
                                                                                ”
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.
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.
                                                                 ”
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.
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.
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?”
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.
Here’s the Zen
but not really...
Zen is a Buddhist concept.  
This is more accurately
“Here’s the Way”
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.
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.
Finding the Center, Part 2:
  The Functional Center
How do you visualize your work?
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.
A few things to get started.
           Name Everything.
 Separate your Nouns from your Verbs.
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
Necessary Side Note:
There are no Pronouns

      N      V
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.
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
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.
Name your Views
They don’t really exist until you do.
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
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
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
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
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. 
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.
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
Always be Ruthless.
What the heck have you been talking about?
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
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.
Thanks.
@tigerstripe

Finding the Center

  • 1.
    Finding the Center ARuthless Approach to Conceptual Design Andrew Heaton
  • 2.
    Hi, I’m Andrew I’mthe Chief Chemist of Experience at Brilliant Chemistry
  • 3.
    A quick noteabout 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.
  • 5.
    Rule Number One: There'sno fucking rules, dude. Photo by unknown, but it’s not by me.
  • 6.
    Rule Number Two:   Draweverything 3 times before you go near a computer.   Describe it out loud at least twice. Photo by Glen E. Friedman
  • 7.
    How do youdescribe your work?
  • 8.
    How do youdescribe 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 youdescribe 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 andtry 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 andtry 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 humaninto 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 becomesa 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  Whenyou 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 butnot 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 youvisualize your work?
  • 20.
    How do youvisualize 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 thingsto 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: Thereare no Pronouns N V
  • 24.
    Your verbs willtend 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 becomebig 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 Theydon’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 thesame 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.
  • 36.
    What the heckhave 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.
  • 40.