What's Next for UX - Refresh Chicago

Whats Next for UX? Brad GersteinVP, Executive Creative Director ThoughtMatrix Refresh Chicago ThoughtMatrix Conﬁden2al

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 in 2010 to expand the business in the Midwest with office in Chicago ThoughtMatrix Conﬁden2al

What is ThoughtMatrixThoughtMatrix is a digital marketing and technology services firmfocused on creating engaging and immersive digital experiences. Weserve diverse organizations defining strategies and finding innovativeways to build and improve the way they connect with their constituents. Content Management Web Design Marketing Strategy Social Media Mobile eCommerce ThoughtMatrix Conﬁden2al

Select Client List ThoughtMatrix Conﬁden2al

Recent Work Polycom SunPower Outbid Inspirity DocuSign ThoughtMatrix Conﬁden2al

Recent Work Verizon Video Manager (Video Vault) ThoughtMatrix Conﬁden2al

Recent Work Builder Concept Home ThoughtMatrix Conﬁden2al

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 + ThoughtMatrix Conﬁden2al

Explosive Growth in Mobile Smartphone Shipments Eclipses PC/Notebooks This Year ThoughtMatrix Conﬁden2al

Explosive Growth in Mobile Smartphone Mobile Access Exceeds PC/Notebook for Gen Y in 2010 ThoughtMatrix Conﬁden2al

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 ThoughtMatrix Conﬁden2al

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 ThoughtMatrix Conﬁden2al

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 ThoughtMatrix Conﬁden2al

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 ThoughtMatrix Conﬁden2al

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 Gantt charts!) ThoughtMatrix Conﬁden2al

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 ThoughtMatrix Conﬁden2al

Lean UX and Agile Make their Mark Major Corporations Using Agile ThoughtMatrix Conﬁden2al

Lean UX and Agile Make their Mark ThoughtMatrix Conﬁden2al

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

Mobile First ThoughtMatrix Conﬁden2al

Why Mobile First?ü  Mobile is becoming (or has become) the primary access point to the web for most users §  55% of Twitter users, 70% of Pandora, 40% of searches on Yelp §  10% of e-commerce and growing rapidly §  New opportunities to be a leader in your marketü  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ü  Opportunities to innovate §  Powerful features like geo location and sensors allow for a very personal experience ThoughtMatrix Conﬁden2al

Pixels to Burn 1024x768 320x480 ThoughtMatrix Conﬁden2al

Desktop vs. Mobile Browser ThoughtMatrix Conﬁden2al

Design for a Variety of Screen SizesPalm Pre 320x480 3.1in 186ppiiPhone 3G 320x480 3.5in 164ppiiPhone 4S 640x960 3.5in 329ppiDroid 480x854 3.7in 264ppiHTC Desire 480x800 3.7in 252ppiNokia N900 800x480 3.5in 266ppi ThoughtMatrix Conﬁden2al

Design for a Variety of Screen Sizesü  Know your target audienceü  Create a default reference designü  Define rules for content and Responsive design ThoughtMatrix Conﬁden2al

Short Bursts of Activity ThoughtMatrix Conﬁden2al

Design for one hand touch ThoughtMatrix Conﬁden2al

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 ThoughtMatrix Conﬁden2al

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 ThoughtMatrix Conﬁden2al

New Opportunities Orientation Location Audio Video/Photo ThoughtMatrix Conﬁden2al

New Opportunities Orientation + Location ThoughtMatrix Conﬁden2al

Mobile Site vs. Native App vs. ThoughtMatrix Conﬁden2al

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 ThoughtMatrix Conﬁden2al

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 ThoughtMatrix Conﬁden2al

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 ü  Consistency §  HTML5 is not standardized yet §  Big difference in capabilities ThoughtMatrix Conﬁden2al

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 ThoughtMatrix Conﬁden2al

Mobile Site vs. Native App vs. ThoughtMatrix Conﬁden2al

Embrace Lean UX ThoughtMatrix Conﬁden2al

Traditional Design Process is Broken The Traditional Process ü  Discovery ü  Design ü  Development ü  Testing ü  Launch/Maintenance ThoughtMatrix Conﬁden2al

Traditional Design Process is Broken The Traditional Process ü  Divided teams by role ü  Poor communication ü  Focused on deliverables not the product ü  Slow ü  Full of risks ThoughtMatrix Conﬁden2al

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 ThoughtMatrix Conﬁden2al

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 ThoughtMatrix Conﬁden2al

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 ThoughtMatrix Conﬁden2al

How to Implement Lean UX User Personas ü  Persona Workshops ü  Develop Personas Planning & Discovery ü  Write Persona Report ü  Conduct Field Research ü  Comparative Analysis ü  Gather Requirements ü  Perform User Task Analysis ü  Brand Research Develop IA ü  Design Information Architecture ü  Create Clickable Models ü  Iterate and Finalize Specifications ü  Creative Brief ThoughtMatrix Conﬁden2al

How to Implement Lean UX Planning & Discovery ü  Conduct Field Research ü  Gather Requirements ü  Perform User Task Analysis ThoughtMatrix Conﬁden2al

How to Implement Lean UXGoals Understanding Your User’s Environmentü  Understand user goals and identify behavior patternsü  Obtain a 360° understanding of user rolesü  Capture and document initial requirements of products and processesü  Perform a trends and best practices review Behavior Roles Req.’s Trends ThoughtMatrix Conﬁden2al

How to Implement Lean UXConduct Field Research Understanding YourØ  Goal: Obtain a basis of data to Users Environment support a user-centered design processActivitiesü  Select Primary User Segmentsü  Develop Testing/Research Protocolü  Recruit Usersü  Perform Ethnographic Studiesü  Assemble & Analyze DataGoalsü  Testing Protocol Behavior Roles Req.’s Trendsü  Ethnography Report ThoughtMatrix Conﬁden2al

How to Implement Lean UXEthnographic Research ApproachBenefits Drawbacksü  Deep understanding of small ü  Cannot predict magnitude of group of users findings in the populationü  Rich insight into why users ü  Trends can be generalized to behave in certain way the populationü  Allow observation of things that ü  But not statistically – e.g. users themselves are not aware whether 20% or 60% is of, such as brand preferences, unknown interaction models, et al ü  However, anecdotally, strongü  Provide models of behavior, trends tend to be strong interaction, context, and goals statisticallyü  Serve as foundation for information architecture models, interaction models, and personas ThoughtMatrix Conﬁden2al

How to Implement Lean UXValidity of N (Small Groups) in Usability StudiesDemonstrates value of small-n ü  As you add more and moresample sizes users, you learn less and less ü  “After the fifth user, you areü  With single test user, learn wasting your time by almost 1/3 of all there is to know observing the same findings about the usability of the repeatedly but not learning design much new”ü  With second test user, discover some overlap with first user, but also some new observations - so add a bit more insightü  With third user, will observe many things seen with first and second users, and less incremental new data ThoughtMatrix Conﬁden2al

How to Implement Lean UXRequirements GatheringØ  Obtain a nearly complete set of high level functional requirementsØ  Define core necessary features to explore in detailActivities Deliverablesü  Content Application Audit ü  Audit Results Reportü  Develop Requirements Roadmap ü  Requirements Roadmapü  Interview Stakeholders ü  Final Requirements Inventoryü  Develop Final Requirements ü  Requirements Matrix Inventory ThoughtMatrix Conﬁden2al

How to Implement Lean UXUser Task AnalysisØ  Map user behavior and attributesØ  Define product more deeply, emphasis in user interactionsActivities Deliverablesü  Analyze & map task data ü  Use Case Documentationü  Identify priority use cases ü  User Task Flowsü  Create user flows ü  Task analysis reportü  Write Task Analysis report ThoughtMatrix Conﬁden2al

How to Implement Lean UX We have data, now what? ThoughtMatrix Conﬁden2al

How to Implement Lean UX Personas ü  Persona Workshops ü  Develop Personas ü  Write Persona Report ThoughtMatrix Conﬁden2al

How to Implement Lean UXCreating PersonasBehavioral patterns observed during interviews with key audiences arederived, documented, and “packaged” in a persona. Users Behavior Personas Apparent PattersGaps in behavioral and user data are filled by supplemental research anddata provided by other data channels, such as existing research and siteanalytics. ThoughtMatrix Conﬁden2al

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 ThoughtMatrix Conﬁden2al

How to Implement Lean UXPersona DevelopmentØ  Audit and review existing primary and secondary researchØ  Identify primary and secondary personasActivities Deliverablesü  Persona Workshops ü  Primary persona documentsü  Develop Personas ü  Secondary persona documentsü  Write Persona Report Users Behavior Personas Apparent Patters ThoughtMatrix Conﬁden2al

How to Implement Lean UX Develop IA ü  Design Information Architecture ü  Create Clickable Models ü  Iterate and Finalize Specifications ThoughtMatrix Conﬁden2al

How to Implement Lean UXTransitioning Discovery to IAØ  Synthesize goalsü  Experience goals: How does the persona expect to experience the product?ü  Business goals: Concrete expected results of tasks Goal-Directed Design IA Layout Discovery Personas ThoughtMatrix Conﬁden2al

How to Implement Lean UXInformation Architecture Turning User Needs Into InteractionsGoalsü  Define product/site architecture and core interaction ü  Create navigation schemaü  Create interaction patterns of core UI modules and controls (widgets, tools, etc.)ü  Create User Interface Templates Navigation Schematic ThoughtMatrix Conﬁden2al

How to Implement Lean UXInformation ArchitectureØ  Define application structureØ  Create navigation schemaActivities Deliverablesü  Develop preliminary Information ü  Preliminary clickable model Architecture ü  Preliminary IA reportü  Create mental modelsü  Create navigation schemas ThoughtMatrix Conﬁden2al

How to Implement Lean UXInteraction DesignØ  Merge IA with tactical UI & interaction designØ  Prototype over 80% of use casesØ  Update requirements detailActivities Deliverablesü  Develop detailed prototype ü  Clickable product prototype Mobile Prototype » Desktop Prototype » ThoughtMatrix Conﬁden2al

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

What's Next for UX - Refresh Chicago

by Brad Gerstein on Jul 31, 2012

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 9

Statistics

What’s Next for UX - Refresh Chicago Presentation Transcript

https://si0.twimg.com	4
http://us-w1.rockmelt.com	3
http://www.vcexp.com	2