-
Notifications
You must be signed in to change notification settings - Fork 0
/
blocks-example.html
455 lines (372 loc) · 25.9 KB
/
blocks-example.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
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
<!DOCTYPE html>
<html lang='en'>
<!-- Replace above html element with this - <html lang='en' manifest="girleffect.appcache"> -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="custom/img/culture.png">
<title>Girl Effect</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<!--<link href="bower_components/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="content-page">
<section class="navigation__main clearfix">
</section>
<section class="navigation__main clearfix">
<div class="navigation__logo">
<img style="padding-top: 0;padding-bottom: 0;" src="assets/img/LOGO.png" alt="">
</div>
</section>
<section class="mainContent">
<div class="container-fluid">
<div class="row">
<div class="mainContent__tabNavigation">
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-left">
<li class="active"><a class="tabs-parent" href="#tab-creative_development" data-toggle="tab">Creative
Development Research Toolkit</a></li>
<li><a href="#tab-clear_brief" data-toggle="tab"><span class="tab__num">1</span> A clear brief</a>
</li>
<li><a href="#tab-smart_sample" data-toggle="tab"><span class="tab__num">2</span> A smart sample</a>
</li>
<li><a href="#tab-tailored_methodology" data-toggle="tab"><span class="tab__num">3</span>A tailored
methodology</a></li>
<li><a href="#tab-great_stimulus" data-toggle="tab"><span class="tab__num">4</span>Great
stimulus</a></li>
<li><a href="#tab-creative_discussion" data-toggle="tab"><span class="tab__num">5</span>A creative
discussion guide</a></li>
<li><a href="#tab-flexible_fieldwork" data-toggle="tab"><span class="tab__num">6</span>Flexible
fieldwork</a></li>
<li><a href="#tab-thoughtfu_analysis" data-toggle="tab"><span class="tab__num">7</span>Thoughtful
analysis</a></li>
<li><a href="#tab-helpful_debrief" data-toggle="tab"><span class="tab__num">8</span>A helpful
debrief</a></li>
<li><a class="tabs-parent" href="#tab-creative_development_research" data-toggle="tab">What is
Creative Development Research?</a></li>
<li><a class="tabs-parent" href="#tab-when_to_use_creative_development_research" data-toggle="tab">When
to use Creative development Research?</a></li>
<li><a class="tabs-parent" href="#tab-highlights_inspiration" data-toggle="tab">Highlights &
Inspiration</a></li>
</ul>
</div>
<div class="mainContent__body">
<!-- Tab panels -->
<!--tab-creative_development ---START-->
<div class="tab-content">
<div class="tab-pane active" id="tab-creative_development">
<div class="tabMenu">
<div class="pull-left home-btn">
<a href="homepage.html"><span class="btn-text">Home</span></a>
</div>
</div>
<div class="tab-content-wrapper clearfix">
<div class="col-sm-8">
<div class="notice-board">
<p><strong>Lorem ipsum dolor sit amet</strong>, consectetur adipisicing elit.
Alias, voluptate.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Alias, voluptate.</p>
</div>
<div class="panel-with-title-wrapper clearfix">
<div class="panel-with-title col-sm-6">
<h3>Formative Research</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Alias, voluptate.
</li>
</ul>
</div>
<div class="panel-with-title col-sm-6">
<h3>Formative Research</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Alias, voluptate.
</li>
</ul>
</div>
</div>
<h1>The Toolkit</h1>
<h1>8 steps of the creative development research journey</h1>
<p>
The Toolkit provides a guide to the eight essential elements of any successful
creative
development research project, as well as a few exercises and resources to help steer
you
through a successful project
</p>
<h1><i>8 building blocks of creative development research projects:</i></h1>
<img src="assets/img/content/graph1.png" alt="">
<p>
If you are new to research or just fancy some fresh inspiration or new ideas then
this
toolkit should have something for you.
</p>
<p>Good creative development research is the product of collaboration and common sense.
Many
of
the things we describe will come naturally to you. Use this guide to help you
through
the
bits that are harder; it’s a resource for you when you need it, not a drill that
must be
followed step by step.
</p>
<div class="badge-list">
<p>6 things to bear in mind for concept development research</p>
<ul>
<li>
<span class="badge-num">1</span>
<strong class="badge-title">Be prepared for ideas to fail and to learn from
failure</strong>
<p>At this stage, you’re still exploring the basic hypotheses – you’re
trying to
understand what will potentially work for your audiences, before you
bring
your creative to life. At this stage you may learn just as much from why
a
creative route doesn’t work, as from why it does.</p>
</li>
<li>
<span class="badge-num">2</span>
<strong class="badge-title">Test your assumptions and don’t be wed to
them</strong>
<p>You have a brand strategy, based on clear insights from formative
research -
but you are still learning. This research is an opportunity to confirm,
challenge, reframe, refine and deepen your existing knowledge and
hypotheses. For example, we may know that girls want more opportunities
to
hear from girls their own age, but when we test a concept that lets them
do
this directly we may learn that in fact they want the sharing to be
mediated
by an expert figure. Good formative research identifies opportunities
for
change; good concept development research shows which opportunities are
most
achievable.</p>
</li>
<li>
<span class="badge-num">3</span>
<strong class="badge-title">Test your assumptions and don’t be wed to
them</strong>
<p>You have a brand strategy, based on clear insights from formative
research -
but you are still learning. This research is an opportunity to confirm,
challenge, reframe, refine and deepen your existing knowledge and
hypotheses. For example, we may know that girls want more opportunities
to
hear from girls their own age, but when we test a concept that lets them
do
this directly we may learn that in fact they want the sharing to be
mediated
by an expert figure. Good formative research identifies opportunities
for
change; good concept development research shows which opportunities are
most
achievable.</p>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="notice-board-cloud">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eum facilis fugiat
molestiae optio repudiandae!</p>
</div>
</div>
</div>
</div>
<!--tab-creative_development ---END-->
<!--tab-clear_brief ---START-->
<div class="tab-pane" id="tab-clear_brief">
<h1>1. A clear brief</h1>
<img style="float: left" src="assets/img/content/u600.png" alt="">
<p>Define your challenge and objectives.</p>
<p><strong>What is it</strong></p>
<p>Traditionally a brief would be defined as “information given to a researcher outlining the
client’s reasons for requiring research” (Association for Qualitative Research). At Girl
Effect
we see this stage as a collective effort to develop clear, focused objectives for the
project.</p>
<p>Getting to a clear, well focused research brief can be a challenging process, and often
involves having challenging conversations at the start of the research. However, it’s
critical to the success of the project and if you get it right - you’ll be able to design a
better methodology and get more helpful insights. </p>
<p>What does it involve</p>
<!--BRIEF Accordion ---START-->
<div class="panel-group" id="accordion_BRIEF" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion_BRIEF"
href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="panel-num">1</span>
<div class="panel-text">The written brief</div>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
aria-labelledby="headingOne">
<div class="panel-body">
<p>Define your challenge and objectives. At its essence, your research brief
comes down to 3 big questions:</p>
<ol>
<li>What are you trying to learn?</li>
<li>How will this learning inform and influence the creative idea?</li>
<li>What would success look like?</li>
</ol>
<p>
Sum up all your thinking into a written document or research brief.</p>
<p>There is a research brief template in the Resources section.</p>
<p>A few practical tips:</p>
<ol>
<li>Keep it simple: a common mistake is to include too much internal detail
which can overcomplicate. Your brief is a starting point for
conversation with people outside of your team or organisation, and
should plainly state your need for research
</li>
<li>A honest brief: try to approach it in a collaborative way, if there are
tough political decisions to be made or choices you’re not sure about –
spell them out in the brief: be clear about what’s unclear.
</li>
<li>Iterate: the brief is your current best thinking on the need and
approach for research, and it should be an evolving document. Leave
space for others to challenge, build on and respond to your brief in
unexpected ways
</li>
<li>Be aware of your own assumptions: remember you’ll also bring all of your
own assumptions to the table. Write them down, see if they contain a
point of view. If not, put them to one side, but just be aware of them.
</li>
</ol>
DOWNLOADABLE FILEEEE
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordion" href="#collapseTwo" aria-expanded="false"
aria-controls="collapseTwo">
<span class="panel-num">2</span>
<div class="panel-text">2. Challenge and refine the brief</div>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingTwo">
<div class="panel-body">
<p>A brief is more than a document. It requires dialogue between researchers and
stakeholders.</p>
<p>To get to the clearest set of objectives it’s important to stress-test and
challenge the thinking you’ve laid out in the brief. You need to check
you’ve
considered all options, that you’re not missing anything and that you have
good
idea of what the top priorities for the research are.
</p>
<p>Need help? A simple way of doing this is to run your brief through a few
filter
questions. There are three key questions to make sure you’re on the right
track.
</p>
<p>See the “3 steps to challenging your brief” exercise sheet</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordion" href="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
<span class="panel-num">3</span>
<div class="panel-text">3. A creative / stimulus briefing</div>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingThree">
<div class="panel-body">
<p>In creative development research it’s vital to understand and immerse
yourself
in the creative work. As a researcher, if you understand the thinking behind
the
creative you’ll have a much better idea of what to look out for and how to
help.</p>
<p>There are a couple of different ways to get to this: a briefing meeting
between
the teams, a creative briefing document (or any background on the creative -
creative see Yegna TV series creative brief), or even interviewing members
of
the creative and production to team about the idea(s).</p>
<p>Questions you might cover with the creative team include:</p>
<ul>
<li>The rationale behind each creative idea</li>
<li>What hypotheses the team have about how the idea should work</li>
<li>What reactions and opinions are they hoping to get from audience</li>
<li>What they’re unsure about or decisions they’re hoping research can
inform
</li>
</ul>
<div class="panel panel-default">
<div class="panel-body">
<p><strong>Tip:</strong> we recommend the researchers write <strong><i>a
creative hypothesis sheet</i></strong>
which covers key questions and hypotheses to explore around the
creative ideas. This is a useful way of ensuring alignment with the
creative team ahead of the research. Later in the process it will
also help you design a guide and do better analysis. <strong><u>See
the ’8
questions for developing a hypothesis checklist’ exercise
sheet.</u></strong></p>
<p>
<strong>Be aware of your own biases</strong>: you may find, as a
researcher, that you
have your own (sometimes strong) reactions to the creative ideas.
Think about why you’re reacting this way – what assumptions and
hypotheses are you brining to the research? Put these aside, but be
aware of them as you continue the process.
</p>
</div>
</div>
DOWNLOAD FILEEEE
</div>
</div>
</div>
</div>
<!--BRIEF Accordion ---END-->
</div>
<!--tab-clear_brief ---END-->
<div class="tab-pane" id="messages-v">Messages Tab.</div>
<div class="tab-pane" id="settings-v">Settings Tab.</div>
</div>
<!-- Tab panels END-->
</div>
<div class="clearfix"></div>
</div>
</div>
</section>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/custom.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<!--<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>-->
</body>
</html>