Intent

I began by listing the methods currently used in the Graphic Design curriculum and then compared it to a generalized design process. As I began to refine, I tried to develop a clear chart showing not only when the methods are integrated into the design process, but what students were getting from the methods.

After a discussion with Andrew Whitcomb (fellow MGD classmate who is working with a mega-list of methods for his thesis), the idea to integrate a guiding framework into my analysis came about. The concept of working with a framework, in this case Bloom’s Taxonomy of Educational Objectives, is that the structure will be a constraint. I chose Bloom’s Taxonomy because it is commonly used in measuring student competencies — what student’s are getting from the methods.

[/one_half_first]

[one_half_last]

Outcomes

You can view the working document using [button link="http://www.jayvaglio.com/wp-content/uploads/2012/02/Mapping_DesignProcess-Methods1.pdf"]PDF[/button]

[/one_half_last]

[/box_white]

About the Workshop

[one_half_first]
Context
Brainstorming Design for Health: Helping Patients Utilize Patient Generated Information on the Web
Seattle, Washington
40 workshop participants / 630 conference attendees

[/one_half_first]

[one_half_last]
Topic Details
I am in a group that is brainstorming resolutions, solutions, opportunities, challenges, etc. on the the topic of, “Working with “lay” concepts and language and their alignment with complex medical issues”.

Here is a link with the full listing of collaborators and outline for the workshop:
Link to Details
[/one_half_last]

[/box_white]

[box_white]

Workshop Experience

[one_half_first]
Outcomes

• Define of patient-generated information on the Web
• Gain insights from Paul Wick’s experience via a Skype presentation and discussion about patientslikeme.com
• Develop a scenario describing the problem(s) that the group wants to address
• End-of-Day | (1) A concrete design artifact–A use case scenario that illustrates the use of the artifact; (2) Specific challenges around the group’s topic

[/one_half_first]

[one_half_last]
Reflection
The workshop was a great opportunity to connect with others interested in designing for health. The various stakeholders in the workshop made the difference in my experience. Working alongside a doctor, designers, health researchers, etc. allowed our brainstorming to be holistic in our short window of ideation. The representation of doctor and patient in the same group allowed for empathy and understanding to be balanced in perspective. The group was full of highly qualified, enthusiastic individuals—it was an honor to be a part of the collaborative experience.

[/one_half_last]

[/box_white]

Process Methods

Map/Diagramming
• Concept mapping
• Knowledge map
• Context mapping
• Thought Map Exercise
• Map/diagram of total system
• Experience mapping
• Interaction mapping
• Experience schema
• Activity diagrams
• System touchpoints



Flow Diagrams

• Service and interactive flow diagrams
• Task flows
• Flow chart
• Click stream
• User paths
• Sitemaps
• [representation of time-based or spatial sequencing]



Context-Assessment

• Brand audits
• Brand Positioning
• Competitive Analysis
• Repositioning exercises




• User analysis
• User experience [digital & physical]
• User-assessment methods
• User experience audit
• User readiness analysis
• User description
• Profile demographics
• Personas
• First-person experience




• Observation
• Survey
• Site survey
• Subject studies
• Documentation {assuming photography}
• Interviews
• Briefs



Ideation

• Brainstorming
• 2D, 3D, 4D ideational sketching
• Annotated panoramas/tableaus
• Speed date



Other

• Mood boards
• Strategy and architecture
• Priority List
• Exhibition design

[/box_white]
[/one_half_first]

[one_half_last]

Recommended

[/one_half_last]

[one_half_first]
[box_white]

Prototyping

Mocking-Real Use
• Proxy prototypes
• Propositional prototype
• A basic time-based interactive visualization
• Service prototyping {no description}
• Interface prototype
• Interactive prototype
• Typeface applied to network TV broadcast station
• Viral video
• Responsive prototype



Demonstration

• Storyboards
• Spatial sequencing
• Narrative
• Scenarios
• Time representations
• Activity Scenarios
• Animation [or scenario]
• Wireframing
• Static-click through
• Animation scenarios
• Animation demo
• Diary or Journal
• Instructions or a Recipe
• language and image narratives
• Exchange scenarios
• Activity scenarios
• Wireframing
• Video sketching




Modeling

• Physical modeling
• 3D rapid prototyping
• Paper prototypes
• [linear paper prototypes ordering events/objects]
• Modeling interaction
• Organizing information



Action/Applied

• Viable prototypes
• Fully prototype
• Fully-functional prototype

[/box_white]
[/one_half_first]

[one_half_last]

Recommended

[/one_half_last]

[one_half_first]
[box_white]

Analysis

Reflection
• Process books
• Visual essays
• Authored journals



Testing

• Potential users can test it {end-user testing}



Framing/Explanation

• Rules [sets threshold conditions that must be met and that define parameters for the experience]
• Project briefs
• Project Definition

[/box_white]
[/one_half_first]

[one_half_last]

Recommended

[/one_half_last]

[one_half_first]
[box_white]

Potential

Material Integration
• focus on the integration and frequent use of diverse and new materials, tools, and technologies.




Tools
• Grid systems
• Quadrant diagram




Concepts
• Information organization
• User guidance/feedback
• Apply core methodologies and vocabulary relevant to Mobile interaction

[/box_white]
[/one_half_first]

[one_half_last]

Recommended

[/one_half_last]

[box_white]

The Louder Echo | Chapter One

This shift from broadcast to interactie is the cornerstone of the N-Generation. They want to be users—not just viewers or listeners. p.4

What do kids do with computers?
N-Geners use if for:

1. Entertainment
2. Learning
3. Communicating
4. Shopping
5. Manage personal finances, fact check, organize protests, etc.

p.5

By necessity, cyberspace has become an N-gen playground and hangout. It is a place where they play and have fun. It is a place where kids can be kids. p.8

They cannot be supervised in the traditional sense. Rather they must be given the environment and tools to create and succeed. p.10

[/box_white]

[box_white]

Chapter Four | The Culture of Interaction

10 Themes of N-Gen Culture

• Fierce Independence
• Emotional and Intellectual Openness
• Inclusion
• Free Expression and Strong Views
• Preoccupation with Maturity
• Investigation
• Immediacy
• Sensitivity to Corporate Interest
• Authentication and Trust

[/block_white]

Method Name
Affinity diagramming

Cross the Chasm
Make meaning out of data

Use this method when:
You have a lot of data, and you want to create some form of organization.
You are trying to identify initial themes of patterns.
You ned to abstract the complexity of your research to something more consumable, perhaps by an executive audience.

Process Methods

Map/Diagramming
• Concept mapping
• Knowledge map
• Context mapping
• Thought Map Exercise
• Map/diagram of total system
• Experience mapping
• Interaction mapping
• Experience schema
• Activity diagrams
• System touchpoints



Flow Diagrams

• Service and interactive flow diagrams
• Task flows
• Flow chart
• Click stream
• User paths
• Sitemaps
• [representation of time-based or spatial sequencing]



Context-Assessment

• Brand audits
• Brand Positioning
• Competitive Analysis
• Repositioning exercises




• User analysis
• User experience [digital & physical]
• User-assessment methods
• User experience audit
• User readiness analysis
• User description
• Profile demographics
• Personas
• First-person experience




• Observation
• Survey
• Site survey
• Subject studies
• Documentation {assuming photography}
• Interviews
• Briefs



Demonstration

• Storyboards
• Spatial sequencing
• Narrative
• Scenarios
• Time representations
• Activity Scenarios
• Animation [or scenario]
• Wireframing
• Static-click through
• Animation scenarios
• Animation demo
• Diary or Journal
• Instructions or a Recipe
• language and image narratives
• Exchange scenarios
• Activity scenarios
• Wireframing
• Video sketching



Ideation

• Brainstorming
• 2D, 3D, 4D ideational sketching
• Annotated panoramas/tableaus
• Speed date



Other

• Mood boards
• Strategy and architecture
• Priority List
• Exhibition design

[/box_white]

[box_white]

Prototyping

Mocking-Real Use
• Proxy prototypes
• Propositional prototype
• A basic time-based interactive visualization
• Service prototyping {no description}
• Interface prototype
• Interactive prototype
• Typeface applied to network TV broadcast station
• Viral video
• Responsive prototype



Modeling

• Physical modeling
• 3D rapid prototyping
• Paper prototypes
• [linear paper prototypes ordering events/objects]
• Modeling interaction
• Organizing information



Action/Applied

• Viable prototypes
• Fully prototype
• Fully-functional prototype

[/box_white]

[box_white]

Analysis

Reflection
• Process books
• Visual essays
• Authored journals



Testing

• Potential users can test it {end-user testing}



Framing/Explanation

• Rules [sets threshold conditions that must be met and that define parameters for the experience]
• Project briefs
• Project Definition

[/box_white]

[box_white]

Potential

Material Integration
• focus on the integration and frequent use of diverse and new materials, tools, and technologies.




Tools
• Grid systems
• Quadrant diagram




Concepts
• Information organization
• User guidance/feedback
• Apply core methodologies and vocabulary relevant to Mobile interaction

[/box_white]

First Year Experience

D 104 | First Year Studio

…foundational design concepts and methods representative of creative thought and activity across design and artistic disciplines.

• employ various diagramming and modeling strategies, including concept mapping, representation of time-based or spatial sequences and physical modeling.
• build prototypes and evaluate the success of ideas by making critical judgments against problem criteria and by framing unique critical perspectives.

• focus on the integration and frequent use of diverse and new materials, tools, and technologies.
Process books serve as: evidence of a student’s working process as it applies to research, ideation, and iteration.

3D Prototype, brainstorming, 2-D and 3-D ideational sketching, early/rapid 3D prototyping (investigative, iterative)
Mapping assignment (site-specific, observation/survey/documentation/visualization-driven)
Diagramming, 2-D, 3-D, 4-D ideational sketching
Proxy prototypes
storyboards, spatial sequencing, narrative, and time representations > scenarios
concept/context map
scenario-build supporting rationale
physical modeling
propositional prototype

D 292 | Design History Culture and Context

Evaluate how theories and tools of practice assist designers, planners and decision-makers in creating more effective and
relevant places.

Analyze how the design process and the nature of creativity are informed by an awareness of ideas, methods, and sensibilities
that are borrowed freely from other peoples and cultures

“Meaning-making” is a central tenet of this course, uncovering the value of what each of us understands as interpreters and users
of design.

This student exercise introduces a strategy for reading objects to discern their cultural, contextual and intrinsic values.

D 100 | Design Thinking

Evaluate the usefulness of various design methods.
It is intended that these contemplation exercises will articulate and chronicle the development of an approach of design thought.
The Design Thought Map Exercise

[/box_white]

Sophomore Level Seminars

GD 200 | Graphic Design Theory and Practice

GD 342 | History of Graphic Design

[/box_white]

[box_white]

Triad I | Sophomore 1st Semester

GD 201 | Design, Context, Experience

Refine visual organization skills and form-making processes.
the form of a concept map (see basic schema below), which provides the strategic planning and content framing for various projects throughout the semester. Methods, skillsets, and design principles are considered in relationship with other course work (GD210, GGD217) underway within the Triad 1 framework.

Concept map
The concept map is a series of clear statements and connections diagrammed. Students must understand the connections between the terms and content groupings decided upon. It is not indiscriminate brainstorming.

Experience Book
Students then develop a personal narrative about their object (or related object concept), utilizing image, text / typographic arrangement, and original writing. Visual editing, pacing, image making, and other formal design decisions parallel their notion of the particular experience interpreted in a story form.


- – - -
Methods and principles can be referenced back in studio at particular points in the semester.
concept map visual strategies (3X)
linear paper prototypes ordering events/objects
brainstorming process discussions
Discussion of sequencing options, pacing etc. diagram of “experience schema” due for discussion

GD 210 | Image and Technology

GD 217 | Expression, Making Speech Visible

[/box_white]

[box_white]

Triad II | Sophomore 2nd Semester

GD 202 | Graphic Design Studio II

We will introduce methods, processes and ways of understanding the needs of people as your audience that will help you communicate with them.

…prototypes for both print and virtual objects and will introduce the practice of designing across platforms.

Apply methods of observation, documentation, and representation (site surveys, subject studies, and
activity scenarios)

Develop prototypes and scenarios for user interaction

Structure a system for interaction across multiple media platforms

You will fully prototype the physical game so that potential users can test it.

The mobile game application will be presented as an animation, or scenario, that demonstrates the experience of the game

Storyboarding, Knowledge map, mood board, prototyping, testing (play with prototypes), site map, task flow, wireframes, static click-through, animate scenario, scenarios,

GD 310 | Imaging for Graphic Design II

Please note that the course takes the iterative aspect of 210 and places it within methods and processes to create more complex final projects.

Observational and interpretative methods such as annotated panoramas/tableaus, visual essays, authored journals, interviews, activity maps, etc.

Image-making strategies

Learn and work with observational, documentation and representational methods (site surveys, subject studies, and activity scenarios)

Create a basic time-based interactive visualization

Develop and become proficient with design methodologies including wireframing techniques, production for the web and ways to stage web

Site Survey (settings), Knowledge Map as web experience, Interactive Visualization (reflecting an experience or
scenario) Please note: Subject Study (people); and Activity Map or Knowledge Map (scenarios) have been integrated into 202.

Knowledge map, storyboarding, wireframing, site maps, animation demo and exercise: interaction demo and exercise.

- – - – -

(same – verbatum)

GD 317 | Typography II

Grid systems
[/box_white]

[box_white]

Triad III | Junior 1st Semester

GD 301 | Branding, Interaction Design, and Service Design

Lecture on model methods for Branding, Interaction, and Service Design

The representation should capture (1) attributes of the setting, (2) physical actions that make up the experience, and (3) the mental (objective) and emotional (subjective) aspects of the experience.
• Concept map — emphasizes networks and non-hierarchical structures
• Storyboard — organizes episodes in a deliberate sequence
• Diary or Journal — uses a collection of narratives organized by arbitrary/particular increments of time (ex. day in the life)
• Instructions or a Recipe — uses rich description of actions in an ordered list
• Flow chart — shows a linear ordering of components in cause-effect relationships
• Rules — sets threshold conditions that must be met and that define parameters for the experience

Quadrant diagram, speed date, brainstorming,

There are different models and methods for designing the various functions within the system, which include the following, among others:
Branding … brand audits, mood boards, strategy and architecture, repositioning exercises, language and image narratives, etc.
Interaction design … activity scenarios, personas, user paths, activity diagrams, etc.
Service design … exchange scenarios, system touchpoints, user readiness analysis, service prototyping, etc.

In preparation for designing the brand, interaction or service, you will initially develop a “probe;“ a physical object of your own design that comes in contact with potential users in order to find out something that is critical to your design. For example, a “mock” interactive kiosk in the library could ask students something about their search behaviors. Or a bin in a shopping mall could be used to describe tools that people are willing to share in order to gain access to other tools they don’t have. Or an object that functions like “Mr. Potato Head” could allow people to show how they want to modify something. You will document the interactions people have with your probe for later use in your presentations.

A definition of the user(s) who will undergo this experience (user description, profile demographics, personas, etc.)

Documentation of the probe and findings that resulted from its use

Interaction, brand, and service prototypes, matched to behavioral outcomes

A map/diagram of the total system (or “total project”)

GD 410 | Design for a Networked Society

Language…
…design thinking, process, and making tools for dynamic interactive systems.
touchpoints
information architecture
prototype
scenario

Methodology
• Audience — Who are your users? What type of behavior can you assume or predict?
• Circumstance — What instigates interaction? What factors / actors are at play?
• Timing — When does the interaction occur? How pressed is the person for time?
• Location — Where does the interaction occur? Public, private? Structured,
unstructured?
• Value — Why would someone use the design system? What is to be gained by doing so?
• Visual and interactive language — How does the interface behave? How does
information unfold? How is the system coordinated across media formats?

Methods explored
Context-assessment methods — Competitive analysis, brand positioning, user analysis, and user experience audit.
• Proposal development — Structuring an argument, appealing to all stakeholders, making vision tangible, and delivery.
• Information architecture — Priority list, site map, task flow, and wireframe.
• Interface design— information organization, information coding, user guidance, and feedback.
• Experience Narrative— prototyping, video sketching, storyboarding, and scenarios.
• Production techniques — Flash Actionscript 3.0, HTML & CSS, and AfterEffects.

Project Phases
Phase 1: Conversion Proposal — Teams determine the character of their conversion strategy.
Proposal presentations will outline a design strategy for influencing the user experience of the service, including project objectives and design goals. This phase includes team selection.
Phase 2: Information Architecture — According to the team’s strategy (phase 1), individuals sketch the information architecture across all three media formats. Individuals will refine each other’s sketches in a round-robin process.
Phase 3: Interface Design — According to the team’s strategy (phase 1) and information architecture (phase 2), each team will determine the visual and behavioral language of the system. Team members will assign individual responsibilities for the refinement of the graphics.
Phase 4: Experience Narrative — Teams compose an interface prototype that demonstrates the user’s experience of a specific path through the designed system. The team also composes a value scenario, which integrates the touchpoints of the system into a speculative video-based narrative.
Phase 5: Reflective Documentation — The team will document the project (organized by phase) in the form of a PDF Presentation. Each phase of the presentation will conclude with a written reflection, which describes what the team learned and want to learn more about for each phase of the project.

- – - – -
design experiences which are facilitated across various media formats, or touchpoints

leverage points

affordances of touchpoints

dynamic interactive systems

cognitive, interactive, and affective capability

dynamic interactive system

prototype

scenario

designed system

Methodology
Who are your users? What type of behavior can you assume or predict?
What instigates interaction? What factors/actors are at play?
When does the interaction occur? How pressed is the person for time?
Where does the interaction occur? Public, private? Structured, unstructured?
Why would someone use the design system? What is to be gained by doing so?
How does the interface behave? How does information unfold? How is the system coordinated across touchpoints?

Methods will explore include:
First-person experience, interviews, and observation, service and interactive flow diagrams.
Site map, click stream, wireframe, prototype, and storyboard.
Flash Actionscript 3.0, HTML & CSS, and AfterEffects.
Structuring an argument, making vision tangible, and delivery.

interactive prototype

compose a scenario, which integrates the topics and touchpoints into a speculative video-based narrative

GD 417 | Typography III

Use of grids

Students research, revise and refine their face from Type ii for use in a broadcast (television) context. (real or imagined network)

type-only viral video to promote the print and web editions of their publication
[/box_white]

[box_white]

Junior 2nd Semester, Senior

GD 400 | Advanced Graphic Design Studio

- – - – - – Relief and Aid
Students will demonstrate proficiencies in design thinking, methods and production

Selects appropriate methods and tools

Concept Map, Briefs, Prototypes

- – - – - – The Library: A Museum
Students will demonstrate proficiencies in design thinking, methods and production

- – - – - – HUNT LIBRARY
clear service and interaction design models

touchpoints to develop interaction and services design prototypes.

learning tools and interfaces

…present in a real-life design context.

To understand and apply capabilities of cutting edge technology.

To understand the integration of physical and digital interaction environments.

Develop and produce work that successfully combines physical and digital interaction.

Develop ways of incorporating multiple users in complex social contexts into their design solution.

User analysis and user experience: digital and physical

Exhibition design/experience mapping

User analysis and user experiences

service/interaction, system and touch-points within 4-5 spaces.
Begin scenario building/interaction mapping (physical/digital)

prototyping

Finalize scenario service/interaction.

Begin information architecture: wireframes

Interaction design: information organization, user guidance and feedback

Storyboard of experience narrative

Experience Scenario(video)

Branding and brand positioning will be minimal

- – - – - – Capstone
develop overall communication strategies

select appropriate methods and tools

project definition

project-specific work methods and processes

- – - – - – Capstone
project proposals, project timelines, media rich presentations/documentation

project-specific work methods and processes

communication strategies

Selects appropriate methods and tools
[/box_white]

[box_white]

Upper-level Studio Electives

GD 492 | Design for Information

We will explore multiple methods for addressing the web design problem, to ensure transfer of good design practice to the task at hand.
Principles of Interactive Design

Rather, we are interested in modeling interaction and organizing information.

GD 492 | Interaction, Authorship and Dissemination on the Internet

producing viable prototypes

create a dynamic, fully-functioning, sustainable inventory-based website.

Two “minor” projects require that you create a wireframe and responsive
prototype. These are opportunities to explore web design principles
without having to create a full web site. Wireframing and prototyping
qualify as “best practices” in web development.

GD 492 | Design for Mobile Interaction

existing Mobile applications and apply methods “in the field.”

involve user-assessment methods, information architecture strategies, and production techniques specific to mobile interaction.

»» Apply core methodologies and vocabulary relevant to Mobile interaction.

»» Plan the structure of a Mobile application within a service model.

will prototype a fullyfunctioning mobile application using Flash.

accompanid by a scenario video

We will cover the following Mobile design strategies:
»» Context-assessment methods (First-person experience, interviews, and observation).
»» In format ion Architecture (Site map, click stream, wireframe, prototype, storyboard).
»» Production Techniques (Flash class documents, xml, dynamic text).

Flash prototype, interactive wireframe, visual language, behavioral language,
wireframe structure
scenario construction, production
Apply context-assessment method
Service model
Diagram the context and constraints
Priority list, site map, and click stream
Paper prototype
Storyboard
[/box_white]

The Games Generation

Sesame Street held their attention as it taught them, day after day, year after year. How? It entertained them. It was fun. This connection between fun and learning has been part of half of our worker’s consciousness since their earliest days. p 36
As a result of growing up surrounded by this incredible array of new technologies, the under-40 generation’s minds have literally been altered. “Rewired” is the popular term often used b many whose frame of reference is technology. p 39

Greenfield’s Findings p.42

• Playing video games augments skill in reading visual images as representations of three-dimensional space (representational competence).
• Skill in computer games enhances, and is a causal factor in, other thinking skills such as the skill of mental paper folding (i.e. picturing the results of various origami-like folds in your mind without actually doing them).
• Because no one tells you the rules in advance, video games enhance the skills of “rule discover” through observation, trial and error, and hypothesis testing.
• Video game skills transfer to and lead to greater comprehension of scientific simulations, due to increased ability to decode the iconic representation of computer graphics
• Playing video games enhances players’ skills at “divided attention” tasks, such as monitoring multiple locations simultaneously, by helping them appropriately adjust their “strategies of attentional deployment”

10 Main Cognitive Style Changes in Games Generation

1. Twitch speed vs conventional speed
2. Parallel processing vs. linear processing
3. Graphics first vs. text first
4. Random access vs. step-by-step
5. Connected vs. standalone
6. Active vs. passive
7. Play vs. work
8. Payoff vs patience
9. Fantasy vs. reality
10. Technology-as-friend vs. technology-as-foe

p.51

The Games Generation

Traditional Learning Motivators

• Self-motivation through the content | the student wants to learn the content – takes responsibility
• Fear | fear of not learning, bad grades, etc.
• Love | leading with a carrot
• Greed
• Power
• Lust
• Self-actualization

Un-tapped Learning Motivators

• Ego-gratification
• Winning
• Pleasure
• Fun

J. Christopher Jones

During the same period [1950's] there have been attempts to give more scopre for imagination and creative thought in design under such titles as “creative engineering” and “brainstorming”. p.53

Systematic Design

Systematic Design is primarily a means of keeping logic and imagination separate by external rather than internal means.

The method is intended to have two effects:

1. To reduce the amount of design error, re-design and delay
2. To make possible more imaginative and advanced designs

It is thought that the method can be usefully applied to design problems in any area in which:

1. Large quantities of design information are available, or can be usefully obtained
2. The design team has well-defined responsibilities, can concentrate on development, and is free of routine design work
3. Considerabe departures from existing design are called for.

p.53

[How Jones describes the method is as follows]
SUMMARY

1. To leave the mind free…
2. To provide a system of notation…
1. Analysis | description
2. Synthesis | description
3. Evaluation | description

[place image here]
A detailed summary of each stage follows