Designing Interactions: Lecture #01

{ Designing Interactions: Introduction }
Youareat: Introduction » Learning Objectives and Outline
Learning Objectives
§  You will be introduced to course outline,
Assessment criteria;
§  Introductory discussion on Design Thinking
Outline
§  Self-Introductions
§  Defining User Centered design
§  Course Outline & Assessment Criteria
§  Exercise
Designing Interactions: Introduction

Let me introduce myself:
Itamar Medeiros
Graphic Designer
Web Designer
Photographer
Interaction Designer
Lecturer
Designing Interactions: Introduction
Youareat: Introduction » Learning Objectives and Outline

7 years in China (between 2005 and 2012)
Untitled, Nanjing Road, Shanghai, 2007

7 years in China (between 2005 and 2012)
Medeiros, I., (2010), Shanghai Walking Tours: The Bund,
retrieved 25 October 2011 from
http://www.flickr.com/photos/china-designative/5061811354/in/photostream/

7 years in China (between 2005 and 2012) with my wife, Fabiane
Medeiros, I., (2010), Shanghai Walking Tours: The Bund,
retrieved 25 October 2011 from
http://www.flickr.com/photos/china-designative/5061198577/in/photostream/

First addition to the family:
Caleb Peng Medeiros (2011)

First addition to the family:
Esther Peng Medeiros (2014)

Local Coordinator for the Interaction Design Association (ixDA) in Shanghai
IxDA, (2010), Facilitating Local Gathering for the Interaction Design Association
(IxDA) in Shanghai in An evening of conversation about Design, Interaction, Work and
Life with Marc Rettig, retrieved 25 October 2011 from
http://www.ixda.org/local/event/25395

Chronicler of all things Design, Technology & Culture
Medeiros, I., (2006-2014), { design@tive } Thoughts on Design, Technology and Culture,
retrieved 25 March 2014 from http://designative.info

Medeiros, I. (2010), Visual Communication in China: “You are here” in
{ design@tive } thoughts on Design, Technology & Culture, retrieved September 1st , 2011
from http://designative.info/2010/11/18/visual-communication-in-china-you-are-here/

Medeiros, I. (2010), Chinglish: Toilet Seats in China are “for weak only” in
{ design@tive } thoughts on Design, Technology & Culture, retrieved September 1st , 2011 from
http://designative.info/2010/04/05/chinglish-toilet-seats-in-china-are-for-weak-only/

Medeiros, I. (2009), Living in China: Shanghai’s Pajamas Sightings in
{ design@tive } thoughts on Design, Technology & Culture, retrieved September 1st , 2011
from http://designative.info/2010/03/25/living-in-china-shanghais-pajamas-sightings/

Medeiros, I. (2012), Chinglish: “Take Away Me”? in { design@tive } thoughts on Design, Technology & Culture,
retrieved May 13th, 2013 from http://designative.info/2010/07/14/chinglish-take-away-me/

Medeiros, I. (2012), Chinglish: “Month Also Know Communications”? In { design@tive } thoughts on Design, Technology & Culture,
retrieved May 15th, 2013 from http://designative.info/2012/04/16/chinglish-month-also-know-communications/

Medeiros, I. (2012), Visual Communication in China: “Visitors, this way”? in { design@tive } thoughts on Design, Technology & Culture,
retrieved May 15th, 2013 from http://designative.info/2010/05/10/visual-communication-in-china-visitors-this-way/

Medeiros, I. (2012), Visual Communication in China: “This is a no-car bomb area”! In
{ design@tive } thoughts on Design, Technology & Culture, retrieved May 15th, 2013
from http://designative.info/2010/04/24/visual-communication-in-china-this-is-a-no-car-bomb-area/

Medeiros, I. (2012), Advertising in China: “Can’t Touch This”! In { design@tive } thoughts on Design, Technology & Culture,
retrieved May 15th, 2013 from http://designative.info/2010/05/31/advertising-in-china-cant-touch-this/

Medeiros, I. (2012), Only in China: High-tech Sandwich Men in { design@tive } thoughts on Design, Technology & Culture,
retrieved May 15th, 2013 from http://designative.info/2008/12/17/only-in-china-high-tech-sandwich-men/

Medeiros, I. (2012), Untitled [Photograph; The Dubai Mall Courtesy Policy Notice,
Dubai (UAE).]

Medeiros, I. (2012), Untitled [Photograph; Pedestrian Crossing Button, Dubai (UAE).]

Introduction:
Collect / Create / Relate / Donate
Collect
Learn from previous
experiences
!
Relate
Consult with peers
and mentors
"
#
$
Create
Explore, compose,
and evaluate
possible solutions
Donate
Disseminating
results
Shneiderman, B. (February 1999), Creating Creativity for Everyone: User Interfaces for
Supporting Innovation, ACM Transactions on Computer-Human Interaction 7, 1 (March 2000),
114-138.
Youareat: Introduction » Collect / Create / Relate / Donate

Dubberly, H. (2005), “how do you design?” retrieved on June 1st, 2010
http://www.dubberly.com/articles/how-do-you-design.html

Clark Publishing. (2011), “Add Some Bunch to Your Playbook” retrieved on July 21st, 2011
http://www.gridironstrategies.com/articles.php?id=85

ISO (2010), “Human-centred design for interactive systems” in Ergonomics of human-system
interaction -- Part 210, retrieved on July 21st, 2011
http://www.iso.org/iso/catalogue_detail.htm?csnumber=52075

IDEO (2011), Design Thinking Process in Design Thinking Toolkit for Educators, retrieved
September 1st , 2011 from http://www.designthinkingforeducators.com/

Brown, T. (2006), Innovation Through Design Thinking in MIT Sloan School of Management’s
Innovative Leader Series, retrieved September 1st , 2011 from
http://video.mit.edu/watch/innovation-through-design-thinking-9138/

Let’s spend some time discussing:
§  How different is Design Thinking practice
from what you’re currently practicing?
Youareat: Relate » “Traditional” Design & Design Thinking
Relate:
“Traditional” Design & Design Thinking

Design Thinkers:
§  Cannot have ideas in the abstract;
§  Use the world as source of inspiration,
not validation;
Inspiration
http://mitworld.mit.edu/video/357
Youareat: Relate » Inspiration

Kuniavsky, M. (2003), Observing the User Experience, Morgan Kaufmann;
1 edition (April 22, 2003)

Design Thinkers:
§  Build to think;
§  Learn by prototyping;
§  Put their ideas through hundreds of iterations;
Ideation
Youareat: Relate » Ideation

Warfel, T.Z., (2009), Prototyping: A Practitioner's Guide, Rosenfeld Media;
1st edition (November 16, 2009)

Design Thinkers:
§  Use Storytelling as framework to
generate ideas
Youareat: Relate » Implementation
Implementation

Quesenbery, W, (2010),
Storytelling for User Experience: Crafting Stories for Better Design,
Rosenfeld Media; 1st edition (April 15, 2010)

Design Thinkers:
§  Help connect the dots
Implementation

Brown, T, (2009),
Change by Design: How Design Thinking Transforms Organizations and
Inspires Innovation, HarperBusiness; First Edition edition (September 29,
2009)

Design Thinking:
§  Is not just about methodology, is just as much
about culture;
§  Is about being inspired and inspiring.
Culture

Kelly, T, (2005), The Ten Faces of Innovation, Doubleday
(October 18, 2005)

The design process is what puts Design Thinking into
action. It’s a structured approach to generating and
developing ideas.
Design Thinking:
Process
Youareat: Collect » Design Thinking » Process

“Design Thinking” “Information Design” “Interaction Design”

Youareat: Collect » Course Outline
Course Outline
Design Thinking (1/3 of the course)
§  Week 01: Introduction
§  Week 02: Discovery “Mode”
§  Week 03: Interpretation “Mode”
§  Week 04: Reflection in Action

Medeiros, I., (2010), People, Tools, Process & Artifacts in User Research
retrieved 5 November 2013 from
http://designative.info/project/user-research/

Contextual Inquiries
Costumer Visit at an Electric Distribution Utility Company to understand the
artifacts produced by Electric Distribution Designers in the Utility Design domain.

Young, Indi. 2008. Contextual Inquiry notes in
Mental Models: Aligning Design Strategy with Human Behavior. New York:
Rosenfeld Media.

Austin Center for Design (2009-2011), Interpretation Session in Starting to think about
the boys on the row, retrieved September 1st , 2011 from
http://www.ac4d.com/2010/10/13/starting-to-think-about-the-boys-on-the-row/

Young, Indi. 2008. Affinity Diagrams in
Mental Models: Aligning Design Strategy with Human Behavior. New York:
Rosenfeld Media.

Ulaszek, J., Winters, B. (2013) ‘Setting Course – Design Research to Experience
Roadmap.’ Presentation at IxDA’s Interaction’13 Conference, Toronto – Canada,
28 February 2013.

PhotoDev (2013), Affinity Diagrams in Contextual Inquiry, retrieved November 26th,
2013 from http://www.adamatorres.com/gallery-project/?page_id=106

Information Design (1/3 of the course)
§  Week 05: Visualizing Data / Processes
§  Week 06: Diagrams ( Swimlane / System
Boundaries) and Models (Mental / Work / Artifact)
§  Week 07: Story Telling (Storyboarding / Customer
Journey Maps / Personas & Scenarios)
Course Outline

Medeiros, I. (2007-2013), Swimlane Diagrams in Data Visualization,
retrieved November 27th, 2013 from
http://designative.info/project/data-visualization/#Swimlane_Diagrams

Kolko, J. (2008), Workflow Model of Getting a Tattoo in INF385T | Methods
of Design Synthesis, Lecture 2: Ethnography, Contextual Inquiry, and Work
Flow Modeling, UT Austin: School of Information

Holtzblatt, K., (2001). Artifact Model of a Car in Beyond the Tower of Babel.,
retrieved September 21st, 2011 from
http://incontextdesign.com/articles/beyond-the-tower-of-babel/

Huang, K. H., & Deng, Y. S. (2008). Chinese Tradition of Tea Drinking Cultural
Model in Social interaction design in cultural context: A case study of a
traditional social activity. International Journal of Design, 2(2), 81-96.

Design for Service (2009), Thinkpublic Comic, retrieved January 9, 2014 from
http://designforservice.wordpress.com/2009/01/20/thinkpublic-comic/

Tassi, R., (2009), “Customer Journey Maps” in Service Design Tools, retrieved January 9, 2014
from http://www.servicedesigntools.org/tools/8

Xavier Llusá
Architect
Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from
http://designative.info/portfolio/design-management/personas-scenarios/

Xavier Llusá
Background
> 48 years-old, married,
male
> Received a BA at Escuela
Superior de Arquitetura de
Barcelona and a masters in
architecture at Universidad
de Bilbao
> Owns a 20-person
architecture studio in
Manhattan
> Intermediate Internet
user, has fast connection to
PC at work and average
cable connection on an IMac
at home
Costumer Needs
> Planning tools
> Proactive communication
> Monitor progress of
projects
> Validation of decisions
Scenario
Xavier just finished the
design of a new upscale
resort hotel to be
constructed in Dubai,
and he wants to be able
to manage the
construction of it
remotely.
Xavier wants to keep the
client informed and
happy about the
progress of construction
and keep the contractor
on track to budgets/
schedules
Since the project needs
the clients approval for
each stage, Xavier has to
confirm by each
milestone of the project
for a position to proceed
Needs
> Planning tools
> Proactive
communication
> Monitor
progress of
projects
> validation of
decision
> Proactive
communication
Features
> Create New Project
> Select files
> Add person to project
> Assign role to project
> Customize reports
> add milestone
> request approval
confirmation
Behavior
Xavier login to his Architecture
PROJECT TRAACKING account
and creates a new online
project.
He selects which files will be
associated with the project
from file browser.
Xavier then adds 2 (two)
people to the project:
Stephanie Powers and Malba
Tahir.
He assigns the role of CLIENT
to Stephanie and the role of
CONTRACTOR to Malba.
Xavier, then, limits Stephanie’s
reports to BUDGET/SCHEDULE
and sets Malba’s reports to
BUDGET/SCHEDULE/
SPECIFICATIONS
Xavier sets the milestones of
the project over the PROJECT
TIMELINE: Malba will only get
a permission to proceed to the
next step after Stephanie’s
approval of the previous one.
Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from
http://designative.info/portfolio/design-management/personas-scenarios/

User Experience Design (1/3 of the course)
§  Week 09: Turning Insights into Action
§  Week 10: Concept Design, Wireframing, Prototyping
§  Week 11: User Validation
Course Outline

Medeiros, I., (2014), In-App Purchase Conceptual Design, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/app-purchase-concept-design/

Chiu, D., Hilhorst, D., (2006), RentAThing, retrieved January 23, 2014 from
http://www.rentathing.org/

Medeiros, I., (2014), Project Collaboration & Tracking App, retrieved
January 9, 2014 from
http://designative.info/portfolio/user-experience/project-
collaboration-tracking-app/

ProtoIO Inc, (2014), Wack-A-Monster, retrieved June 12th, 2014 from
https://showcase.proto.io/share/?id=ea5c5bec-9589-465f-86bd-937b6d982d26&v=1

Medeiros, I., (2014), Cruising & Navigation App for iOS,
retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/
cruising-navigation-app-ios/

Medeiros, I., (2014), Workflow for AutoCAD Map3D, retrieved January 9, 2014 from
http://www.designative.info/portfolio/user-experience/workflow-autocad-map3d/

Youareat: Collect » Assessment Criteria
Assessment Criteria
§  Weekly Research: 40%
§  Reflection-in-Action: 20% (x3) = 60%
Course Outline

Design Thinking (1/3 of the course)
§  Week 01: Design “vs” Design Thinking
§  Week 02: Discovery “Mode”
§  Week 03: Interpretation “Mode”
Course Outline

Youareat: Collect » Discovery
Discovery builds a solid foundation for your ideas,
opening up to new opportunities, and getting
inspired to create new ideas.
Discovery

TED Conferences, LLC, 2011, “Paul Bennett finds design in the details”,
retrieved on July 5th, 2011,
http://www.ted.com/talks/paul_bennett_finds_design_in_the_details.html

Youareat: Collect » Discovery » Understand the Challenge
A clearly defined challenge will guide your questions
and help you stay on track throughout the process.
Discovery:
Understand the Challenge

Youareat: Collect » Discovery » Understand the Challenge
A good challenge is phrased with a sense of
possibility. Make it broad enough to allow you to
discover areas of unexpected value, and narrow
enough to make the topic manageable.
Discovery:

Youareat: Create » Discovery » Understand the Challenge
Discovery:
1.  Brainstorming
Start with a broad
view: ask yourself
why people might
need, want, or
engage with your
topic.
2.  Establish constraints
Make a list of criteria
and constraints for
the challenge.
3.  Framing the Challenge
Based on the thoughts
you have collected,
frame the challenge as
one sentence starting
with an action verb,
such as: “create,”
“define,” or “adapt.”
4.  Create a Visible
Reminder
Post the challenge in
a place that everyone
can see, to be
reminded of your
focus throughout the
process;

Drawing Change (2013), Embracing Diversity – Graphic recording and dialogue , retrieved
November 7th 2013 from http://drawingchange.com/embracing-diversity-with-graphic-recording/

Youareat: Create » Discovery » Define Your Audience
Discovery:
Define Your Audience
A deep understanding of peoples’ motivations and
needs is the best foundation for any design
solution. Engage with the broad spectrum of people
who will be touched by what you design.

Youareat: Create » Discovery » Define Your Audience
Discovery:
Define Your Audience
1.  List contacts
Collect and write
down the people or
groups that are
directly involved in or
reached by your topic.
2.  Think More Broadly
Add people or groups
who are peripherally
relevant, or are
associated with your
direct audience.
3.  Build an Overview
Think about the
connections these
people have with your
topic. Create a visual
overview of those who
you consider to be your
main audience, as
opposed to more
peripheral contacts.
4.  Create a Visible
Reminder
Keep a map of the
people involved in a
visible place for you
to revisit over the
course of the project.

Chances are good that you already have some
knowledge about the topic. Share and document this
knowledge, so you can build on it and are free to
focus on discovering what you don’t yet know.
Youareat: Donate » Discovery » Share What You Know
Discovery:
Share What You Know

Youareat: Donate » Discovery » Share What You Know
Discovery:
Share What You Know
1.  Share What
you Know
Write down what you
know about the topic.
Use one piece of
information per Post-
it Note, and post
them under the
design challenge. Ask
others for feedback
and discuss any of the
assumptions that
come up.
2.  Define What You
Don’t Know
Write down and share
what you don’t know
or yet understand
about the challenge.
Post these questions
in a different area.
3.  Build on your
knowledge and fill in
the gaps
Group the Post-it
Notes into themes
and use them to plan
your research. Write
down questions you
want to explore.

Youareat: Create » Design Thinking » Exercise
Define the Challenge:
Exercise
Let’s start preparation of our research:
§  A refined Design Challenge
§  A clear Definition of Your Audience
§  A list of your research questions and Assumptions

Go to our KISD Space for this course and add the
information related to the challenge you’ve chosen:
1.  A refined Design Challenge
2.  A clear Definition of Your Audience
3.  A list of your research questions and
Assumptions
Itamar Medeiros
http://designative.info/
http://twitter.com/designative
itamar.medeiros@designative.info
Youareat: Donate » Disseminating Results
Donate:
Disseminating Results

Designing Interactions: Lecture #01

More Related Content

What's hot

Viewers also liked

Similar to Designing Interactions: Lecture #01

More from Itamar Medeiros

Recently uploaded

Designing Interactions: Lecture #01