What's Next for UX?

Brad Gerstein VP and General Manager ThoughtMatrix, Chicago Chicago Interactive Design & Development (CIDD) Group

ThoughtMatrix Confidential

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

ThoughtMatrix Confidential

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
ThoughtMatrix Confidential

Select Client List

ThoughtMatrix Confidential

Recent Work

Polycom

SunPower

Outbid

Inspirity

DocuSign
ThoughtMatrix Confidential

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 Confidential

Explosive Growth in Mobile

Smartphone Shipments to Eclipse PC/Notebooks Next Year

ThoughtMatrix Confidential

Explosive Growth in Mobile

Smartphone Mobile Access Exceeds PC/Notebook for Gen Y in 2010

ThoughtMatrix Confidential

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 Confidential

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 Confidential

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 Confidential

Lean UX and Agile Make their Mark

What is Lean UX? Inspired by Lean Startup and Agile development theories, its 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 Confidential

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 Confidential

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 Confidential

Lean UX and Agile Make their Mark

Major Corporations Using Agile

ThoughtMatrix Confidential

Lean UX and Agile Make their Mark

ThoughtMatrix Confidential

 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 

So how do UX Have worked designers respond?

 Insist on Developing for Mobile First

 Embrace the Lean UX Design Process

ThoughtMatrix Confidential

Mobile First

ThoughtMatrix Confidential

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

ThoughtMatrix Confidential

Desktop vs. Mobile Browser

ThoughtMatrix Confidential

Pixels to Burn

1000x650

320x480

ThoughtMatrix Confidential

Desktop vs. Mobile Browser

ThoughtMatrix Confidential

Design for a Variety of Screen Sizes

Palm Pre 320x480 3.1in iPhone iPhone4 Droid HTC Desire Nokia N900 320x480 3.5in 640x960 3.5in

186ppi 164ppi

329ppi 264ppi

480x854 3.7in 480x800 3.7in 800x480 3.5in

252ppi 266ppi

ThoughtMatrix Confidential

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

ThoughtMatrix Confidential

Short Bursts of Activity

ThoughtMatrix Confidential

Short Bursts of Activity

ThoughtMatrix Confidential

Design for one handed touch

ThoughtMatrix Confidential

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/uiguidelines-mobile-tablet-design for all mobile and tablet specs

ThoughtMatrix Confidential

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 Confidential

New Opportunities

Orientation

Location

Audio

Video/Photo

ThoughtMatrix Confidential

New Opportunities

Orientation

Location

ThoughtMatrix Confidential

Mobile Site vs. Native App

vs.

ThoughtMatrix Confidential

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 Confidential

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 Confidential

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
ThoughtMatrix Confidential

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 Confidential

Mobile Site vs. Native App

vs.

ThoughtMatrix Confidential

Embrace Lean UX

ThoughtMatrix Confidential

Traditional Design Process is Broken

The Traditional Process

 Discovery  Design  Implementation  Testing  Launch/Maintenance

ThoughtMatrix Confidential

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 Confidential

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 Confidential

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 Confidential

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 Confidential

How to Implement Lean UX

User Personas  Persona Workshops  Develop Personas Planning & Discovery  Conduct Field Research  Gather Requirements  Perform User Task Analysis  Brand Research  Write Persona Report  Comparative Analysis

Develop IA  Design Information Architecture  Create Clickable Models  Iterate and Finalize Specifications  Creative Brief

ThoughtMatrix Confidential

How to Implement Lean UX

Planning & Discovery

 Conduct Field Research  Gather Requirements  Perform User Task Analysis

ThoughtMatrix Confidential

How to Implement Lean UX

Goals
 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

Understanding Your Users Environment

Behavior

Roles

Req.s

Trends

ThoughtMatrix Confidential

How to Implement Lean UX

Conduct Field Research

 Goal: Obtain a basis of data to support a user-centered design process

Understanding Your Users Environment

Activities
 Select Primary User Segments  Develop Testing/Research Protocol  Recruit Users  Perform Ethnographic Studies  Assemble & Analyze Data

Goals
 Testing Protocol  Ethnography Report
Behavior Roles Req.s Trends

ThoughtMatrix Confidential

How to Implement Lean UX Ethnographic Research Approach Benefits

 Deep understanding of small group of users  Rich insight into why users behave in certain way  Allow observation of things that users themselves are not aware of, such as brand preferences, interaction models, et al  Provide models of behavior, interaction, context, and goals  Serve as foundation for information architecture models, interaction models, and personas

Drawbacks
 Cannot predict magnitude of findings in the population  Trends can be generalized to the population  But not statistically e.g. whether 20% or 60% is unknown  However, anecdotally, strong trends tend to be strong statistically

ThoughtMatrix Confidential

How to Implement Lean UX Validity of N (Small Groups) in Usability Studies Demonstrates value of small-n sample sizes
 With single test user, learn almost 1/3 of all there is to know about the usability of the design  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  As you add more and more users, you learn less and less  After the fifth user, you are wasting your time by observing the same findings repeatedly but not learning much new

ThoughtMatrix Confidential

How to Implement Lean UX

Requirements Gathering
 Obtain a nearly complete set of high level functional requirements  Define core necessary features to explore in detail

Activities
 Content Application Audit  Develop Requirements Roadmap  Interview Stakeholders  Develop Final Requirements Inventory

Deliverables
 Audit Results Report  Requirements Roadmap  Final Requirements Inventory  Requirements Matrix

ThoughtMatrix Confidential

How to Implement Lean UX

User Task Analysis

 Map user behavior and attributes  Define product more deeply, emphasis in user interactions

Activities
 Analyze & map task data  Identify priority use cases  Create user flows  Write Task Analysis report

Deliverables
 Use Case Documentation  User Task Flows  Task analysis report

ThoughtMatrix Confidential

How to Implement Lean UX

We have data, now what?

ThoughtMatrix Confidential

How to Implement Lean UX

Personas
 Persona Workshops  Develop Personas  Write Persona Report

ThoughtMatrix Confidential

How to Implement Lean UX

Creating Personas Behavioral patterns observed during interviews with key audiences are derived, documented, and packaged in a persona.

Users

Behavior Apparent Patters

Personas

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.

ThoughtMatrix Confidential

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 Confidential

How to Implement Lean UX

Persona Development
 Audit and review existing primary and secondary research  Identify primary and secondary personas

Activities
 Persona Workshops  Develop Personas  Write Persona Report

Deliverables
 Primary persona documents  Secondary persona documents

Users

Behavior Apparent Patters

Personas

ThoughtMatrix Confidential

How to Implement Lean UX

Develop IA
 Design Information Architecture  Create Clickable Models  Iterate and Finalize Specifications

ThoughtMatrix Confidential

How to Implement Lean UX

Transitioning 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 Discovery Personas

Layout

ThoughtMatrix Confidential

How to Implement Lean UX

Information Architecture Goals

 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

Turning User Needs Into Interactions

Navigation

Schematic

ThoughtMatrix Confidential

How to Implement Lean UX

Information Architecture
 Define application structure  Create navigation schema

Activities
 Develop preliminary Information Architecture  Create mental models  Create navigation schemas

Deliverables
 Preliminary clickable model  Preliminary IA report

ThoughtMatrix Confidential

How to Implement Lean UX

Interaction Design
 Merge IA with tactical UI & interaction design  Prototype over 80% of use cases  Update requirements detail

Activities
 Develop detailed prototype

Deliverables
 Clickable product prototype

Prototype

ThoughtMatrix Confidential

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
ThoughtMatrix Confidential