1. What's Next for UX? Brad Gerstein VP and General Manager ThoughtMatrix, Chicago Chicago Interactive Design & Development (CIDD) Group

2. My Background Graduated with a Masters in Architecture at Tulane University in ’95 Quickly switched to being a web designer in ’96 Went back to school for a MFA with an emphasis on New Media at Art Center College of Design and graduated in 2000 Caught on to User Experience in 2000 Joined a new digital agency called Decision Counsel in 2003 Lead the creative team Built our UX and Development teams Expanded the firm to NY, Las Vegas and Chicago Joined ThoughtMatrix last October to expand the business in the Midwest with offices in Chicago

3. What is ThoughtMatrix 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. Content Management Web Design Marketing Strategy Social Media Mobile eCommerce

4. Select Client List

5. Recent Work Polycom SunPower Outbid Inspirity DocuSign

6. User Experience is Changing Two major trends in technology are changing the way the design industry and our clients look at the UX design process +

7. Explosive Growth in Mobile Smartphone Shipments to Eclipse PC/Notebooks Next Year

8. Explosive Growth in Mobile Smartphone Mobile Access Exceeds PC/Notebook for Gen Y in 2010

9. Explosive Growth in Mobile Why? Great combination of connectivity, ubiquity and data More and more people are going mobile first, especially in international markets Mobile users are engaged

10. Lean UX and Agile Make their Mark Lean UX has been a successful approach allowing start-ups to get to market quickly with a minimum viable product

11. Lean UX and Agile Make their Mark Lean Startup Coined by entrepreneur and blogger Eric Ries Inspired by Japanese lean manufacturing Lean Startup is about testing your ideas with customers as early and often as possible

12. Lean UX and Agile Make their Mark What is Lean UX? “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.” -Wikipedia

13. Lean UX and Agile Make their Mark What is Agile? Individuals and interactions over processes and tools Working software over comprehensive documentation Responding to change over following a plan (no ganttcharts!)

14. Lean UX and Agile Make their Mark Agile Development Process Focus on product not deliverables Create just enough design to get started Build a prototype Test with users often Validate and move on Momentum keeps teams engaged Reduces risks inherent in the typical waterfall process Walls between teams Lack of collaboration Only verify at the end

15. Lean UX and Agile Make their Mark Major Corporations Using Agile

16. Lean UX and Agile Make their Mark

17. Graduated with a Masters in Architecture at Tulane University in ’95 Quickly switched to being a web designer in ’96 Went back to school for a MFA with an emphasis on New Media and graduated in 2000 Have worked So how do UX designers respond? Insist on Developing for Mobile First Embrace the Lean UX Design Process

18. Mobile First

19. Mobile First Constraints require you to focus on the core value of your offering creating a better user experience Limited screen space Focus on key actions first Short bursts of interaction

20. Desktop vs. Mobile Browser

21. 1000x650 Pixels to Burn 320x480

22. Desktop vs. Mobile Browser

23. Design for a Variety of Screen Sizes Palm Pre 320x480 3.1in 186ppi iPhone 320x480 3.5in 164ppi iPhone4 640x960 3.5in 329ppi Droid 480x854 3.7in 264ppi HTC Desire 480x800 3.7in 252ppi Nokia N900 800x480 3.5in 266ppi

24. Design for a Variety of Screen Sizes Know your target audience Create a default reference design Define rules for content and responsive design Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

25. Short Bursts of Activity

26. Short Bursts of Activity

27. Design for one handed touch

28. Design for One Handed Touch Apple recommends a touch target size of 44px x 44px Calculator App is a great guide Check out http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design for all mobile and tablet specs

29. Design for One Handed Touch Touch gestures allow users to interact directly with content Reduces the need for extraneous navigation and puts content front and center Supported by all mobile platforms and HTML5 Remember no hovers for touch

30. New Opportunities Orientation Location Audio Video/Photo

31. New Opportunities Orientation Location +

32. Mobile Site vs. Native App vs.

33. Mobile Site Why Mobile Web? Cost of Development Leverage existing infrastructure and tech if you have a web product Develop once for multiple platforms Cost of Change Expect to iterate HTML resources are cheaper Ease of Adoption Easier to drive web traffic to mobile web Build a user base then launch app and to drive it up from app store obscurity

34. Mobile Site Why Mobile Web? Time to Market Cheaper to build Cheaper to iterate Makes speed and option Addressable Market iOS used to dominate 90% of the market Trending toward 30% iOS, 30% Android, 30% + other Control Release new features, bug fixes, etc whenever

35. Native App Why Native App? Access to OS Features Geolocation Appcache Local Storage 3D Accelerometer Microphone Light sensors And more… Performance Native apps are faster Even on WebOS Consistency HTML5 is not standardized yet Big difference in capabilities

36. Native App Why Native App? App Store Distribution Sell your app Virtual goods In app purchases Gaming OpenGL 3D acceleration Large assets Media Centric Apps Is your app oriented around images/video Native still has an edge

37. Mobile Site vs. Native App vs.

38. Embrace Lean UX

39. Traditional Design Process is Broken The Traditional Process Discovery Design Implementation Testing Launch/Maintenance

40. Traditional Design Process is Broken The Traditional Process Divided teams by role Poor communication Focused on deliverables not the product Slow Full of risks

41. Embracing Lean UX A New Mindset for UX Designers Focus on the product not deliverables Create just enough design to get started Validate your ideas through prototypes and user testing Get used to refining design as you iterate Designers still own the vision Still control consistency Integrity of design

42. Embracing Lean UX Educating Clients If clients embrace UX than Lean UX is not much of a stretch Aligns designers and client on the result rather than the process Not slaves to the process Process is not a differentiator But results are! Reduces risk Allows for more input Different approach to pricing More resource intensive Less deliverable focused More flexible

43. Embracing Lean UX Educating Clients Not for every project Best for highly interactive work or complex flows Not for brochure-ware Not for ad creative

45. Develop Personas

46. Write Persona Report

48. Gather Requirements

49. Perform User Task Analysis

51. Create Clickable Models

52. Iterate and Finalize Specifications

54. Gather Requirements

56. Obtain a 360° understanding of user roles

57. Capture and document initial requirements of products and processes

58. Perform a trends and best practices reviewUnderstanding Your User’s Environment Behavior Roles Req.’s Trends

60. Develop Testing/Research Protocol

61. Recruit Users

62. Perform Ethnographic Studies

64. Ethnography ReportBehavior Roles Req.’s Trends

66. Rich insight into why users behave in certain way

67. Allow observation of things that users themselves are not aware of, such as brand preferences, interaction models, et al

68. Provide models of behavior, interaction, context, and goals

70. Trends can be generalized to the population

71. But not statistically – e.g. whether 20% or 60% is unknown

75. Develop Requirements Roadmap

76. Interview Stakeholders

78. Requirements Roadmap

79. Final Requirements Inventory

82. Identify priority use cases

83. Create user flows

85. User Task Flows

88. Develop Personas

90. What is a Persona Anyway? Personas are hypothetical archetypes, or "stand-ins" for actual users that drive the decision making for interface design projects Personas are not real people, but they represent real people throughout the design process Although personas are imaginary, they are defined with significant rigor and precision. Names and personal details are made up for personas to make them more realistic Personas are defined by their goals Interfaces are built to satisfy personas' needs and goals

93. Develop Personas

95. Secondary persona documentsUsers Behavior Personas Apparent Patters

97. Create Clickable Models

100. Create navigation schema

101. Create interaction patterns of core UI modules and controls (widgets, tools, etc.)

102. Create User Interface TemplatesNavigation Schematic

105. Create mental models

108. Prototype over 80% of use cases

110. Thank You! @iambradgerstein Brad Gerstein linkedin.com/gersteinb brad@thought-matrix.com San Francisco Office The Flood Building 870 Market St. Suite 642 San Francisco, CA 94102 Phone: 415.217.0009 Fax: 925.886.4601 Chicago Office Two Prudential Plaza 180 North Stetson Suite 3500 Chicago, IL 60601 Phone: 312.268.5731 Fax: 312.268.5801