The IconProcess: A Web Development Process
Based on RUP
Katherine MarshakIconMedialab, Director of Process Development
The IconProcess: A Web Development Process
2Copyright © 2001 – 2002 IconMedialab
Agenda» The legacy of web development processes
– Why this history requires us to change our approach
» Critical process changes needed for web development– Business Strategy– User Experience– How to apply the process
» Key lessons learned
The IconProcess: A Web Development Process
3Copyright © 2001 – 2002 IconMedialab
Software Development ca. 1996
» Iterative development, GUIs, client/server, object-oriented
» Users are internal to the company
» Users receive training in new applications
Your Business
IT/IS
Customer ServiceProduct
Managers
Accounting
The IconProcess: A Web Development Process
4Copyright © 2001 – 2002 IconMedialab
Business ca. 1996
» Suppliers and customers communicate with designated people– Burden for completing transactions is on business’s employees– Manual business processes compensate for inadequate applications
» Strategy, brand not revealed online– Software developers not involved in these areas
Your Business
CustomerService
Customer
Supplier
The IconProcess: A Web Development Process
5Copyright © 2001 – 2002 IconMedialab
The Web ca. 1998
People Developing for the Web
People Talking About the Web
» Web usage increases
» Increased interest in getting something done – not just surfing
» Dichotomy between useful websites and pretty websites emerges
The IconProcess: A Web Development Process
6Copyright © 2001 – 2002 IconMedialab
Business ca. 1998
» Web apps reveal limitations!– Lack business operations to support online ventures– Many holiday shoppers’ gifts arrive late in 1998, 1999
» IT/IS challenged to integrate business strategy & brand into software– Dichotomy between useful websites and pretty websites
Your Business
CustomerService
Customer (B2C)
Supplier (B2B)
The IconProcess: A Web Development Process
7Copyright © 2001 – 2002 IconMedialab
The Early Web Process Heritage
Brand Strategist
The Creative Team The Technical Team
Acquisition Marketer
Information Architect
Technical Developer
Brand Designer
Art Director
Customer Relationship
Marketer
Copy Writer
Media Planner
Graphic Designer
The IconProcess: A Web Development Process
8Copyright © 2001 – 2002 IconMedialab
The IT Process Heritage
System Analyst
Implementer
SoftwareArchitect
The User Interface Team The Technical Team
Integrator
Configuration Manager
User Interface Designer
SoftwareDesigner
Database Designer
System Administrator
Tester
The IconProcess: A Web Development Process
9Copyright © 2001 – 2002 IconMedialab
This Used To Be “Good Enough”
XFile Edit Utilities Window Help! ! " " # $ %
Name:Company:Address 1:Address 2:City: State: ZIP:
What’s changed?What’s changed?
The IconProcess: A Web Development Process
10Copyright © 2001 – 2002 IconMedialab
Business & Software Today
» Websites are increasingly the first choice for interaction – Businesses are exposed like never before– Increasing competition
» Multiple channels opening up – the Web is just the first step – Wireless (cell phones, PDAs), interactive TV…
Your Business
CustomerService
Supplier (B2B)
Customer (B2C)
Competitors
X
X
X
X
The IconProcess: A Web Development Process
11Copyright © 2001 – 2002 IconMedialab
The Cost of Failure» Risk sending mixed messages
– Products and services– Brand– Respect for customers, suppliers, and users
» Poor usability costs – Thousands abandon shopping carts on the Web– Employees waste time searching for information
» Or worse – avoid searching because it is futile!
» Competitors are a click away– 603,367 sites existed in December 1996*– 36,276,252 sites existed in December 2001*
* Hobbes' Internet Timeline Copyright (c)1993-2002 by Robert H Zakonhttp://www.zakon.org/robert/internet/timeline/
The IconProcess: A Web Development Process
12Copyright © 2001 – 2002 IconMedialab
The Web Changes the Rules» Today’s web applications must
– Define or enable COMPETITIVE STRATEGYCOMPETITIVE STRATEGY– Represent BRANDINGBRANDING or IMAGEIMAGE to the customer– Integrate with or become the primary channel for MARKETING MARKETING – Overcome BUSINESS PROCESSESBUSINESS PROCESSES limitations
» The software IS the business
The IconProcess: A Web Development Process
13Copyright © 2001 – 2002 IconMedialab
An Example…
www.metmuseum.org
The IconProcess: A Web Development Process
14Copyright © 2001 – 2002 IconMedialab
Branding
www.metmuseum.org
The IconProcess: A Web Development Process
15Copyright © 2001 – 2002 IconMedialab
Graphic Design
www.metmuseum.org
The IconProcess: A Web Development Process
16Copyright © 2001 – 2002 IconMedialab
Information Architecture
www.metmuseum.org
The IconProcess: A Web Development Process
17Copyright © 2001 – 2002 IconMedialab
Experience
www.metmuseum.org
The IconProcess: A Web Development Process
18Copyright © 2001 – 2002 IconMedialab
Marketing
www.metmuseum.org
The IconProcess: A Web Development Process
19Copyright © 2001 – 2002 IconMedialab
Content
www.metmuseum.org
Marketing
Experience
The IconProcess: A Web Development Process
20Copyright © 2001 – 2002 IconMedialab
How Can We Succeed?» Recognize changing role of software
– Software is the business
» Integrate new, key skills into projects– Add new roles– Add new activities and artifacts
» Add to an already complex process?!– IconProcess codifies web development best practices– Builds upon Unified Process and RUP frameworks– Streamline with Roadmaps for different project types
The IconProcess: A Web Development Process
21Copyright © 2001 – 2002 IconMedialab
The IconProcess Keeps the Key Features of RUP
PHASES
ITERATIONS
Phases & Major Milestones(Dynamic Structure)
Phases & Major Milestones(Dynamic Structure)
The IconProcess: A Web Development Process
22Copyright © 2001 – 2002 IconMedialab
The IconProcess Keeps the Key Features of RUP
PHASES
ITERATIONS
Series of Primary and Supporting Activities
(Static Structure)
Series of Primary and Supporting Activities
(Static Structure)
The IconProcess: A Web Development Process
23Copyright © 2001 – 2002 IconMedialab
The IconProcess Keeps the Key Features of RUP
PHASES
ITERATIONS
IterativeIterative
The IconProcess: A Web Development Process
24Copyright © 2001 – 2002 IconMedialab
IconMedialab’s Revised Process
PHASES
ITERATIONS
Discipline names highlightthe activities’
GOAL or PURPOSE
Discipline names highlightthe activities’
GOAL or PURPOSE
The IconProcess: A Web Development Process
25Copyright © 2001 – 2002 IconMedialab
IconMedialab’s Revised Process
PHASES
ITERATIONS
Business Strategy replaces RUP’s Business Modeling
• New scope and focus
Business Strategy replaces RUP’s Business Modeling
• New scope and focus
The IconProcess: A Web Development Process
26Copyright © 2001 – 2002 IconMedialab
IconMedialab’s Revised Process
PHASES
ITERATIONS
User Experience replaces RUP’s Requirements
• Stronger emphasis on usability, visual design, and
content
User Experience replaces RUP’s Requirements
• Stronger emphasis on usability, visual design, and
content
The IconProcess: A Web Development Process
27Copyright © 2001 – 2002 IconMedialab
Business Strategy
the science and art of using all the forces of a company to define
and execute its plans as effectively as possible
The IconProcess: A Web Development Process
28Copyright © 2001 – 2002 IconMedialab
Business Strategy
Formulate Brand Strategy
Analyze Industry and Enterprise
Define BusinessProcesses
Formulate Business Concept
Evaluate Business Opportunities
Formulate Marketing StrategyDevelop Domain
ModelDesign
Business Organization
[Biz Process Modeling]
[Domain Modeling]
The IconProcess: A Web Development Process
29Copyright © 2001 – 2002 IconMedialab
Business Strategy» Understand external,
competitive environment
» Understand internal strengths & weaknesses
Formulate Brand Strategy
Analyze Industry and Enterprise
Define BusinessProcesses
Formulate Business Concept
Evaluate Business Opportunities
Formulate Marketing StrategyDevelop Domain
ModelDesign
Business Organization
[Biz Process Modeling]
[Domain Modeling]
The IconProcess: A Web Development Process
30Copyright © 2001 – 2002 IconMedialab
Analyze Industry and Enterprise (details)
Business Strategist
Perform Industry Analysis
Perform EnterpriseAnalysis
Industry Analysis
Situational Assessment
CompetitiveAnalysis
SoftwareArchitect
Understand TechnicalInfrastructure
UsabilityEvaluator
Establish Usability Benchmarks
UsabilityBenchmarks
Information Architect
Stakeholder
Business Process Analyst
Understand industry trends
Understand organization& Culture& Strengths& Weaknesses
Understand existing technologies
Perform heuristic analysis on competitive products
The IconProcess: A Web Development Process
31Copyright © 2001 – 2002 IconMedialab
Business Strategy» Identify and evaluate
opportunities
» Choose a venture to pursue
Formulate Brand Strategy
Analyze Industry and Enterprise
Define BusinessProcesses
Formulate Business Concept
Evaluate Business Opportunities
Formulate Marketing StrategyDevelop Domain
ModelDesign
Business Organization
[Biz Process Modeling]
[Domain Modeling]
The IconProcess: A Web Development Process
32Copyright © 2001 – 2002 IconMedialab
Business Strategy» Develop viable business plan
– Mission– Target audience– Value proposition– Product/service definition– Revenue model– Go-to-market strategies– Basic operational needs
Formulate Brand Strategy
Analyze Industry and Enterprise
Define BusinessProcesses
Formulate Business Concept
Evaluate Business Opportunities
Formulate Marketing StrategyDevelop Domain
ModelDesign
Business Organization
[Biz Process Modeling]
[Domain Modeling]
The IconProcess: A Web Development Process
33Copyright © 2001 – 2002 IconMedialab
Formulate Business Concept (details)» Business Concept
is the vision
» Applicable for– Internet– Intranet– Extranet
Business Strategist
Develop BusinessConcept
Validate BusinessConcept
Explore SoftwareSupport
Opportunity Analysis
Situational Assessment
Software ArchitectureDocument (Sketch)
AnalysisModel
(Sketch)
UsabilityBenchmarks
Use-Case Model
(Sketch)
SoftwareArchitect
Stakeholder
Software Architect
Business ProcessAnalyst
RequirementsAnalyst
Business ProcessAnalyst
BusinessConcept
Brand Strategy
Creative Concept Director
» Software is the business
The IconProcess: A Web Development Process
34Copyright © 2001 – 2002 IconMedialab
Formulate Business Concept (details)» More diverse
roles must collaborate
» Creative considerations improve the offering
» Identify enabling technologies
Business Strategist
Develop BusinessConcept
Validate BusinessConcept
Explore SoftwareSupport
Opportunity Analysis
Situational Assessment
Software ArchitectureDocument (Sketch)
AnalysisModel
(Sketch)
UsabilityBenchmarks
Use-Case Model
(Sketch)
SoftwareArchitect
Stakeholder
Software Architect
Business ProcessAnalyst
RequirementsAnalyst
Business ProcessAnalyst
BusinessConcept
Brand Strategy
Creative Concept Director
The IconProcess: A Web Development Process
35Copyright © 2001 – 2002 IconMedialab
Business Strategy» Define key business
abstractions using class diagrams
Formulate Brand Strategy
Analyze Industry and Enterprise
Define BusinessProcesses
Formulate Business Concept
Evaluate Business Opportunities
Formulate Marketing StrategyDevelop Domain
ModelDesign
Business Organization
[Biz Process Modeling]
[Domain Modeling]
The IconProcess: A Web Development Process
36Copyright © 2001 – 2002 IconMedialab
Business Strategy» Business process modeling
– Define processes and operations to carry out business strategy
– Design organization’s structures and roles
Formulate Brand Strategy
Analyze Industry and Enterprise
Define BusinessProcesses
Formulate Business Concept
Evaluate Business Opportunities
Formulate Marketing StrategyDevelop Domain
ModelDesign
Business Organization
[Biz Process Modeling]
[Domain Modeling]
The IconProcess: A Web Development Process
37Copyright © 2001 – 2002 IconMedialab
Business Strategy
Formulate Brand Strategy
Analyze Industry and Enterprise
Define BusinessProcesses
Formulate Business Concept
Evaluate Business Opportunities
Formulate Marketing StrategyDevelop Domain
ModelDesign
Business Organization
[Biz Process Modeling]
[Domain Modeling]
» Brand is the promise of performance
– Users understand the brand over time
– Emotional– Experiential
The IconProcess: A Web Development Process
38Copyright © 2001 – 2002 IconMedialab
Business Strategy
Formulate Brand Strategy
Analyze Industry and Enterprise
Define BusinessProcesses
Formulate Business Concept
Evaluate Business Opportunities
Formulate Marketing StrategyDevelop Domain
ModelDesign
Business Organization
[Biz Process Modeling]
[Domain Modeling]
» Develop approach for offering
– Communicate– Promote– Sell
The IconProcess: A Web Development Process
39Copyright © 2001 – 2002 IconMedialab
How A Project Manager Uses The IconProcess» Phases define major milestones
» Roles define required skill sets– Choose right people for a project– Prioritize skills to develop
» Activities define line items for plans & schedule– Remove unnecessary items– Use of best practices increases confidence– Reduce chances that important elements are missed – Identify dependencies and review points
» Well-defined, repeatable process reduces start-up time
The IconProcess: A Web Development Process
40Copyright © 2001 – 2002 IconMedialab
How A Team Uses The IconProcess» Phases and workflows define project structure and checkpoints
» Role based view of responsibilities
» Activity descriptions define what to do– Steps and techniques based on best practices– Checklist for needed inputs
» Templates and artifact descriptions provide common starting point– Reduce ‘reinventing the wheel’– Encourage consistency– Checklist for issues to address, even if not formally developed
» Unifies team with common vocabulary and goals
The IconProcess: A Web Development Process
41Copyright © 2001 – 2002 IconMedialab
the total impression left by interacting with a system's varied attributes:
features and functional behavior, visual design, content, information layout,
usability, and robustness
User Experience
The IconProcess: A Web Development Process
42Copyright © 2001 – 2002 IconMedialab
User Experience
Prototype & Evaluate User Experience
Define Requirements Develop
Information Architecture
Understand Context of Use
Establish System Scope
Plan & Manage Content
Develop Creative Approach
The IconProcess: A Web Development Process
43Copyright © 2001 – 2002 IconMedialab
User Experience» Understand users and
their tasks
» Use proven HCItechniques
» Personas supplement actor definitions
Prototype & Evaluate User Experience
Define Requirements Develop
Information Architecture
Understand Context of Use
Establish System Scope
Plan & Manage Content
Develop Creative Approach
The IconProcess: A Web Development Process
44Copyright © 2001 – 2002 IconMedialab
User Experience» Define scope with Use
Case Model
» Define non-functional requirements and goals
Prototype & Evaluate User Experience
Define Requirements Develop
Information Architecture
Understand Context of Use
Establish System Scope
Plan & Manage Content
Develop Creative Approach
The IconProcess: A Web Development Process
45Copyright © 2001 – 2002 IconMedialab
User Experience» Detail software
requirements
» Refine use case model
» Review requirements
Prototype & Evaluate User Experience
Define Requirements Develop
Information Architecture
Understand Context of Use
Establish System Scope
Plan & Manage Content
Develop Creative Approach
The IconProcess: A Web Development Process
46Copyright © 2001 – 2002 IconMedialab
Define Requirements (details)
Use-Case Model
ActorCatalog
Use Case
RequirementsAnalyst
Detail a Use Case Manage Dependencies
Structure theUse Case Model
RequirementsReviewer
Review Requirements
Stakeholder
Subject Matter Expert
Review Record
Site Map
Requirements Analyst
Information Architect
Subject Matter Expert
Wireframes
RequirementsAttributes
The IconProcess: A Web Development Process
47Copyright © 2001 – 2002 IconMedialab
User Experience» Organize information
and features for usability
– Site map– Wireframes
» Define navigation and interaction mechanisms
Prototype & Evaluate User Experience
Define Requirements Develop
Information Architecture
Understand Context of Use
Establish System Scope
Plan & Manage Content
Develop Creative Approach
The IconProcess: A Web Development Process
48Copyright © 2001 – 2002 IconMedialab
Develop Information Architecture (details)
Use-Case Model
Use Case
Requirements Analyst
InformationArchitect
Develop Wireframes
Stakeholder
Content Manager
Graphic Designer
Site Map
Develop Site Map
ActorCatalog
CreativeConcept
Content Inventory
User ResearchReport
Business Concept
Wireframes
The IconProcess: A Web Development Process
49Copyright © 2001 – 2002 IconMedialab
Wireframes» Purpose
– Structure pages’ content and navigation
– Define page templates– Exclude visual design
elements
» If not used– Poorly organized user
interface– Suboptimal template design– User interface information in
use cases
The IconProcess: A Web Development Process
50Copyright © 2001 – 2002 IconMedialab
User Experience» Assess content needs
» Organize content inventory
» Develop editorial direction
Prototype & Evaluate User Experience
Define Requirements Develop
Information Architecture
Understand Context of Use
Establish System Scope
Plan & Manage Content
Develop Creative Approach
The IconProcess: A Web Development Process
51Copyright © 2001 – 2002 IconMedialab
User Experience» Define communicative
approach– Aesthetics– Experiential– Sound
» Synthesizes– Business vision– Brand values– Personality – Intended usage– Editorial tone
Prototype & Evaluate User Experience
Define Requirements Develop
Information Architecture
Understand Context of Use
Establish System Scope
Plan & Manage Content
Develop Creative Approach
The IconProcess: A Web Development Process
52Copyright © 2001 – 2002 IconMedialab
Develop Creative Approach (details)
BusinessStrategist
BrandStrategist
Creative ConceptDirector
CreativeConcept
User Research Report
Usability Benchmarks
(from Business Strategy)
Define Key Experiences
Content Manager
Actor Catalog
Business Concept(from Business Strategy)
Brand Strategy(from Business Strategy)
Brand Identity(from Business Strategy)
Requirements Analyst
Develop Visual System
The IconProcess: A Web Development Process
53Copyright © 2001 – 2002 IconMedialab
Creative Concept» Purpose
– Define communicative vision – Identify essential colors,
imagery, and tone– Define key experiences
» If not used– Application lacks coherent
approach from a user’s perspective
– Miss opportunity to develop compelling user experience
Brand Keywords
All of MedMojo’s communication will rest on the foundation of three core values: Objectivity, Innovation & Transparency. In addition, the tone of both the b2b & b2c sites should be guided by the words we have selected to describe the brand’s personality:
• Authoritative• Trustworthy• Un-prejudiced• Cutting edge• Reachable
Through these key words, we will aim to appeal to our users on both an emotional and an intelligent level.
26 April 2001 | IconMedialab
Color - b2c
26 April 2001 | IconMedialab
Objective - 666699
Clinical - BFC4AB
Fresh - DDE2C9
Accessible - CCCCFF
Beautiful - CC99CC
Sensual - 663366
Transparent - FFFFFF
Again, ”Transparent” is the dominant background colour, while the pastels will be used to set the site’s overall tone. ”Sensual” will act as an accent colour. ”Objective is MedMojo’s corporate colour, and will be reserved for the logotype.
Proportional distribution of colours
The IconProcess: A Web Development Process
54Copyright © 2001 – 2002 IconMedialab
User Experience» Prototype user
interface
» Plan and run usability tests
» Poor usability affects the bottom line
– Intranet– Internet– Extranet
Prototype & Evaluate User Experience
Define Requirements Develop
Information Architecture
Understand Context of Use
Establish System Scope
Plan & Manage Content
Develop Creative Approach
The IconProcess: A Web Development Process
55Copyright © 2001 – 2002 IconMedialab
Prototype & Evaluate User Experience (details)
User InterfacePrototyper
Prototype User Interface
Visual Development Guide
User InterfacePrototype
Usability Test Report
Information Architect
Graphic Designer
Use-Case Model
User Research Report
Site Map
Wireframes
End User
Information Architect
Usability Evaluator
Conduct UsabilityTest
Plan Usability Test
ContentInventory
The IconProcess: A Web Development Process
56Copyright © 2001 – 2002 IconMedialab
IconProcess Changes Other Disciplines
PHASES
ITERATIONS
Changes ripple through:Show new input artifacts and
new activities to complete content development, optimizing rich media assets, implementing
business and marketing strategies, etc.
Changes ripple through:Show new input artifacts and
new activities to complete content development, optimizing rich media assets, implementing
business and marketing strategies, etc.
The IconProcess: A Web Development Process
57Copyright © 2001 – 2002 IconMedialab
IconProcess Results By Phase
Elaboration
& Requirements (most significant)
& Software architecture& Information architecture& Prototypes& Usability test results
Transition
& Live product rollout& Implement deployment
and marketing plans& Training& Results measurement& Maintenance
Construction
& Final content, art, rich media assets
& Tested, production ready application
& Deployment plan
Inception
& Business, marketing, branding strategies
& User research& Use case model& Creative concept
The IconProcess: A Web Development Process
58Copyright © 2001 – 2002 IconMedialab
Key Lessons Learned
» Working with creative disciplines
» Any usability testing is better than none
» Streamlining the process is essential
» Don’t forget to build skills!
The IconProcess: A Web Development Process
59Copyright © 2001 – 2002 IconMedialab
Creative Disciplines Expect Flexibility
The IconProcess: A Web Development Process
60Copyright © 2001 – 2002 IconMedialab
Any Usability Testing Is Better Than None» Integrate usability test activities
» Focus on content, structure, interaction
– Do mental models match?– Is navigation effective and
efficient?
» Key selling points– Improve users’ productivity– Increase application quality – Reduce risks
The IconProcess: A Web Development Process
61Copyright © 2001 – 2002 IconMedialab
Use Roadmaps To Streamline The Process» Roadmaps optimize
development– Brochureware– Simple behavior (e.g.,
shopping cart)– Dynamic content
management– Complex systems
integration
The IconProcess: A Web Development Process
62Copyright © 2001 – 2002 IconMedialab
Skills Are Important!
Katherine Marshak, Director of Process Development [email protected] | www.IconMedialab.comwww.IconProcess.comPhone: (636) 530-7776 (866) STL ICONAddress: 700 Goddard Ave. St. Louis, MO 63005
Thank you