ux as a team sport
TRANSCRIPT
PROJECT HOURS
WorkDamage control
:(
THE EPIC PROCESS FAIL
Collaboration
As designers, we don’t always control the project’s process
But we can choose how we work
FIVE COLLABORATIVE
TECHNIQUES
Why is collaboration
important?
Why is collaboration
important?
KNOWLEDGE
Why is collaboration
important?DESIGN THINKING
KNOWLEDGE
Being involved from the beginning gives me a
greater sense of ownership over a project. I'm not
just implementing a drawing someone hands
me, I'm helping real people solve real problems…M AT T W O N D R A , S E N I O R D E V E L O P E R , A P A R T M E N T T H E R A P Y
…This not only makes me happier in my work, it
also motivates me to make sure every detail is
done just right.
M AT T W O N D R A , S E N I O R D E V E L O P E R , A P A R T M E N T T H E R A P Y
EMPATHY MAPPINGTECHNIQUE #1
FEATURE FIRST
FEATURE FIRST PEOPLE FIRST
Getting teammates with different backgrounds
together was incredibly valuable. We surfaced far
more insights and arrived at more robust
prototype ideas together than any of us could
have done by ourselvesB R YA N R A H I J A , S E N I O R P R O D U C T M A R K E T I N G M A N A G E R , E T S Y
Image from Gamestorming.
Image from “How to Use Persona Empathy Mapping” by Nikki Knox
Empathy maps ftw
5 min Intro
5 min Review user profile
5 min Introduce scenarios
10 min Individually write sticky notes for do/think/feel
15 min Share notes with team
5 min Thematically group findings
15 min Present back to larger group
EMPATHY MAPPING AGENDA
Review user profile
5 MIN
User profile overview
$2456^ fake data
Introduce scenarios
5 MIN
29
EMPATHY MAP SCENARIO 1
Robbi sells her original paintings on Etsy. After a strong year of sales, she decides to create a line of tote bags with her art. She places an order with
a local screenprinter and has to list 5 different totes in her store.
69
Do/think/feel
10 MIN
REGISTERING FOR SPOTLIGHT UX
DO
FEEL
THINK
• See email from FITC
• Look at conference website
• Read speaker abstracts and bios
• Ask manager for budget
• Get company credit card from office manager
• Purchase ticket
• Add event to Google calendar
• How much are tickets?
• Can I convince my manager to let me go?
• Will the speakers be relevant to me?
• Ok, this looks right up my alley
• Nervous. Hate asking manager for budget
• Relieved, conversation was easy
• Excited! Purchased my ticket!
Share and summarize notes
20 MIN
EMPATHY MAPPING
• Establishes people-first approach
• Uncovers pain points and opportunities
• Creates buy-in from team
RESEARCH DEBRIEFTECHNIQUE #2
DESIGNER
DEVELOPERS
PRODUCT MANAGER
ETSY MANUFACTURING
BUSINESS MANAGER
MARKETING MANAGER
ETSY MANUFACTURING
RESEARCH TEAM
DESIGNER
DEVELOPERS
PRODUCT MANAGER
BUSINESS MANAGER
MARKETING MANAGER
Making research insights stick
5 min Intro
20 min Read through transcripts
10 min Write “how might we” statements
10 min Share notes with team
5 min Thematically group findings
10 min Discuss and decide on top priorities
RESEARCH DEBRIEF AGENDA
Read through transcripts
20 MIN
Write “how might we” statements
10 MIN
Share notes with team
10 MIN
RESEARCH DEBRIEF
• Synthesize research and uncover key insights as a team
• Reduce burden of documentation
• Make research results sticky
SKETCH STUDIOTECHNIQUE #3
Include the full team
UX
UI ENGINEER
Keep it focused
Come prepared
A Feature Brief establishes the sketch studio’s priorities
Sketch. Erase. Repeat.
Capture decisions
SKETCH STUDIO
• Iterate & test ideas in real-time
• Build a shared understanding
• Create a sense of ownership
CRITIQUE, OFTENTECHNIQUE #4
Team-wide critiques
Review your designs early and often with a broad team
“Wow, this design looks really nice. You obviously spent a lot of time on this. Unfortunately, we can’t build it.”
When the developer is involved in the process, they
can warn about parts that are harder to implement. B R I A N WA LT E R S , F R O N T-E N D D E V E L O P E R , P I X O
Informal critiques
CRITIQUE, OFTEN
• Get feedback from a broad audience
• Make sure our designs can be built
• Push ourselves to innovate
TWEAK CODETECHNIQUE #5
IT’S OK! YOU CAN DO IT!
TWEAK ALL THE CODE!
I love when designers actively help implement
their vision.L E O N I D G R I N B E R G , D E V E L O P E R , T H E N E W YO R K T I M E S
The right tools
1
Version control
2
designer + developer = awesome
TWEAK CODE
• Iterating a design in code can be hugely valuable
• So. much. more. satisfying.
• Creates a stronger relationship with developers
WORK IN PARALLELPROCESS (BONUS!)
RESEARCH
UX
UI
DEVELOPMENT
QA
Communication
PROBLEM #1
RESEARCH
UX
UI
DEVELOPMENT
QA
RESEARCH
UX
UI
DEVELOPMENT
QA
Iteration
PROBLEM #2
RESEARCH
UX
UI
DEVELOPMENT
QA
RESEARCH
UX
UI
DEVELOPMENT
QA
Documentation. Ugh.
PROBLEM #3
RESEARCH
UX
UI
DEVELOPMENT
QA
WORK IN PARALLEL
• Encourages communication
• Allows you to respond to project needs
• Reduces burden of documentation
A delightful end experience is the fruit of thoughtful
UX, elegant UI, smooth front-end, reliable back-end,
and many caregivers throughout the making processK U A N L U O , P R O D U C T D E S I G N E R , C O C K R O A C H
TECHNOLOGY DOESN’T MAKE PRODUCTS.
PEOPLE DO.
ALRIGHT, STOP
COLLABORATE AND LISTEN
Whatever tool or method you use, let it be one that empowers your team and allows them to be true partners.
