What's Next For UX?


Published on

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

What's Next For UX?

  1. 1. What's Next for UX?<br />Brad Gerstein<br />VP and General Manager<br />ThoughtMatrix, Chicago<br />Chicago Interactive Design & Development (CIDD) Group<br />
  2. 2. My Background<br />Graduated with a Masters in Architecture at Tulane University in ’95<br />Quickly switched to being a web designer in ’96<br />Went back to school for a MFA with an emphasis on New Media at Art Center College of Design and graduated in 2000<br />Caught on to User Experience in 2000<br />Joined a new digital agency called Decision Counsel in 2003<br />Lead the creative team<br />Built our UX and Development teams<br />Expanded the firm to NY, Las Vegas and Chicago<br />Joined ThoughtMatrix last October to expand the business in the Midwest with offices in Chicago<br />
  3. 3. What is ThoughtMatrix<br />ThoughtMatrix is a digital marketing and technology services firm focused on creating engaging and immersive digital experiences. We serve diverse organizations defining strategies and finding innovative ways to build and improve the way they connect with their constituents.<br />Content Management<br />Web Design<br />Marketing Strategy<br />Social Media<br />Mobile<br />eCommerce<br />
  4. 4. Select Client List<br />
  5. 5. Recent Work<br />Polycom<br />SunPower<br />Outbid<br />Inspirity<br />DocuSign<br />
  6. 6. User Experience is Changing<br />Two major trends in technology are changing the way the design industry and our clients look at the UX design process<br />+<br />
  7. 7. Explosive Growth in Mobile<br />Smartphone Shipments to Eclipse<br />PC/Notebooks Next Year<br />
  8. 8. Explosive Growth in Mobile<br />Smartphone Mobile Access Exceeds <br />PC/Notebook for Gen Y in 2010<br />
  9. 9. Explosive Growth in Mobile<br />Why?<br />Great combination of connectivity, ubiquity and data<br />More and more people are going mobile first, especially in international markets<br />Mobile users are engaged<br />
  10. 10. Lean UX and Agile Make their Mark<br />Lean UX has been a successful approach allowing start-ups to get to market quickly with a minimum viable product<br />
  11. 11. Lean UX and Agile Make their Mark<br />Lean Startup<br />Coined by entrepreneur and blogger Eric Ries<br />Inspired by Japanese lean manufacturing <br />Lean Startup is about testing your ideas with customers as early and often as possible<br />
  12. 12. Lean UX and Agile Make their Mark<br />What is Lean UX?<br />“Inspired by Lean Startup and Agile development theories, it’s the practice of bringing the true nature of our work to light faster, with less emphasis on deliverables and greater focus on the actual experience being designed.”<br />-Wikipedia<br />
  13. 13. Lean UX and Agile Make their Mark<br />What is Agile?<br />Individuals and interactions over processes and tools<br />Working software over comprehensive documentation<br />Responding to change over following a plan (no ganttcharts!)<br />
  14. 14. Lean UX and Agile Make their Mark<br />Agile Development Process<br />Focus on product not deliverables<br />Create just enough design to get started<br />Build a prototype<br />Test with users often<br />Validate and move on<br />Momentum keeps teams engaged<br />Reduces risks inherent in the typical waterfall process<br />Walls between teams<br />Lack of collaboration<br />Only verify at the end<br />
  15. 15. Lean UX and Agile Make their Mark<br />Major Corporations Using Agile<br />
  16. 16. Lean UX and Agile Make their Mark<br />
  17. 17. Graduated with a Masters in Architecture at Tulane University in ’95<br />Quickly switched to being a web designer in ’96<br />Went back to school for a MFA with an emphasis on New Media and graduated in 2000<br />Have worked <br />So how do UX designers respond?<br />Insist on Developing for Mobile First<br />Embrace the Lean UX Design Process<br />
  18. 18. Mobile First<br />
  19. 19. Mobile First<br />Constraints require you to focus on the core value of your offering creating a better user experience<br />Limited screen space<br />Focus on key actions first<br />Short bursts of interaction<br />
  20. 20. Desktop vs. Mobile Browser<br />
  21. 21. 1000x650<br />Pixels to Burn<br />320x480<br />
  22. 22. Desktop vs. Mobile Browser<br />
  23. 23. Design for a Variety of Screen Sizes<br />Palm Pre 320x480 3.1in 186ppi<br />iPhone 320x480 3.5in 164ppi<br />iPhone4 640x960 3.5in 329ppi<br />Droid 480x854 3.7in 264ppi<br />HTC Desire 480x800 3.7in 252ppi<br />Nokia N900 800x480 3.5in 266ppi<br />
  24. 24. Design for a Variety of Screen Sizes<br />Know your target audience<br />Create a default reference design<br />Define rules for content and responsive design<br />Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes<br />
  25. 25. Short Bursts of Activity<br />
  26. 26. Short Bursts of Activity<br />
  27. 27. Design for one handed touch<br />
  28. 28. Design for One Handed Touch<br />Apple recommends a touch target size of 44px x 44px<br />Calculator App is a great guide<br />Check out http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design for all mobile and tablet specs<br />
  29. 29. Design for One Handed Touch<br />Touch gestures allow users to interact directly with content<br />Reduces the need for extraneous navigation and puts content front and center<br />Supported by all mobile platforms and HTML5<br />Remember no hovers for touch<br />
  30. 30. New Opportunities<br />Orientation<br />Location<br />Audio<br />Video/Photo<br />
  31. 31. New Opportunities<br />Orientation<br />Location<br />+<br />
  32. 32. Mobile Site vs. Native App<br />vs.<br />
  33. 33. Mobile Site<br />Why Mobile Web?<br />Cost of Development<br />Leverage existing infrastructure and tech if you have a web product<br />Develop once for multiple platforms<br />Cost of Change<br />Expect to iterate<br />HTML resources are cheaper<br />Ease of Adoption<br />Easier to drive web traffic to mobile web<br />Build a user base then launch app and to drive it up from app store obscurity<br />
  34. 34. Mobile Site<br />Why Mobile Web?<br />Time to Market<br />Cheaper to build<br />Cheaper to iterate<br />Makes speed and option<br />Addressable Market<br />iOS used to dominate 90% of the market<br />Trending toward 30% iOS, 30% Android, 30% + other<br />Control<br />Release new features, bug fixes, etc whenever<br />
  35. 35. Native App<br />Why Native App?<br />Access to OS Features<br />Geolocation<br />Appcache<br />Local Storage<br />3D<br />Accelerometer<br />Microphone<br />Light sensors<br />And more…<br />Performance<br />Native apps are faster<br />Even on WebOS<br />Consistency<br />HTML5 is not standardized yet<br />Big difference in capabilities<br />
  36. 36. Native App<br />Why Native App?<br />App Store<br />Distribution<br />Sell your app<br />Virtual goods<br />In app purchases<br />Gaming<br />OpenGL<br />3D acceleration<br />Large assets<br />Media Centric Apps<br />Is your app oriented around images/video<br />Native still has an edge<br />
  37. 37. Mobile Site vs. Native App<br />vs.<br />
  38. 38. Embrace Lean UX<br />
  39. 39. Traditional Design Process is Broken<br />The Traditional Process<br />Discovery<br />Design<br />Implementation<br />Testing<br />Launch/Maintenance<br />
  40. 40. Traditional Design Process is Broken<br />The Traditional Process<br />Divided teams by role<br />Poor communication<br />Focused on deliverables not the product<br />Slow<br />Full of risks<br />
  41. 41. Embracing Lean UX<br />A New Mindset for UX Designers<br />Focus on the product not deliverables<br />Create just enough design to get started<br />Validate your ideas through prototypes and user testing<br />Get used to refining design as you iterate<br />Designers still own the vision<br />Still control consistency<br />Integrity of design<br />
  42. 42. Embracing Lean UX<br />Educating Clients<br />If clients embrace UX than Lean UX is not much of a stretch<br />Aligns designers and client on the result rather than the process<br />Not slaves to the process<br />Process is not a differentiator<br />But results are!<br />Reduces risk<br />Allows for more input<br />Different approach to pricing<br />More resource intensive<br />Less deliverable focused<br />More flexible<br />
  43. 43. Embracing Lean UX<br />Educating Clients<br />Not for every project<br />Best for highly interactive work or complex flows<br />Not for brochure-ware<br />Not for ad creative<br />
  44. 44. How to Implement Lean UX<br />User Personas<br /><ul><li>Persona Workshops
  45. 45. Develop Personas
  46. 46. Write Persona Report
  47. 47. Comparative Analysis</li></ul>Planning & Discovery<br /><ul><li>Conduct Field Research
  48. 48. Gather Requirements
  49. 49. Perform User Task Analysis
  50. 50. Brand Research</li></ul>Develop IA<br /><ul><li>Design Information Architecture
  51. 51. Create Clickable Models
  52. 52. Iterate and Finalize Specifications
  53. 53. Creative Brief</li></li></ul><li>How to Implement Lean UX<br />Planning & Discovery<br /><ul><li>Conduct Field Research
  54. 54. Gather Requirements
  55. 55. Perform User Task Analysis</li></li></ul><li>How to Implement Lean UX<br />Goals<br /><ul><li>Understand user goals and identify behavior patterns
  56. 56. Obtain a 360° understanding of user roles
  57. 57. Capture and document initial requirements of products and processes
  58. 58. Perform a trends and best practices review</li></ul>Understanding Your User’s Environment<br />Behavior<br />Roles<br />Req.’s<br />Trends<br />
  59. 59. How to Implement Lean UX<br />Conduct Field Research<br /><ul><li>Goal: Obtain a basis of data to support a user-centered design process</li></ul>Understanding Your Users Environment<br />Activities<br /><ul><li>Select Primary User Segments
  60. 60. Develop Testing/Research Protocol
  61. 61. Recruit Users
  62. 62. Perform Ethnographic Studies
  63. 63. Assemble & Analyze Data</li></ul>Goals<br /><ul><li>Testing Protocol
  64. 64. Ethnography Report</li></ul>Behavior<br />Roles<br />Req.’s<br />Trends<br />
  65. 65. How to Implement Lean UX<br />Ethnographic Research Approach<br />Benefits<br /><ul><li>Deep understanding of small group of users
  66. 66. Rich insight into why users behave in certain way
  67. 67. Allow observation of things that users themselves are not aware of, such as brand preferences, interaction models, et al
  68. 68. Provide models of behavior, interaction, context, and goals
  69. 69. Serve as foundation for information architecture models, interaction models, and personas</li></ul>Drawbacks<br /><ul><li>Cannot predict magnitude of findings in the population
  70. 70. Trends can be generalized to the population
  71. 71. But not statistically – e.g. whether 20% or 60% is unknown
  72. 72. However, anecdotally, strong trends tend to be strong statistically</li></li></ul><li>How to Implement Lean UX<br />Validity of N (Small Groups) in Usability Studies<br />Demonstrates value of small-n sample sizes<br />With single test user, learn almost 1/3 of all there is to know about the usability of the design<br />With second test user, discover some overlap with first user, but also some new observations - so add a bit more insight<br />With third user, will observe many things seen with first and second users, and less incremental new data<br />As you add more and more users, you learn less and less<br />“After the fifth user, you are wasting your time by observing the same findings repeatedly but not learning much new”<br />
  73. 73. How to Implement Lean UX<br />Requirements Gathering<br /><ul><li>Obtain a nearly complete set of high level functional requirements
  74. 74. Define core necessary features to explore in detail</li></ul>Activities<br /><ul><li>Content Application Audit
  75. 75. Develop Requirements Roadmap
  76. 76. Interview Stakeholders
  77. 77. Develop Final Requirements Inventory</li></ul>Deliverables<br /><ul><li>Audit Results Report
  78. 78. Requirements Roadmap
  79. 79. Final Requirements Inventory
  80. 80. Requirements Matrix</li></li></ul><li>How to Implement Lean UX<br />User Task Analysis<br /><ul><li>Map user behavior and attributes
  81. 81. Define product more deeply, emphasis in user interactions</li></ul>Activities<br /><ul><li>Analyze & map task data
  82. 82. Identify priority use cases
  83. 83. Create user flows
  84. 84. Write Task Analysis report</li></ul>Deliverables<br /><ul><li>Use Case Documentation
  85. 85. User Task Flows
  86. 86. Task analysis report</li></li></ul><li>How to Implement Lean UX<br />We have data, now what?<br />
  87. 87. How to Implement Lean UX<br />Personas<br /><ul><li>Persona Workshops
  88. 88. Develop Personas
  89. 89. Write Persona Report</li></li></ul><li>How to Implement Lean UX<br />Creating Personas<br />Behavioral patterns observed during interviews with key audiences are derived, documented, and “packaged” in a persona.<br />Users<br />Behavior<br />Personas<br />Apparent Patters<br />Gaps in behavioral and user data are filled by supplemental research and data provided by other data channels, such as existing research and site analytics.<br />
  90. 90. What is a Persona Anyway?<br />Personas are hypothetical archetypes, or "stand-ins" for actual users that drive the decision making for interface design projects<br />Personas are not real people, but they represent real people throughout the design process<br />Although personas are imaginary, they are defined with significant rigor and precision. <br />Names and personal details are made up for personas to make them more realistic<br />Personas are defined by their goals<br />Interfaces are built to satisfy personas' needs and goals<br />
  91. 91. How to Implement Lean UX<br />Persona Development<br /><ul><li>Audit and review existing primary and secondary research
  92. 92. Identify primary and secondary personas</li></ul>Activities<br /><ul><li>Persona Workshops
  93. 93. Develop Personas
  94. 94. Write Persona Report</li></ul>Deliverables<br /><ul><li>Primary persona documents
  95. 95. Secondary persona documents</li></ul>Users<br />Behavior<br />Personas<br />Apparent Patters<br />
  96. 96. How to Implement Lean UX<br />Develop IA<br /><ul><li>Design Information Architecture
  97. 97. Create Clickable Models
  98. 98. Iterate and Finalize Specifications</li></li></ul><li>How to Implement Lean UX<br />Transitioning Discovery to IA<br /><ul><li>Synthesize goals</li></ul>Experience goals: How does the persona expect to experience the product?<br />Business goals: Concrete expected results of tasks<br />Goal-Directed Design<br />Layout<br />IA<br />Discovery<br />Personas<br />
  99. 99. How to Implement Lean UX<br />Information Architecture<br />Turning User Needs<br />Into Interactions<br />Goals<br /><ul><li>Define product/site architecture and core interaction 
  100. 100. Create navigation schema
  101. 101. Create interaction patterns of core UI modules and controls (widgets, tools, etc.)
  102. 102. Create User Interface Templates</li></ul>Navigation<br />Schematic<br />
  103. 103. How to Implement Lean UX<br />Information Architecture<br /><ul><li>Define application structure
  104. 104. Create navigation schema</li></ul>Activities<br /><ul><li>Develop preliminary Information Architecture
  105. 105. Create mental models
  106. 106. Create navigation schemas</li></ul>Deliverables<br /><ul><li>Preliminary clickable model
  107. 107. Preliminary IA report</li></li></ul><li>How to Implement Lean UX<br />Interaction Design<br /><ul><li>Merge IA with tactical UI & interaction design
  108. 108. Prototype over 80% of use cases
  109. 109. Update requirements detail</li></ul>Activities<br /><ul><li>Develop detailed prototype</li></ul>Deliverables<br /><ul><li>Clickable product prototype</li></ul>Prototype »<br />
  110. 110. Thank You!<br />@iambradgerstein<br />Brad Gerstein<br />linkedin.com/gersteinb<br />brad@thought-matrix.com<br />San Francisco Office<br />The Flood Building<br />870 Market St.<br />Suite 642<br />San Francisco, CA 94102<br />Phone: 415.217.0009<br />Fax: 925.886.4601<br />Chicago Office<br />Two Prudential Plaza<br />180 North Stetson<br />Suite 3500<br />Chicago, IL 60601<br />Phone: 312.268.5731<br />Fax: 312.268.5801<br />