Designing the Complete User Experience Day Two Adaptive Path Jeffrey Veen Jesse James Garrett.

Designing the Complete User ExperienceDay Two

Adaptive Path

www.adaptivepath.com/workshops/firstunion/

Jeffrey Veen <[email protected]>

Jesse James Garrett <[email protected]>

2User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])

Yesterday

• Discovery

• Personas and scenarios

• User research

• Task analysis and mental models

• High-level information architecture


Today

• Designing the deep structures – Competitive analysis, content inventory, low-level IA

• Prioritizing features

• Interaction design – With notes on visual design

• Prototyping, process, patterns in design

• Usability testing

• Design in the organization


Mostly “Big Projects,” scaled down for small projects- yearly, quarterly

This is “Business as Usual”- daily/weekly (small & fast)

Mental Model ValidateDiagram &Prototype

I nitialDiscovery

AudienceDefinition

Content Audit

Task Analysis

Prioritiztaion

Mental Model

Content Model

Align MM & Content

Define the Audience

Prioritize

IA &Interaction

Diagrams and Prototypes

Overview

Designing the IA: A Bottom-Up Approach


What Is Information Architecture?

A structure based on the patterns

inherent in data that allows users

to accomplish their goals.


Yesterday We Talked About High-Level Structures and Mental Models:

1. Figure out what users need: develop a mental model

2. Figure out what you have: develop a content model

3. Match them up.

4. Use it to create your IA• Make a high-level structure based on mental model• Make the detailed structure based on the content model


Today We’ll Talk About Deep Structures and Content

1. Figure out what users need: develop a mental model

2. Figure out what you have: develop a content model

3. Match them up

4. Use it to create your IA• Make a high-level structure based on mental model• Make the detailed structure based on the content model


The Process: Two Tracks

TASK ANALYSIS

Initial Discovery

User ResearchUser DataAnalysis

Mental ModelDiagram

Mental Model

Content Audit

Mental Model

Content Model

Define the Audience

Align MM & Content

User Task Interviews

Task Data Analysis

Mental ModelDiagram

Prioritize Features

Content Model

Current StateResearch

CompetitiveReview

Content ModelDiagram

IA &Interaction



The Two Tracks, Diagrammed

Surface architecturecomes from Mental Model

Deep architecture comes from the Content Model


Current State Research: Figure Out What You Have

TASK ANALYSIS

Initial Discovery


Mental ModelDiagram

Mental Model

Content Audit

Mental Model

Content Model

Define the Audience

Align MM & Content


Task Data Analysis

Mental ModelDiagram

Prioritize Features

Content Model


CompetitiveReview


IA &Interaction



Four Things To Look At

• Content (yesterday)

• Architecture

• Interaction

• Technology


Architecture Review

• An overview of how content is structured

• Identify organizational schemes

• Map the site– Outline– Diagram

• Refine content types (content types will be very important in a

little while…)


Q: Can you automate the architecture review?

A: Not really.


Typical Site-Mapping Tool Output


What You Actually Need To Know


The Desired Result


Interaction Review

• Walk through existing interactive functionality– Registration process– Shopping cart– Newsletter signup– Etc.

• Play out scenarios with a test account

• Document interaction

• Think like a QA tester – try to generate errors


Documenting Interactions:

The Visual Vocabulary

http://jjg.net/visvocab/


Technology Review

• Identify technologies during walk-through:– Server-side technologies such as Cold Fusion, JSP, PHP, etc.– Client-side technologies such as DHTML, JavaScript, etc.

• Talk to the technical people

• Don’t be afraid to ask dumb questions

• Ask “What’s that connected to?”


Current State Analysis Deliverables

Content Audit Spreadsheet or database showing

content by type and topic

Architecture Outlines or diagrams of site structureReview

Interaction ReviewDiagrams, notes, lists

Technology Review Technical brief


Next, Figure Out What They Have

TASK ANALYSIS

Initial Discovery


Mental ModelDiagram

Mental Model

Content Audit

Mental Model

Content Model

Define the Audience

Align MM & Content


Task Data Analysis

Mental ModelDiagram

Prioritize Features

Content Model


CompetitiveReview


IA &Interaction



Competitive Analysis

• A thorough deconstruction of your competitors’ Web sites

• Similar to market and customer research, but with an

emphasis on functional implementations

• Not simply limited to direct competitors


Identifying Competitors

• Start with known rivals– See: marketing plan, business plan, etc.

• Use online tools to broaden scope– “What’s related,” Alexa, browse online directories

• Look for other sites with similar features, even if they’re in a

completely different industry– Search work, navigation, interface widgets, etc.

• Use analyst reports to identify industry trends– Forrester, Jupiter, et al.


The Competitive Matrix

• List features against competitors in a spreadsheet (build off of

your findings from the current state analysis)

• Use online tools to help fill in the technical details– www.websitegarage.com– www.siteowner.com



• Build spreadsheet with feature-set against competitors’ sites

• Fill in short descriptions of similarities and differences

• Point out radically different solutions

• Use principles of Heuristic Evaluation



• Feature set and content types

• Interface characteristics– Navigation vocabulary– Renderings (Tabs, Pull-down menus, etc.)

• Technology choices– Browser targeting– Advanced CSS or Javascript usage

• Performance Statistics– Bandwidth usage and rendering speed for page types

• Meta Tag Contents


Make Your Research Usable

TASK ANALYSIS

Initial Discovery


Mental ModelDiagram

Mental Model

Content Audit

Mental Model

Content Model

Define the Audience

Align MM & Content


Task Data Analysis

Mental ModelDiagram

Prioritize Features

Content Model


CompetitiveReview


IA &Interaction



“Chunk” Up the Existing and Desired Content

• Review content audit and competitive matrix

• Identify patterns within the content (subject, doc type,

etc.)

• Group similar content together

• Organize groups into hierarchies

--> For a whole site, you want maybe 50-100 “chunks”


Taxonomies and Classification – Wine.com


Activity: Generating a Classification System

• Divide into groups of six– 5 Information Architects– 1 Content Manager

• Information Architecture Team:– Each IA picks a different appliance– List individual attributes

e.g. Physical dimensions, color– Decide which attributes are appropriate for which audience

segmente.g. do-it-yourself-er, contractor, first-timer

• Content Manager– List document types

e.g. product review, specifications– List individual document attributes

e.g. headline, date


Activity: Classification System Step 2

• Information Architecture Team: Now matches attributes with

other IAs on your team

• Content Manager: Match document types to IAs’ appliances.

• Next: Look for innovation


Innovation in Classification


Classification and Interfaces – Faucet Facet Finder


Content Map

• Same type of tool as the

mental model diagram

• Lets you understand what you

have and want in a single

glance

• Arrange the chunks in a

meaningful way

(e.g., subject + type)

• We use Visio

CheeseProductDetail

Wine

Product Detail

Gift BasketCheese

CategoryInfo

Review

Tools

OrganicCheesemaking

VarietalComparison

Chart

Wine SpectatorReprints

VarietalProfile

WineProduct

Detail

Cheese Selector

Basket Product

Detail

SpecialtyBaskest

RegionProfile


Comparing What We Have To What Users Want

TASK ANALYSIS

Initial Discovery


Mental ModelDiagram

Mental Model

Content Audit

Mental Model

Content Model

Define the Audience


Task Data AnalysisTask DataAnalysis

Mental ModelDiagram

Align MM & Content


Comparison of Mental Model to Available Material

• This is where it begins to come together

• Slot content, functionality, and business goals where it

supports audiences’ mental model

• Make sure to address every significant content area

• If the project is “from scratch” and there are not many explicit

features, etc., use the mental model to drive product

requirements


Comparison – Very Much a Team Effort

• Clients and stakeholders are essential in this process

• Need domain expertise to ensure completeness


Comparison – Gap Analysis

• Ideal – Every task in the audiences’ mental model is served by

content and functionality

• Practical – That is never the case


Gap Type 1 – User Needs Not Supported by Content

• Could be an important oversight in the content of the site

• Could be be an activity not appropriate for web content

Refine Requirements

Find Out What OtherPeople Say

Set TechnologyRequirements Get Proposals

Find Out High-LevelInformation

Find Vendors

Get Input from Peoplewithin Company

Research CorporateNeeds

UnderstandExistingProcess

Determine theROI

Set Requirements

Set FeatureRequirements

Set ReportRequirements

Set DataStorage

Requirements

Set SecurityRequirements

Set IntegrationRequirements

Solicit End-User Input for

Features

Get Buy-Infrom KeyPlayers

Get Buy-Infrom IT

DepartmentFind Vendors

Write Requestsfor Proposals

ReadProposals

Get Input fromOther

Customers

Read VendorMarketingMaterials

DistrustMarketingMaterial

Read ReviewsAttend

Conferences

Explore Web-Based

Solutions

ExploreWirelessSolutions

RefineRequirements

Based onResearch

Research the ProductsResearch the Needs

(Improved)InteractiveDiagram

Super Demo

Product Tour

BusinessSolutions

White PaperDownload

(Improved)Product

Module Page

eBusiness IQTest

Advisor ToolsWizard (future

version)

Partner ProfilesCyber

SeminarsRegistration

CyberSeminars

PackageSolutions

Descriptions

IndustrySolutions

Descriptions

Product LineDescriptions

See HowComponents Relate to

One Another

Customer Listby Product or

Industry

ProductConfigurators



Gap Type 2 – Content Available But No User Need

• Could be extraneous content not worth maintaining (R.O.T.)

• Could be an important way to empower the user

Refine Requirements

Find Out What OtherPeople Say

Set TechnologyRequirements Get Proposals


Find Vendors

Get Input from Peoplewithin Company

Research CorporateNeeds

UnderstandExistingProcess

Determine theROI

Set Requirements

Set FeatureRequirements

Set ReportRequirements

Set DataStorage

Requirements

Set SecurityRequirements

Set IntegrationRequirements

Solicit End-User Input for

Features

Get Buy-Infrom KeyPlayers

Get Buy-Infrom IT

DepartmentFind Vendors


ReadProposals

Get Input fromOther

Customers



Read ReviewsAttend

Conferences

Explore Web-Based

Solutions

ExploreWirelessSolutions

RefineRequirements

Based onResearch

Research the ProductsResearch the Needs


Super Demo

Product Tour

BusinessSolutions

White PaperDownload

(Improved)Product

Module Page

eBusiness IQTest

Advisor ToolsWizard (future

version)

Partner ProfilesCyber

SeminarsRegistration

CyberSeminars

PackageSolutions

Descriptions

IndustrySolutions

Descriptions

Product LineDescriptions


One Another

Customer Listby Product or

Industry




Let’s Look at What We Have

• A diagram depicting the audience’s mental model across the

top, and the company’s supporting material beneath it

• Fuzzy’ user data has developed into a solid, rigorous model

• A foundation from which to build the information architecture


And Now We Can Put It All Together…

TASK ANALYSIS

Initial Discovery


Mental ModelDiagram

Mental Model

Content Audit

Mental Model

Content Model

Align MM & Content


Task Data AnalysisTask DataAnalysis

Mental ModelDiagram

IA &Interaction



Q: So how do we get from the pile of content and features to a meaningful structured experience?


A: Let the mental model guide the way.

How To Develop a High-Level

IA In 2 E-Z Steps:

1. Organize information according to user expectations

2. Label content areas using familiar language


Task-based Information Architecture – Step 1

Mental model super-groups become highest level of navigation

UnderstandWhat Vendoris Doing And

Decide

Research theNeeds

Research theProducts

Make Decision(DecidingFactors)

Implement Train

Home Page



Conceptual groups become the second level

Refine Requirements

Find Out What OtherPeople SayGet Proposals


Find Vendors

Find Vendors


ReadProposals

Get Input fromOther

Customers



Read ReviewsAttend

Conferences

RefineRequirements

Based onResearch

Research the Products


One Another

Understand WhatVendor is Doing

and Decide

Research theNeeds


Make Decision(Deciding Factors)

Implement Train

Home Page

Find VendorsFind Out High-

Level InformationGet Proposals

Find Out WhatOther People Say

RefineRequirements

See HowComponents

Relate To OneAnother



Slotted content and functionality from the Comparison is placed

in appropriate areaFind Out High-Level

Information



AttendConferences


Super Demo

Product Tour

Feature/BenefitDescriptions


Find Out High-Level Information

ImprovedInteractive Diagram

Super Demo Product TourFeature/Benefit

Descriptions


Task-Based Information Architecture – Why Do It?

• Makes certain that your site’s architecture responds to your

visitors’ goals and tasks

• Helps achieve business goals by presenting marketing-

oriented content (e.g., cross-sells, up-sells) in a meaningful

context


Task-Based Information Architecture - Caveats

• It’s a ‘first-pass’ at the information architecture– Deep structures must come from content analysis (Tomorrow)– All of it will need refinement

• Some tasks don’t directly translate to navigation nodes

• Limited in its depth


Things To Remember – And Forget

Remember:

• Everything needs to have a place in the architecture – but not

necessarily only one way to get to it.

• Formality of this process is up to you

Forget for now:

• How content is produced

• How your company is structured

Prioritizing:

What do we do first…second…never?


Prioritize the Features

TASK ANALYSIS

Initial Discovery


Mental ModelDiagram

Mental Model

Content Audit

Mental Model

Content Model

Define the Audience

Align MM & Content


Task Data Analysis

Mental ModelDiagram

Prioritize Features

Content Model


CompetitiveReview


IA &Interaction


Align the MM &Content Model


Step 1: The “Big List”

1. Content Analysis and Content Map

2. Ten people in a room for an hour or two

• Talk through scenarios

• Blue sky

• Focus on what it should be (brainstorming rules)

• General Rule: People don’t have any problem telling you what they

want, as long as they don’t have to make it or pay for it.

• Real Challenge: Choosing which features to build


Step 2: Identify Dependencies and Baseline

• What things must happen first? What are the mandatory

groupings?

• What is baseline? What are the “Must-Haves” that you can’t

launch without?


Step 3: Have Stakeholders Figure Out

• Feasibility: easy or hard, expensive or not, short or long to implement

Rate each item in the list 1 = low feasibility 5 = high feasibility

• Importance: to business, to user

Rate each item in the list 1 = low importance 5 = high importance


Step 4: Graph the Findings

Importance

Feasibility

High importance+Low feasibility =

Watch for new technology

High importance+High feasibility =

Do Now

Low importance+ High feasibility =

Consider

Low importance+ Low feasibility =

Don’t Bother

LOW

HI

HI LOW


Now Let’s BUILD Stuff!!


I nitialDiscovery

AudienceDefinition

Content Audit

Task Analysis

Prioritiztaion

Mental Model

Content Model

Align MM & Content

Define the Audience

Prioritize

IA &Interaction


Iterative Process


Quick Iteration vs. Long Process

• Operating a site – day to day

• Adding features – weekly/monthly launches

• “Big” projects – significant redesigns, yearly/quarterly


Now Let’s BUILD Stuff!!


I nitialDiscovery

AudienceDefinition

Content Audit

Task Analysis

Prioritiztaion

Mental Model

Content Model

Align MM & Content

Define the Audience

Prioritize

IA &Interaction


This is “Business as Usual”- daily/weekly (small & fast)

Mostly “Big Projects,” scaled down for small projects- yearly, quarterly

Interaction Design


Information Architecture and Interaction Design

• IA is about content and the structure in which it is located– How is it organized?– Where is it located?– Navigation and way finding systems

• Interaction Design is about functions, and the flows that

enable the user to accomplish them– What actions can the user do?– Entering and retrieving data– Exposing system capabilities


How Are They Different?

Information Architecture Interaction Design

Architecture Diagram

Organizing Content

Hierarchies and Words

Seek help from librarians

Flow Diagram

Interacting with Systems

Processes and Activities

Seek help from engineers


Common Web-Based Interactions

• Registration

• Web-based Email

• Shopping cart

• Checkout

• Setting up personal web pages, like “My Yahoo” and “My

Netscape”

• Online banking


The Interaction Designer’s Job

• Understand how the user thinks about the tasks at hand

• Show the parts of the system that enable the user to

accomplish those tasks

• Craft the visible parts to convey the right messages and clues


Good Thinking

“Our conscious mind is constantly reducing visual input into patterns….The philosophy is to present the components on the screen as recognizable visual patterns [so that] the user can choose, on a purely pattern-matching, unconscious level, which objects to consider consciously.”

- Alan Cooper, About Face


Principles of Interaction Design

• Controls disappear when they use natural signals that can be

unconsciously interpreted

Interaction

Discoverable

Feedback

Recoverable

Context

Visual Design*

Proximity

Alignment

Repetition

Contrast

*From Robin Williams, Non-Designer’s Design Book



Methods: Flow Diagrams

• Use standard symbols

• Include a Legend explaining the symbols

• Avoid crossing lines

• Include meaningful labels for all lines that need them

• Include error cases

• Follow all pathways to their natural end, OR

• Clearly mark where your flow connects with another flow

• Use good visual design principles

Visual Vocabulary: http://www.jjg.net/ia/visvocab


Methods: Schematics

• Make schematics that correlate to the flow diagram

• Use standard symbols to represent interaction devices

• Show all functions

• Use consistent names and labels across all flows and schematics

• DO NOT include any visual design direction!

• Use call-outs to describe any functionality that isn’t self-explanatory

• Use good visual design principles

• One schematic can serve multiple pages

Prototyping, Process and Patterns


Some Problems With Design Process

• Research is effective and valuable, but never gets

applied to end product

• Communication gaps between research, design and

development

• Architects (or consultants) spending days creating

deliverables nobody ever bothers to read

• “Show me the numbers”


Historically, Page Design Didn’t Scale

• In the olden days, designers would design HTML pages and

put them on a server

• But sites grew...– And grew...– And grew...

• Suddenly, redesigning or adding site-wide features was nearly

impossible

• Everyone clamored for template-based design– Put content in databases, squirt it out through consistent designs

• Today’s dilemma: We need the flexibility of dynamic design,

but the rigidity of templates is often too much


Prototyping Tips

• Try to work in the Web’s native language if possible

• Extremely tight iterations (daily!) serves as high-bandwidth

team communication

• Documentation captures “What we’ve learned,” not “What I

want you to do”

• Avoid the “handoff” – the team refines a prototype through

higher resolution versions, testing frequently


Going Dynamic

• Prototype is built according mental model and architecture

diagrams

• Templates and content components can go through iterative

design

• Changes can be viewed globally and instantly tested


Benefits of Dynamic Sites

• Higher initial development cost, but much lower maintenance

• Separates operations of site from development

• Do more with fewer resources

• Inherent interface consistency benefits user experience


The Process: Before Dynamic Sites

Author

Editor

Copy Edit

Production

Design

QA

Post


The Process: After Dynamic Sites

Author

Editor

Copy Edit

Post

Production Design

Template System

Operations Development




Patterns in Design

• Patterns are abstracted solutions to common problems in context

• Think of a tailor’s pattern for a garment.

• Applicable not only to architecture, but computer science,

corporate organization, and (of course) Web design




• “Text Input boxes should be sized based on expected query

length”

• “For selecting between distinct search options, radio buttons

are most appropriate”

• “HTML submit buttons are more appropriate than image

buttons”

Remember: In Context


A hierarchy of patterns

Knobs

Doors

Walls

Rooms

Buildings

Communities

Regions

An almost infinite number of decisions at this level


A hierarchy of patterns

Radio Button

Forms

Search Interface

Page Layout

Navigation System

Site Architecture

Integration


Patterns and Components

• Group smallest patterns together into either content-inspired or

user task-based components

• Creates a heuristically-derived system of interface Legos

• Can be mixed and matched to create site designs


Content Item Detail

List Input Tabular Data

Components


Standard Page Elements

• Network Nav Bar

• Personalization

• Brand header– Logo– Search– Cobrand– Structured

Navigation

• Topic Path

• Page Footer


Page Types

• Components can be grouped together in any number of ways

to create pages. Pages have distinct types, based on the tasks

that can be accomplished on them.



Self-Describing Content

<?xml version="1.0"?>

<item>

<title>No Doubt Makes Strong Return To Charts</title>

<image rdf:about=”nodoubt.gif">

<description> XML.com features a rich mix of information and services for the XML community. </description>

<link>http://music.com/nodoubt.htm </link>

</item>

Usability Testing


Usability Testing = Easy Validation of Your Designs


I nitialDiscovery

AudienceDefinition

Content Audit

Task Analysis

Prioritiztaion

Mental Model

Content Model

Align MM & Content

Define the Audience

Prioritize

IA &Interaction


Validate


Usability Testing: An Overview

• Protocol development

• Recruiting

• Facilitating

• Analysis


When To Test? NOW!

• Anyone can do user research

• A fast, easy and effective way to evaluate if your

audience can use your product or site

• Start simple: Friends and Family Test

• Only one prerequisite: a semi-working prototype


Recruiting Users

• For a simple test, find 3-4 people similar to your site’s

audience– Friends, family, coworkers from other departments

• Personas should determine your test group

• Start immediately: the better the subjects, the better

the outcome


Recruiting Users

• Determine target audience– demographic/webographic/psychographic

• Seek them out– Existing user base, customer support inquiries, advertise

on existing site– User groups, email discussion lists– Traditional means: classified ads, etc.– Use a recruiter: Charge per user based on how specialized

your population needs to be


Developing the Screener

• A simple script to weed out subjects

• Write 20 questions that narrow in on who you’re after

• Order questions from generic to specific

• Be very clear and specific

• Avoid jargon


Developing a Protocol

• What is your site about?

• What five features are most important?

• Create a list of “tasks”– Two sentence mini-scenario for each feature

• For more focused tests, do a feature prioritization

exercise– Map feature importance with implementation difficulty


More on Tasks...

• Testable tasks should be:– Reasonable– Specific– Doable– Described as end goals– Appropriately sequenced– Not too long, not too short


Running the Test (Mechanics)

• Have the room ready– Computer set up in a generic state– Have appropriate start pages bookmarked

• Make users comfortable– Describe how the test works and what they’ll have to do– Be clear that they are testing a product, they’re not being

tested themselves


Running the Test (Interview Style)

• Ask the right questions– “Describe this.”– “What do you expect?”– “Did that surprise you? Why?”

• Don’t offer help– If a task is too difficult for the user, tell them to stop and

ask them to describe what happened


Logistics

• Record the session with a camcorder arranged to

capture both the screen and user

• Have a partner take notes throughout session

• Convince decision makers of the value of watching the

tests – from coders to marketing to the CEO


What Did You Learn?

• Did the evaluators consistently misunderstand anything?

• Were they ever confused? What were they doing?

• What mistakes were consistently made?

• Which tasks did they have the most trouble with?

• When did they look frustrated? What were they doing?

• How many of the tasks were they able to do?


What Did You Learn?

• Did they do the things that you had expected them to do?

• Did they do things in the order in which you had expected? If not, what

order did they do them in?

• What did they find interesting? What did you expect them to find

interesting, which they did not?

• Did the site meet their expectations? If not, where did it fail them?

• Do you know what their expectations were?

• Did they know what the site is for?


Timing Activity

t –2 weeks Determine test audience, start recruiting immediately

t –2 weeks Determine feature set to be tested

t –1 week Write first version of guide, discuss with team, check on recruiting

t –3 days Write second version of guide, recruiting should be completed

t –2 days Complete guide, schedule practice test, set up and check equipment

t –1 day Do practice test in the morning, adjust guide/tasks as appropriate

t Test (usually 1-2 days, depending on scheduling)

t +1 day Discuss with observers, collect copies of all notes

t +3 days Watch all tapes, take notes

t +1 week Combine notes, write analysis

t +1 week Present to team, discuss and note directions for further research

Usability Test Timeline

How It All Fits Together


Design Isn’t Performed in a Vacuum

• Like project management, a hub in the multi-disciplinary process

• Many disciplines contribute to what the user experiences

Visual Design

DesignContent Strategy

Brand / Marketing

Data Analysis

Web Development

Server Engineering

PM

DatabaseArchitecture


Design in the Organization

• In agencies, typically grouped with “Creative”

disciplines

• In-house, often a part of marketing

• In Web-centered companies, a separate department


Visual Design

• Big Picture thinking

• Strong visualization skills

• Task: To develop a visual language– Colors– Typography– Graphic style


Content Strategy and Writing

• It’s The Content, Stupid

• Visitors interact with your site for the content, not the

design

• Task: To define a voice– Copy guidelines– Style manual– Nomenclature


Brand Strategy and Marketing

• The user experience is a key component of an

organization’s brand

• A user experience can be informed by brand attributes

• Tasks:– To identify brand attributes – To provide market segmentation


Data Analysis and Reporting

• Components of a user’s experience can be measured

through interaction data

• Usability and data analysis often go hand-in-hand

• Task – analyze usage statistics (typically server logs) for

important trends


Web Development and Engineering

• Technologists clue user experience designers in to feasibility

• Web developers know what’s possible on the front end– Help you create flows/schematics

• Server engineers tackle deeper “Can we do that?” questions– How long will a process take? How many hits to the database?

• Database architects will develop schemas that impact the

information architecture


Project Management

• User Experience types tend to work closely with Project

Managers

• Both have “process” focus

• Task – to make sure the project moves forward

smoothly

So Who Does All of This?


• Producer

• Program Manager

• Product Manager

• Project Manager

• Site Manager

• Information Architect

• Interaction Designer

• Designer

• Visual Designer

• Art Director

• Creative Director

• Design Director

• UI Designer

• Human Factors

Engineer

• Usability Engineer

• Content Specialist

• Content Strategist

• Editor

• Developer

• Web Developer

• XYZ “Specialist”

• Creative Integrator

• DBA

• System Specialist

• Engineer

• QA Manager

• QA Specialist

There Are a Million Titles in This Business…


PRODUCER as Leader

• Plans the project

• Manages team

• Creates requirements

documentation

• Takes responsibility for

the project meeting

business and user

objectives

One Title Can Mean Many Things…

PRODUCER as Builder

• Writes HTML,

JavaScript, XML

• Manages delivery of

front-end display

code

• Implements pages

as specified by

design team

PRODUCER as Facilitator

• Receives request

from internal client

• Hires and manages

external design or

development vendor

• Reviews interim

deliverables

• Coordinates

approval cycle


Wanted:

Experienced professional to provide leadership for multiple

sections of the web site. This person will establish a mission for

each section, define business and user requirements, manage

internal and external designers, developers, and copy writers to

launch content and applications supporting the Company’s

business goals. Some hands-on design and development work

required.

What’s the title?

And Many Titles Can Mean the Same Thing…


– Producer– Program Manager– Product Manager– Site Manager– Creative Director

The Title Could Be…


Lead Producer or Product Manager

Creative Information Architect

Visual Designer or Art Director

Research Producer, IA, or Researcher

Implement Developers

HTML/JavaScript/XML coders

Production Artists

A Typical Project Team


This Project

Internal Discovery Producer

Task Analysis

Personas & Scenarios

Competitive Analysis

Model Comparison

Info Architecture

Interaction Design

Prototype

Usability Testing

Researcher, IA

Prod., Team, Stakeholders

Producer

Researcher, IA, Prod. (Stakeholders)

IA

IA, Producer

Team

Researcher, Vendor (Team)

Current State Analysis

IA


www.adaptivepath.com/workshops/firstunion/

Jesse James Garrett <[email protected]>Jeffrey Veen <[email protected]>

Designing the Complete User Experience Day Two Adaptive Path Jeffrey Veen Jesse James Garrett.

Documents

structure http

detailed structure

content modelpeter merholz

prototypespeter merholz

organizationpeter merholz

comoverviewpeter merholz

approachpeter merholz

havepeter merholz