forked from airbnb/anotherlens
/
index.html
370 lines (362 loc) · 19.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Another Lens - News Deeply x Airbnb.Design</title>
<meta name="description" content="A research tool for conscientious creatives">
<meta name="author" content="News Deeply and Airbnb.Design">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<a href="https://airbnb.design" title="Airbnb.Design">
<img id="logo" src="img/newsdeeplyxairbnb.png" alt="News Deeply and Airbnb Logo" />
</a>
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<div id="nav-close" class="close">
<span></span>
<span></span>
</div>
<ul>
<li><a href="https://docs.google.com/a/airbnb.com/forms/d/1K0c4YRKQ2gOa4KQxmyvoBQBhxQ8QrWU_xu3ilurvoLU/edit">Give us feedback</a></li>
<li class="menu-line"><div></div></li>
<li><a href="https://airbnb.design/shadowtolight">Shadow to Light</a></li>
<li class="menu-line"><div></div></li>
<li><a href="https://www.newsdeeply.com/">News Deeply</a></li>
<li class="menu-line"><div></div></li>
<li><a href="https://airbnb.design">Airbnb.Design</a></li>
</ul>
<img id="nav-logo" src="img/newsdeeplyxairbnb.png" alt="News Deeply and Airbnb Logo" />
</nav>
</header>
<main>
<!-- ANOTHER LENS -->
<section id="another-lens">
<h1>Another Lens</h1>
<span class="bi-line">A research tool for conscientious creatives</span>
<div class="div-line"></div>
<p class="large">
How can you design for everyone without understanding the full picture?
</p>
<p>
To help examine how bias influences our worldview, Airbnb Design partnered with <a href="https://www.newsdeeply.com/" target="_blank">News Deeply</a>, a journalism startup dedicated to providing in-depth coverage of the world’s most critical challenges. The end result was the <a href="https://airbnb.design/shadowtolight" target="_blank">Shadow to Light</a> installation, an experience that pressed us to recognize our biases and grapple with our limitations.
</p>
<p>
We believe that both designers and journalists have the responsibility to shine a light on their bias by asking the right questions, seeking conflicting viewpoints, and expanding their lens to build inclusive, global solutions.
</p>
</section>
<!-- GUIDING PRINCIPLES -->
<section id="guiding-principles">
<h2>Three guiding principles</h2>
<p>
Together with News Deeply, our design research team put together a set of guiding principles and exercises. These help designers address skewed perspectives in order to create thoughtful, inclusive work.
</p>
<p>
Our tool, Another Lens, poses a set of questions to help you balance your bias, consider the opposite, and embrace a growth mindset.
</p>
<div class="principle-group">
<img src="img/balance.gif" alt="" />
<h3>Balance your Bias.</h3>
</div>
<div class="principle-group">
<img src="img/opposite.gif" alt="" />
<h3>Consider the opposite.</h3>
</div>
<div class="principle-group">
<img src="img/growth.gif" alt="" />
<h3>Embrace a growth mindset.</h3>
</div>
</section>
<!-- HOW TO APPLY -->
<section id="how-to-apply">
<h2>How to apply them</h2>
<p>
Each of the cards below poses a question intended to shake up your thinking as you design. We recommend picking two or three at a time to reframe your work. You can also read more on the science and art behind each question.
</p>
<p>
While this tool was made primarily for designers, we believe all creatives can apply aspects of it to their work. Next time you find yourself brainstorming, building, or polishing—we invite you to take a moment to challenge your reasoning. Together we can diminish the effects of bias within the creative process.
</p>
</section>
<!-- QUESTIONS -->
<section id="questions">
<div class="question">
<h3>Balance Your Bias</h3>
<p>What are my lenses?</p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Balance Your Bias</h3>
<p>Am I just confirming my assumptions, or am I challenging them?</p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Balance Your Bias</h3>
<p>What details here are unfair? Unverified? Unused?</p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Balance Your Bias</h3>
<p>Am I holding onto something that I need to let go of?</p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Balance Your Bias</h3>
<p>What’s here that I designed for me? What’s here that I designed for other people?</p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Consider the opposite</h3>
<p>What would the world look like if my assumptions were wrong?</p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Consider the opposite</h3>
<p>Who might disagree with what I’m designing?</p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Consider the opposite</h3>
<p>Who might be impacted by what I’m designing?</p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Consider the opposite</h3>
<p>What do I believe?</p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Consider the opposite</h3>
<p>Who’s someone I’m nervous to talk to about this?</p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Embrace a growth mindset</h3>
<p>Is my audience open to change?</p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Embrace a growth mindset</h3>
<p>What am I challenging as I create this?</p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Embrace a growth mindset</h3>
<p>How can I reframe a mistake in a way that helps me learn? </p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Embrace a growth mindset</h3>
<p>How does my approach to this problem today compare to how I might have approached this one year ago?</p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Embrace a growth mindset</h3>
<p>If I could learn one thing to help me on this project, what would that one thing be?</p>
<span>Behind the question →</span>
</div>
<div class="question">
<h3>Embrace a growth mindset</h3>
<p>Do I need to slow down?</p>
<span>Behind the question →</span>
</div>
</section>
<!-- ANSWERS -->
<section id="answers">
<div class="answer">
<div>
<h2>Balance Your Bias</h2>
<h3>What are my lenses?</h3>
<span>Background</span>
<p>
Your lenses are always there, and they influence how you see the world. These could be inherited (race, gender, nationality, e.g.), developed (political views or religious perspectives), or behavioral (How do you approach problems? Whom do you get advice from? Where do you find news?). Everyone has lenses, but not everyone is aware that they do or even what they are. Be explicit about the lenses you apply to any given decision or project. As you work to identify your own lenses, also think through the lenses you might be missing.
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Balance Your Bias</h2>
<h3>Am I just confirming my assumptions, or am I challenging them?</h3>
<span>Background</span>
<p>
Confirmation bias is the tendency to search for, interpret, favor, and remember information in a way that confirms one's existing beliefs. It's very much a human tendency and is particularly strong around issues that are emotionally charged. It's also one of the biggest threats to equitable design and fair reporting. If we seek to confirm or validate an idea, we will certainly be able to do so. As designers, we must constantly examine our own biases, and be honest with ourselves about how our own lenses could bring imbalance to the projects we pursue, the sources we talk to, and the language we use. Write down three things about your background that might be informing your work, and for each thing write down a corresponding assumption that might lead to bias.
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Balance Your Bias</h2>
<h3>What details here are unfair? Unverified? Unused?</h3>
<span>Background</span>
<p>
Be on the lookout for red flags: work that feels too good to be true, designs that are based on the input of very few or very similar sources, or claims that go beyond the evidence already uncovered. If you don't find and address these head-on, your audience will. Show a draft of your work to someone else, preferably someone whose background is different from yours in a key aspect or two, and ask them to point out anything that seems unfair or that might reflect a narrow point of view.
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Balance Your Bias</h2>
<h3>Am I holding onto something that I need to let go of?</h3>
<span>Background</span>
<p>
We tend to hold on to initial evidence more strongly than information we gather later on—and to fit our interpretation of the world around us to match that initial evidence, regardless of what else we might learn as time passes. This is called the irrational primacy effect, and it's hard to shake. Be explicit about what pieces of information you first stumbled across that might have influenced your thinking, and then critically compare this to other evidence you've gathered. The first conclusion is not always the right one or the best one. As you gather more evidence, write down early ideas you might be anchoring on as a way of making sure they don't get too much attention or power.
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Balance Your Bias</h2>
<h3>What’s here that I designed for me? What’s here that I designed for other people?</h3>
<span>Background</span>
<p>
Designing something that meets your own needs is easy, and it can be a great way to start. But recognizing the boundaries of your own perspective is key. When designing a solution, put in the work to reach out to and listen to the people who don't share your perspective—they're also likely to be the people who are the least easy to access. It's worth the trouble!
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Consider the opposite</h2>
<h3>What would the world look like if my assumptions were wrong?</h3>
<span>Background</span>
<p>
Back in the 1980s, psychologist Charles Lord ran an experiment to try and help people overcome confirmation bias—the trick our minds play on us that causes us to highlight information that already confirms what we believe, and ignore information that disproves it. He and his colleagues were able to show that asking people explicitly to “consider the opposite” had a direct impact on overcoming confirmation bias. Never ask questions to validate—work to disprove your assumptions instead. The next time you design a solution, first write down your assumptions and your hypotheses; then write down what you’d see in the world if your assumptions were wrong. Any research you do to inform your work should be focused on helping to find evidence of those things.
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Consider the opposite</h2>
<h3>Who might disagree with what I’m designing?</h3>
<span>Background</span>
<p>
We tend to surround ourselves with people who are similar to us—this is called homophily. It's simply part of human nature; hundreds of studies have been conducted that illustrate how similarity fosters connection. When designing, make sure that you gather input on your solutions not only from people who are similar to you (i.e. your friends and family), but also from those with a wildly different point of view.
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Consider the opposite</h2>
<h3>Who might be impacted by what I’m designing?</h3>
<span>Background</span>
<p>
Be thoughtful about whom you reach out to for insights. Even experts can disagree on why something is happening, or what the right approach is. And of course, many times the best ideas or solutions come from the people experiencing the problem firsthand. Be prepared to broaden your sphere of influence.
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Consider the opposite</h2>
<h3>What do I believe? </h3>
<span>Background</span>
<p>
There is no such thing as an unbiased person. Our beliefs color everything we do, but we're rarely explicit about what those are from the outset. Take time to write down what you believe, even if those beliefs don't feel immediately applicable to what you're designing. The process of making a list of personal beliefs can help you to better understand why you approach problems in the way that you do—and can start to highlight opportunities for growth and additional areas for exploration.
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Consider the opposite</h2>
<h3>Who’s someone I’m nervous to talk to about this?</h3>
<span>Background</span>
<p>
Psychologists Jennifer Lerner and Philip Tetlock study accountability. Their work suggests that people only ever fully push themselves to think critcially when they need to explain their thinking to others who are 1) well-informed, 2) geuninely interested in the truth, and 3) whose views they don't already know. While it's nearly impossible to talk to someone who has all three of these characteristics, challenge yourself to share your approach with someone who has at least two out of the three—and welcome their input.
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Embrace a growth mindset</h2>
<h3>Is my audience open to change?</h3>
<span>Background</span>
<p>
In a "fixed mindset," people believe that they have a set of fixed, immovable traits, and their experiences reinforce these traits. In a "growth mindset," people believe that their traits and abilites can be developed and improved upon, and their experiences are opportunities to learn and become more resilient. How people react to change—whether they're open to it, or resist it—is very much dependent on which mindset they subscribe to. Ensure your design works both for people with a fixed mindset and people with a growth mindset by working to understand where people are, and then meeting them there.
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Embrace a growth mindset</h2>
<h3>What am I challenging as I create this?</h3>
<span>Background</span>
<p>
Design should challenge the status quo, and that's not always comfortable, nor is it easy. Once you have an initial design, ask yourself whether or not the design is helping move your audience forward.
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Embrace a growth mindset</h2>
<h3>How can I reframe a mistake in a way that helps me learn?</h3>
<span>Background</span>
<p>
Mistakes happen. Preparing for them mentally—and recognizing everything you'll be able to learn, even when something goes wrong—can actually help your work to be more thorough and thoughtful.
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Embrace a growth mindset</h2>
<h3>How does my approach to this problem compare to how I might have approached this a year ago?</h3>
<span>Background</span>
<p>
Carol Dweck, a social psychologist from Stanford, formulated the idea of the growth mindset. Put simply: when people believe they can become smarter, they understand that effort makes them stronger—and then put in extra time and effort, which leads to higher achievement. Take a moment to recognize all the ways in which you've grown in the last year, and make sure you're building on all that you've learned as you approach the problem at hand.
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Embrace a growth mindset</h2>
<h3>If I could learn one thing to help me on this project, what would that one thing be?</h3>
<span>Background</span>
<p>
By focusing time on learning, we also end up creating space to shake bias out of our thinking. Research shows that when people are distracted or overwhelmed, they tend to rely on biases even more. Make sure you've carved out time for learning, not just doing, on this project.
</p>
</div>
</div>
<div class="answer">
<div>
<h2>Embrace a growth mindset</h2>
<h3>Do I need to slow down?</h3>
<p>
Design moves fast, and we have to hustle to keep up. But research shows that often when we move fast we rely more heavily on biases. When you slow down and try to be aware of the heuristics and assumptions that allow you to make snap judgements, you can apply a more balanced and reasoned approach to the problems and ideas you're tackling.
</p>
</div>
</div>
<div id="answer-close">
<span></span>
<span></span>
</div>
<div class="share">
Share: <span id="share-link"></span>
<button onclick="copyToClipboard('#share-link')">Copy</button>
</div>
</section>
<!-- KEEP ASKING -->
<section id="keep-asking">
<h2>Keep asking the right questions.</h2>
<a href="Another_Lens.pdf" title="Download Another Lens PDF">Download PDF</a>
<div class="div-line"></div>
</section>
</main>
<!-- FOOTER -->
<footer>
<div id="footer-links">
<div class="social">
<a class="medium" href="https://medium.com/airbnb-design"><span>Medium</span></a>
<a class="twitter" href="https://twitter.com/airbnbdesign"><span>Twitter</span></a>
<a class="instagram" href="https://www.instagram.com/airbnbdesignteam"><span>Instagram</span></a>
</div>
<a href="http://nerds.airbnb.com/">Engineering & Data Science</a>
<a href="/about/">About</a>
</div>
<a class="copy" href="https://www.airbnb.com/" title="Airbnb, Inc." rel="home">© Airbnb, Inc.</a>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>