-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
381 lines (338 loc) · 15.3 KB
/
index.html
File metadata and controls
381 lines (338 loc) · 15.3 KB
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
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="../img/appcon.png"> <!-- update href to update icon -->
<html>
<head>
<title>Carrier Testing Design Template</title>
<link href="https://fonts.googleapis.com/css?family=Hind:300,400,600,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/home.css">
<script src="vendor/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<script type="text/javascript" src="node_modules/mustache/mustache.js"></script>
<!-- <script type="text/javascript" src="json/data.json"></script> -->
<script src="js/home.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-10273473-22', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="home-container">
<div class="header-links">
<a class="hide" href="https://github.com/goinvo/CarrierTestingDesignTenets" target="_blank">
<p>Code</p>
</a>
<a class="make-icon" href="pdf/carrier_test_report_example_package.zip">
<p>White Paper</p>
<div class="whitepaper-icon"></div>
</a>
<a class="make-icon" href="mailto:hello@goinvo.com?subject=Carrier Testing Reports">
<p>Contact</p>
<div class="contact-icon"></div>
</a>
</div>
<header class="home-header">
<p class="header-title">Carrier Testing Reports<p>
</header>
<div class="banner">
<div class="home-content-container title-container">
<h3 class="home-subtitle">An Open Source Framework for</h3>
<h1 class="home-title">Carrier Testing Reports</h1>
</div>
<div class="scrolling-content validation-container">
<div class="validation">
<a href="#validated">
<div class="validation-item">
<p>Clinician & patient validated</p>
</div>
</a>
<a href="#opensource">
<div class="validation-item">
<p>Designed for humans using any device</p>
</div>
</a>
<a href="#multiorgs">
<div class="validation-item">
<p>Open to all to use and evolve</p>
</div>
</a>
<span class="stretch"></span> <!--to evenly space the objects-->
</div>
</div>
</div>
<div class="home-content-container">
<div class="overview content-chunk">
<p>Genetic carrier testing results are complicated. We typically don't have the expertise to understand our genetic results, let alone know what to do with them. In fact, the results are often too complex for our doctors to interpret.</p>
<p>Based on secondary and user research interviewing over 50 patients and clinical professionals, this framework is a proposed set of design guidelines for delivering digitized carrier testing results in a way that patients and clinicians can feel a sense of understanding and empowerment.
</p>
</div>
<div id="reports" class="example-container content-chunk">
<h2>Report Examples</h2>
<p>
To exemplify the design guidelines and associated research findings,
the most common carrier testing report types have been populated with synthetic data below.
Carrier testing reports will look different depending on who is
being tested, and where they are in the conception or prenatal process. The following
report examples assume that one individual, whether they currently
have a partner or not, has given a sample to be tested as a carrier
for a panel of diseases.
</p>
<ul class="example-list">
<a href="report-individual/index.html?patient=0">
<li>
<img src="img/ind-noncarrier.png" class="example-item example-img">
<div class="example-item description">
<h3>Marisa</h3>
<p>
After deciding to have a baby,
Marisa chose to include carrier testing in her pre-conception
check-up. She tested as unlikely to be a carrier for any
diseases on the panel.
</p>
</div>
<img class="example-item arrow" src="img/arrow.png">
</li>
</a>
<a href="report-individual/index.html?patient=1">
<li>
<img src="img/ind-carrier.png" class="example-item example-img">
<div class="example-item description">
<h3>Oliver</h3>
<p>
A single man curious about his carrier status, Oliver tested
as a carrier for 3 diseases on the panel.
</p>
</div>
<img class="example-item arrow" src="img/arrow.png">
</li>
</a>
</ul>
<p>
A crucial and dynamic aspect of the carrier testing report is that
it incorporates the two sets of results once both partners, or both
the partner and donor, have been tested. The reports below include
combined results for two individuals.
</p>
<ul class="example-list example-list-second">
<a href="report-couple/index.html?couple=0">
<li>
<img src="img/couple-noncarrier.png" class="example-item example-img">
<div class="example-item description">
<h3>Amelia and Benjamin</h3>
<p>
After they were married, Amelia and Benjamin decided to get carrier
testing done together. Their results show that they are both unlikely
to be a carrier for any diseases on the panel.
</p>
</div>
<img class="example-item arrow" src="img/arrow.png">
</li>
</a>
<a href="report-couple/index.html?couple=1">
<li>
<img src="img/couple-onecarrier.png" class="example-item example-img">
<div class="example-item description">
<h3>Caroline, Jasmine, and their donor</h3>
<p>
Caroline and her partner, Jasmine, selected a sperm donor for
Caroline's pregnancy. After testing both Caroline and their
donor, they found out that only the donor is a carrier for 1 disease.
</p>
</div>
<img class="example-item arrow" src="img/arrow.png">
</li>
</a>
<a href="report-couple/index.html?couple=2">
<li>
<img src="img/couple-different.png" class="example-item example-img">
<div class="example-item description">
<h3>Elias and Danielle</h3>
<p>
Elias and Danielle decided to be tested as part of their
wedding preparations. Their results showed that while they are
both carriers for at least 1 disease, they are not carriers for any
of the same diseases.
</p>
</div>
<img class="example-item arrow" src="img/arrow.png">
</li>
</a>
<a href="report-couple/index.html?couple=3">
<li>
<img src="img/couple-samecarrier.png" class="example-item example-img">
<div class="example-item description">
<h3>Candace and Christopher</h3>
<p>
After Candace's prental testing revealed that she is a carrier
for 2 diseases, her partner Christopher decided to get tested
as well. His results show that he is a carrier for 1 of the same
diseases as Candace.
</p>
</div>
<img class="example-item arrow" src="img/arrow.png">
</li>
</a>
</ul>
</div>
<div id="opensource" class="how-to-container content-chunk">
<h2>How to Use This Tool</h2>
<ul class="how-to-list">
<li>
<!-- <div class="how-to-item placeholder-3"></div> -->
<div class="how-to-item description">
<h3>Clinicians</h3>
<p>
Let your management and IT teams know about this tool and how
it’ll help improve your practice and the patient experience.
</p>
</div>
<a class="button" href="pdf/carrier_test_report_example_package.zip">
<p>Download Example Package</p>
</a>
</li>
<li>
<!-- <div class="how-to-item placeholder-3"></div> -->
<div class="how-to-item description">
<h3>Health IT and Developers</h3>
<p>
Leverage the design guidelines and source code to transform your production service to fit
patient and clinician needs.
</p>
</div>
<a class="button" href="https://github.com/goinvo/CarrierTestingDesignTenets" target="_blank">
<p>Use the code</p>
</a>
</li>
<li>
<!-- <div class="how-to-item placeholder-3"></div> -->
<div class="how-to-item description">
<h3>Custom Reports</h3>
<p>
Looking for a carrier testing report or other genomic service designed just for your
organization? Let's work together to create something impactful and beautiful.
</p>
</div>
<a id="validated" class="button" href="mailto:hello@goinvo.com?subject=Let's work together on a genomics project">
<p>Let's work together</p>
</a>
</li>
<li>
<!-- <div class="how-to-item placeholder-3"></div> -->
<div class="how-to-item description">
<h3>Make it Better</h3>
<p>
Many eyes makes genetic reporting better. This open source project
needs your design, engineering, and clinical critique.
Anyone can get involved by providing
clinical or patient-focused feedback, joining the community,
submitting code, and evolving the service.
</p>
</div>
<a class="button" href="https://github.com/goinvo/CarrierTestingDesignTenets" target="_blank">
<p>Participate</p>
</a>
</li>
</ul>
</div>
<div class="u-research content-chunk">
<h2>See the Research</h2>
<p>Over the course of our research (2014-2017), we have interviewed a sample size of:</p>
<div class="sample-container">
<div class="sample">
<div class="sample-item">
<img src="img/clinicians.png">
<p class="sample-number">16</p>
<p class="sample-role">Clinicians</p>
</div>
<div class="sample-item">
<img src="img/counselors.png">
<p class="sample-number">7</p>
<p class="sample-role">Genetic Counselors</p>
</div>
<div class="sample-item second">
<img src="img/researchers.png">
<p class="sample-number">5</p>
<p class="sample-role">Research Scientists</p>
</div>
<div class="sample-item second">
<img src="img/patients.png">
<p class="sample-number">26</p>
<p class="sample-role">Patients</p>
</div>
<span class="stretch"></span> <!--to evenly space the objects-->
</div>
</div>
<h3 class="research-title">Ecosystem Analysis</h3>
<p class="research-description">
As part of the initial stages of the design process, we launched a significant effort
to understand the ecosystem of carrier testing services. This included conducting
scientific literature research, as well as outlining the customer experience, feature
set, and value propositions for the top competitors in the industry to understand what
opportunity gaps exist.
</p>
<h3 class="research-title">Expert Contextual Inquiry</h3>
<p class="research-description">
Through our connections with local medical institutions and clinicians,
as well as a guerilla effort to acquire more industry experts through
social media and survey tools, we conducted exploratory interviews to understand the
ecosystem and problem set. These efforts were two-fold. On the patient
side, we aimed to understand the customer journey of carrier testing for
patients or prospective parents. On the clinician side, we hoped to
outline the workflow of OBGYNs, pediatricians, genetic counselors, and
any other clinicians involed in carrier testing.
</p>
<h3 class="research-title">Usability Testing</h3>
<p id="multiorgs" class="research-description">
After translating insights gathered from literature and exploratory primary
research into version one for multiple projects, we then approached
our interview subjects again to obtain valuable feedback on designs. For
all projects involved, this was an iterative process. User feedback was used
to evolve designs, which were used to gather more feedback, and so on. We
employed the use of few "champion" users, whom we contacted frequently for
shorter cycles of feedback and iteration.
</p>
<h3 class="research-title">Industry Experience</h3>
<p class="research-description">
As a software design consultancy, we have worked with Mt. Sinai Hospital, Personal Genome Project, and
two other leading genomics organizations to design the digital experience for a variety
of genetic testing products. Our one-on-one engagements with some of the top professionals
in the industry have provided essential feedback on clinical feasibility and scientific accuracy.
</p>
<a class="button" target="_blank" href="https://drive.google.com/open?id=0Bz7cDkwBpA67TXN5aHpxQUhOMnc"><p>See Documentation</p></a>
</div>
<div class="limitations content-chunk">
<h2>Design Limitations</h2>
<p>
While this framework accommodates the most common types of autosomal recessive carrier results, it is important to note that not ALL results are currently accommodated. Below are important limitations in the report capabilities.
</p>
<ul>
<li>Sample patient, disease, limitations, and test detail content in the report designs should be specific to your organization, and is therefore synthetic and not intended for production.</li>
<li>Non-autosomal recessive disease carrier status (X-linked, autosomal dominant, mitochondrial, deNovo, etc.) is not supported.</li>
<li>Care team permissions design is to be determined.</li>
<li>Disease detail design is to be determined.</li>
<li>This framework is designed to convey results to patients accompanied by clinician support.</li>
</ul>
</div>
<div class="about content-chunk">
<h2>Who We Are</h2>
<a class="invo-img" data-flickr-embed="true" href="https://www.flickr.com/photos/juhansonin/19534866918/in/photostream/"><img src="https://c7.staticflickr.com/1/552/19534866918_10f8d21825_c.jpg"></a>
<p><a target="_blank" href="http://www.goinvo.com/">GoInvo</a> helps healthcare technology companies design magical software for personalized medicine. We work with organizations such as 3M, Johnson & Johnson, Walgreens, Mount Sinai Hospital, Partners Healthcare, National Insititutes of Health, and Personal Genome Project/Open Humans. We're located in Arlington, Massachusetts.</p>
</div>
</div>
<div class="license-container">
<div class="license">
<p>
Open source design template for carrier test reporting from <a target="_blank" href="http://www.goinvo.com/">GoInvo</a>, 2017.<br>
Licensed under the <a target="_blank" href="LICENSE.txt" target="_blank">Apache License, Version 2.0</a>.
</p>
</div>
</div>
</div>
</body>
</html>