Collaborative Design Lecture by Chris R Becker

® 2021 Chris R. Becker + Growic llc
Collaborative Design
A Review of the design process and
collaboration tools
1
w/ Chris R. Becker
07/20/2021

Today’s Workshop
Agenda:
● Part 0: Introductions
● Part 1: Collaboration + Design
● Part 2: Collaboration tools
○ Physical Tools + Digital tools
● Part 3: Collaboration + Communication
Jira + Slack + Figma + Zeplin + other integrations
● Part 4: Activity: Mindmap on Collaboration
○ Interactive collaboration practice using Figjam.
○ Design requires collaboration as all design is a feedback loop
● Part 5: Q/A on collaboration
2

Introductions
A short icebreaker
3

A customised learning
and growth Platform
Providing customizable programs for educational,
personal and career development. We aim at
creating a customized learning system to help
people get knowledge and skills they need faster
and in a more effective way. The goal of the Growic
Platform is to deliver knowledge and skills to people
affordably and effectively.
4
https://growic.com/

Workshop Facilitator: Chris R. Becker
Product Designer/Educator/Author
• Current Role: Freelance Product Designer / Educator
• Worked with: Netflix + 2U, Trilogy Education Services,
NASA/JPL, Possible Worldwide, TBWA/Chiat Day, Tool
of North America, Saatchi & Saatchi, Phenomenon, Two
Bit Circus, and A Hundred Years,
• Taught at: UCI, UT Austin, UCLA, LMU, Studio Arts, GA
&
Art Center College of Design
• Projects: Apple, Nissan, VW, Toyota, EA, Mattel,
Hyundai, Starwood Hotels, Men’s Wearhouse, CB2, &
LAUSD, & other startups.
• Author: Learn Human-Computer Interaction
• Background:
BFA:Graphic Design - Colorado State University
MFA: Media Design - Art Center College of Design 5

My Work
6

I make things better through teamwork
Bad
Award
winning
http://www.vulcanproductions.com/ 7

Collaboration + Design
The role collaboration plays in the design process
8

What is collaboration
col·lab·o·ra·tion
/kəˌlabəˈrāSH(ə)n/
noun
1. The action of working with
someone to produce or
create something.
9
https://learn.g2.com/design-collaboration-workflow

What is Design
de·sign
/di-ˈzīn/
noun
1. To create, produce,
fashion, execute, or
construct according to
a plan.
10
https://eames.com/en/articles/eameschair

“Many hands make light work” – Proverb
11
Collaboration...
https://romesentinel.com/stories/amish-barn-raising,59102

Double Diamond Design Thinking Process
12
https://medium.com/good-design/visualizing-the-4-essentials-of-design-thinking-17fe5c191c22

Design + Collaboration can be messy
13
Collaborative + Human Centered
Design Research

Maslow’s hierarchy of Human Needs
14
https://en.wikipedia.org/wiki/Maslow%27s_hierarchy_of_needs
Abraham Harold Maslow in his 1943 paper
A Theory of Human Motivation
C
O
L
L
A
B
O
R
A
T
I
O
N

Manfred Max-Neff Fundamental Human Needs + Collaboration
15
Participation
(community)
Affection
(Love)
Idleness
(day-dreams)
Leisure
(rest)
Subsistence
(Nutrition)
Protection
(Shelter)
Creation
(creativity)
Understanding
(empathy)
Internet
Wifi
Transport
Technology
Freedom
(Movement + Thought)
Identity
(self worth)
Collaboration
21st century needs
https://en.wikipedia.org/wiki/Manfred_Max-Neef%27s_Fundamental_human_needs
@ChrisRBecker 2021

Collaborative Design
16
Collaboration
+ Teamwork
Empathy
+
Critical
Thinking
Communication
+
Feedback
Problem
Solving
Compassion
+
Contribution
Creative
Collaborativ
e Problem
Solving

® 2021 Chris R. Becker + Growic llc 17
HUMAN CENTERED DESIGN

HUMAN CENTERED DESIGN
THE INTERNET
=
COLLABORATIO
N ENGINE

Collaboration is a superpower of organizations
19
Collaboration
Feedback
UX/HCD Design
Need Finding
Qualitative data,
Human Centered
Research,
Design Thinking,
Surveys, User
Interviews, UX,
UI, Interaction
design, etc.
UX/Business
Analyst Need
Finding
Quantitative data,
Management,
Profit and loss
(P&L), Key
Performance
Indicators (KPI’s),,
Return-on-
investment (ROI),
Objectives and
Key Results
(OKR’s)

• Agree on the hierarchy of needs we
intend to solve.
• Define clear actionable set of
business outcomes.
• Create laser focus to enable design
team to effectively arrive at the best
solution.
• Share in the creation of solutions
Collaboration can create a shared understanding
20
https://lawbydesign.co/design-process/#1

• Synthesize data from multiple
sources
• Extract the most salient takeaways
as they apply to your design
direction.
• Allow teams to distribute the
understanding of their users
• Distribute empathy
21
Collaboration can help teams understand their users
https://www.cosmetica.marketing/en/blog/how-consumers-think.html

• Reveal a set of early user stories
that will inform our concept phase
so we can maximize freedom.
• Generate big ideas at the outset of
the design process before we get
into less flexible stages of design
during production.
• Socialize and democratize the
ideation process.
• Have fun making as a team.
Collaboration can allow teams to be creative together
22
https://twitter.com/the_ink_factory/status/920326076504649728/photo/1

The Forces of Collaborative Creativity
23
1. Empathy 5. Invention
2. Self-Discovery
4. Cohesion
3. Realization
Understanding others + practicing
human-centered design.
Understanding your own skills
and how they can help a team.
Satisfaction in creating and solving problems as
team. Getting farther on ideas together.
● Mutual Trust + Respect
● Vulnerability
● Shared Vision and Values
● Requires interdependence
● Tight culture
● long term relationships
● Generation of new ideas as a group
● Empowers the team to work
Creating a collective purpose, sharing skills
and tools as a team.
Combining and amplifying each others
ideas, plus one to move ideas into new
spaces of innovation.
● Sharing tools
● Sharing time+space
● Individual ideas + Group Ideas
● Combination skills
Collaboration Conditions
* adopted from Peter John Comber’s Book: The forces of collaborative creativity

Collaboration Tools
24

Teleconferencing
/ Creative Tools
Shared Notes/
Knowledge Sharing/
Documentation Tools
Prototyping/User
Testing Tools
Role / Skill tools /
Communication Tools
Product
Management /
Scheduling /
Finance Tools
Project Management/
Scheduling/Task Tools
https://www.researchgate.net/figure/Collaborative-Software-Development-Analysis-Framework_fig1_4369370

Lots of Collaboration tools
Comms Creativity
Physical
Digital
Project Management Feedback/
User Testing
letters
Sticky-notes
Phone
SMS/ Messaging Software
(Slack, imessages, others
Teleconference
(Zoom, google meetup, Teams, etc.)
Office design
Conference rooms
team dynamics
Location
Sticky-notes
White boards
Paper/Pens/Scissors/Tape/Glu
Printers
Collaborative Creative software
(Browser based: Figma, Sketch, InVision, Adobe XD,
Google Drive, etc.
Collaborative Whiteboarding
software
(Miro, Figjam, Mural, Mindmap, InVision Freehand, etc)
Collaborative Inspiration
software
(Pinterest, InVision, Houzz, etc)
Recording
Photos
Posters / Sticky-notes
Code / Version control
(Git/GitHub, Platform code, staging, etc)
Writing
(Google Docs, Office 365, Notes, etc)
Agile Product Management
software (Jira, Trello, excel. etc)
Social Media
(Facebook, Twitter, Snap, TikTok, etc.)
Writing
email
Project Management software
(Basecamp, Asana, monday, smartsheets, excel. etc)
Testing + Data
(Google Analytics
Interviews
Resource Management software
(Team Gantt, Float, MS Projects, excel. etc)
Supply Chain software
(IBM, Tensoft, Quickbase, excel. etc)
* not a comprehensive list
26

Collaborative Creative Software
Browser Based Platform Agnostic / Cloud Platform
+
Primary Goal: UI Design Systems + Prototyping Software + Collaborating on same file
Figma + Mirror
App Prototyping
Sketch InVision Cloud
Prototyping
Adobe XD +
Cloud Prototyping 27
* Demo example
Competitors

Collaborative Whiteboarding Software
Browser Based Platform Agnostic / Cloud Platform
Primary Goal: Team Brainstorming / Group Whiteboarding
Figma +
FigJam
Miro
Mural
InVision Cloud
Freehand
28
Competitors
* Activity
example

Collaboration + Communication
The collaboration process supported by tools
29

Collaborative Tools Process
Collaborative tools to support collaborative software design + Development
30
1. Product Management Tasks > 2.Slack Team Discussion > 3. Google Drive share resources > 4. Figjam / Figma (design + Prototype > 5. Maze.co to user test a prototype > 6.Zeplin to Deliver Assets to Developers > 7. Create and Review PR’s (pull requests) to code base > 8.
Deploy solution > 9. Repeat

Collaboration Tools
31

Miro Collaboration
Agenda:
Part 1: Intro Icebreaker
Hello My Name + My Location is...
Part 2: Collaboration Conditions
Collectively think together on the condition
necessary to make collaboration successful.
Part 3: Collaboration Mindmap
Part 4: Collaboration Condition Voting
32
ACTIVITY
~ 20 mins
https://miro.com/welcomeonboard/
V1dyZk9vSkhpczNTT0NSUTE4TmNZU2l6ZHdJZ
ENWUkFCTFJ0em1tN1UzWFF5ZkV3TmNMT1p2
akhpY0I3RXNpQ3wzMDc0NDU3MzQ2MTI2NTAy
NzE0
Figjam: Access Link

Questions + Answers
Open question from the participants
33

Thank You: Chris R. Becker
Follow me
34
https://workingnotworking.com/11759-chris
https://cbecker.medium.com/
https://dribbble.com/crbecker1
https://www.behance.net/crbecker1
https://www.chrisrbecker.com
Website
https://www.instagram.com/crbecker1/
https://www.linkedin.com/in/chrisrbecker/
https://www.figma.com/@cbecker
https://twitter.com/cbecker
https://vimeo.com/cbecker
My book:
http://learn-hci.com/

The End.
Thank you

Collaborative Design Lecture by Chris R Becker

Recommended

Recommended

More Related Content

Similar to Collaborative Design Lecture by Chris R Becker

Similar to Collaborative Design Lecture by Chris R Becker (20)

Recently uploaded

Recently uploaded (20)

Collaborative Design Lecture by Chris R Becker