Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Finding the Center (2013 Remix)

437 views

Published on

Presented at Stir Trek in May 2013

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

Finding the Center (2013 Remix)

  1. 1. Finding the Center (2013 Remix)A Ruthless Approach to Conceptual DesignAndrew Heaton | Revinity
  2. 2. Tweet and Take Photos@tigerstripe | #StirTrek
  3. 3. Hi, I’m AndrewI’m a Designer.
  4. 4. I Also Write(Usually far slower than I want).Big Design, Small ScreenConceptual Design for Mobile DevicesAndrew HeatonPurposely IrregularZen, Punk Rock and Ruthlessness in Experience DesignAndrew Heaton
  5. 5. Some Quick Rules about UX
  6. 6. Rule Number One:Theres no fucking rules, dude.Photo by unknown, but it’s not by me.
  7. 7. Rule Number Two:  Draw everything 3 times beforeyou go near a computer.  Describe it out loudat least twice.Photo by Glen E. Friedman
  8. 8. The One Law of Mobile Design:You Must Design Something Remarkable.Eno, Fripp, Bowie. Source Unknown.
  9. 9. We Live in a Miraculous Age.When you design a shitty app you embarrass us allbecause you are denying the wonder of our times.
  10. 10. The phone in my pocket is more powerful thanthe computers I used to design websites 15 yearsago, and ridiculously more powerful than the onesI used to publish magazines two decades ago.
  11. 11. This makes it easy to assume we’re usingthem for stupid things. We aren’t.
  12. 12. Our phones are extremely personal devices.
  13. 13. Don’t discount life.Our devices answer a direct need, and someneeds seem trivial compared to others.
  14. 14. This is Zephyr.He’s had his owniPad since he was 2.He’s 5 now, what doyou think hebelieves is normal?
  15. 15. What are we talking about today?
  16. 16. Big Design Small ScreenConceptual Mobile Design Framework:Situational OpportunityFinding the CenterDrawing it Out
  17. 17. Why bother with so much prep?
  18. 18. Why bother with so much prep?You will not lose your shit later.
  19. 19. Situational OpportunityAnswer the Right Questions First
  20. 20. Situational Opportunity is the act of findingthe moment in time when a user will reachfor a mobile device as the answer to a need.
  21. 21. Its a fabulous type of personadevelopment, rather than understandingthe user, you understand the entiresituation in which use occurs.It’s not the who, it’s the when and the why.
  22. 22. When we talk about hardware, we immediately fallinto limitations, oddities and impossibilities.These are minor details.
  23. 23. Forget about the phone.Design for use, not the device.
  24. 24. If the need doesn’t exist without the device,it probably doesn’t exist with the device.
  25. 25. How do you describe your work?
  26. 26. “Its like Twitter, but its curated, so its invite only,with circles of people like Google+, but restrictedto an location, so its all local, and its all aboutwhats happening right now.”How do you describe your work?
  27. 27. Its like Twitter, but its curated, so its invite only,with circles of people like Google+, but restrictedto an location, so its all local, and its all aboutwhats happening right now.Your work is not an it.How do you describe your work?“ ”
  28. 28. Flip it and try again.A story sharing app centered around amoment in time and a location thatallows users to share text, images, filesand links within a controlled space.“ ”
  29. 29. Flip it and try again.Now put some human in it.“ ”A story sharing app centered around amoment in time and a location thatallows users to share text, images, filesand links within a controlled space.
  30. 30. Put some human into it.Storytelling has been a human characteristicsince the dawn of man.We recognize this behavior and want to usemodern devices to give stories context withtime and place, and let users share anddiscover these stories as they move about.“ ”
  31. 31. 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?”
  32. 32.  When you describe your work, you are mentally narrowingdown or expanding on features.  Things your work will do.   This set of features is something that gets refined the moreyou draw it.  The more you tell the story. At some point, the things you want your work to do will findtheir place: a  common theme of Situational Opportunity.Match Use with Need
  33. 33. “In modern recording one of thebiggest problems is that you’re in aworld of endless possibilities.So I try to close down possibilitiesearly on. I limit choices. I confinepeople to a small area ofmanoeuvre.”- Brian Eno
  34. 34. Finding the Center
  35. 35. How Do We Define Our Features?We Make a List.
  36. 36. NVThings in the AppActions in the App
  37. 37. N VPerson, Place or Thing It’s What’s Happening
  38. 38. Nouns and VerbsStorySummaryPhotoGalleryLinkPlaceMineYoursOursFileN VCreateEditRespondSaveFaveRateViewTweetSort
  39. 39. Implicit vs. ExplicitVThere are implicit verbs and explicit verbs.  Verbs the app does, and verbs the user does. There are inherent system verbs that couldbe taking place to make this more interesting.
  40. 40. CoreA primary feature. This is what your app isdesigned for, and what the user does.AdaptiveA feature that changes the way someoneuses the features or displays information.UselessMore than you think.  Get an axe.Your verbs will tend to fall into three categories
  41. 41. Mobile Design is more Minor Threat,Less Fleetwood Mac.
  42. 42. 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 acollection of nouns.Little nouns become big nounsN
  43. 43. ChangeViewCreateMoveVLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeTRUE STORYLocation Name Goes Here40.03748, -83.02244Timeline CollectionCarrier 11:58 PM
  44. 44. ChangeViewCreateMoveVLocateDefaultVSearchAggregatePresentLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeTRUE STORYLocation Name Goes Here40.03748, -83.02244Timeline CollectionCarrier 11:58 PM
  45. 45. ChangeViewCreateMoveVLocateDefaultVSearchAggregatePresentNLocationTimeframeStoriesStoryPositionUserTimeframeDataContentStoriesLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeLorem Ipsum dolor sitahmet muldoon.January 22, 2013 | @tigerstripeTRUE STORYLocation Name Goes Here40.03748, -83.02244Timeline CollectionCarrier 11:58 PM
  46. 46. ReadCreateMoveV VPresentNStoryStoryPositionStoryLorem ipsum dolor sit amet, consectetur adipiscing elit. Integerligula ante, mattis tempus semper id, porttitor vel tortor. Pellen-tesque dui nibh, dignissim vel dignissim nec.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integerligula ante, mattis tempus semper id, porttitor vel tortor. Pellen-tesque dui nibh, dignissim vel dignissim nec. Lorem ipsum dolorsit amet, consectetur adipiscing elit. Integer ligula ante, mattistempus semper id, porttitor vel tortor. Pellentesque dui nibh, dig-nissim vel dignissim nec.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integerligula ante, mattis tempus semper id, porttitor vel tortor. Pellen-tesque dui nibh, dignissim vel dignissim nec. Lorem ipsum dolorsit amet, consectetur adipiscing elit. Integer ligula ante, mattistempus semper id, porttitor vel tortor. Pellentesque dui nibh, dig-nissim vel dignissim nec.Subhead goes hereHeadline to story goes here, itcan run to two lines.TRUE STORYTRUE STORYTimeline CollectionCarrier 11:58 PM
  47. 47. AddV V NContentCreate a StoryQ W E R T Y U I O PA S D F G H J K LZ X C V B N Mspace.?123 returnName :Details :TRUE STORYCarrier 11:58 PMView MetadataInsert ImageRefer PersonSave Version
  48. 48. NionsNSummaryVADDVRESPONDVVOTEVTWEETNDETAILVIEWVVIEWVSELECTMuch better than boxes and arrrows.
  49. 49. Always be Ruthless.
  50. 50. Everyone does the same thingsWhat is di"erent is more importantthan how similar you are.If you are operating the same aseveryone else,you are likely to find yourself in themiddle.You are not a beautiful and uniquesnowflake, and neither is your app.You better have somethingsomeone else doesnt. 
  51. 51. Wrap it up, Heaton.What the heck have you been talking about?
  52. 52. Situational OpportunityDescribe the ideaDescribe the featuresTell the story of why
  53. 53. ONENouns and Verbs, Dude.TWOAlways be willing to flip what you’re doing.THREERip your own stu" apart. Be ruthless.Finding the Center
  54. 54. Build an app that fits into someone’s life.Find a mental process and wiggle your ass right in there.Pick it up at the exact point of doubt or wonder.
  55. 55. “‘Technology is the name we give to thingsthat don’t work yet. When it works we don’tcall it technology anymore.”- W. Daniel Hillis
  56. 56. Thanks.
  57. 57. @tigerstripe

×