-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvesselproduction.html
851 lines (783 loc) · 31.2 KB
/
vesselproduction.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
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
<!doctype html>
<html class="no-js" lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vessel Production - David Yang</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body style="height: 100%;">
<section class="bauhaus-header">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h1>Vessel Production</h1>
Product - Vessel Science
</div>
</div>
</div>
</section>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Origins</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
After the launch of <a href="/vesselresearch.html">Vessel Research</a>, we approached <em>industry-side</em> (Biotech and Pharma) researchers and found that they were also plagued by similar issues that academic researchers faced.
<br>
<br>
Documentation systems were poor if not unusable. Collaboration tools were outdated. In fact, pen and paper was still used to record data even in pharma giants such as Allergan.
<br>
<br>
The <strong>batch record</strong> was at the heart of the problem. Every drug or medical device produced requires a batch record. This record tracks all procedures, equipment and ingredients used for production.
<br>
<br>
This documentation is mandated by <a href="https://www.accessdata.fda.gov/scripts/cdrh/cfdocs/cfcfr/CFRSearch.cfm?CFRPart=111&showFR=1&subpartNode=21:2.0.1.1.11.9">federal law</a>. Even drug production at the research and <a href="http://www.fda.gov/ForPatients/Approvals/Drugs/ucm405622.htm">trial phase</a> required this.
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width card-shadow" src="images/batchRecord.jpg">
</div>
</div>
<div class="eight columns offset-by-two explanation-text">
Larger companies used Oracle and SAP systems to track inventory. Sometimes, custom software was built on top of these enterprise solutions to manage batch records, but this was rare. Most companies still relied on paper worksheets that were printed and filled in by hand.
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">The Problem</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
A bevy of problems existed with the current paper batch record:
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text groundrules">
<ol>
<li>Illegible handwriting led to lost or misunderstood data</li>
<li>Human error caused incorrect manual chemical calculations and conversions</li>
<li>Difficult to track versions and changes of a batch worksheet</li>
<li>Difficult to track and organize all batch worksheets for product lines</li>
<li>Loss of data integrity: records could be falsely modified afterwards</li>
<li>A new batch worksheet must be made for every product: this led to unneeded manual duplication</li>
</ol>
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text" >
The friction generated by a pen & paper system resulted in real bottom-line implications.
Improper, wrong, or missing documentation directly led to FDA fines:
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width" src="images/fdaFines.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text" >
In fact, pharma and medical device companies have been fined over $16 billion in the last decade.
</div>
</div>
</div>
<section class="lab-excerpt">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two exercept">
A cloud & mobile based batch documentation system could empower researchers and production line workers to efficiently document their work.
<br>
<br>
<br>
We wanted biotechs to move fast while maintaining regulatory compliance and reducing errors.
</div>
</div>
</div>
</section>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Participatory Design</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
Our first client was <a href="http://www.teknova.com/">TekNova</a>, a small biotech that produced basic gels and media plates used for research and drug production.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/teknova.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
TekNova used a paper batch system. Their customizable product line exacerbated "batch record creep": each customized product required a new worksheet and it soon became impossible to track all these variations and changes.
<br>
<br>
I first conducted open-ended whiteboarding sessions with TekNova's CEO. I asked him to explain the product line. I focused on getting him to draw out his <em>ideal mental model</em> of a batch and not the current paper representation.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/whiteboardSessions.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/whiteboardSessions2.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
After a few whiteboarding sessions, I noticed some underlying patterns:
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text groundrules">
<ol>
<li>A universal set of <strong>actions</strong> was used across all products (weighing, cleaning, sterilizing...) </li>
<li>The same action across products varied by a set of <strong>parameters</strong>. For example, the sterilization step might vary on required temperature different products.</li>
<li>Base <strong>components</strong> (ingredients) used for each product was always recorded in the same manner</li>
</ol>
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
I used these observations as the base of the <strong>action framework</strong>: a scalable, descriptive, and flexible building block to design and describe batch records.
</div>
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Information Architecture</h3>
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point" style="margin-top:0;">
A <strong>product template</strong> would be the digital representation of a batch worksheet.
<br>
<br>
Users could fork and branch existing templates to easily reflect customized and branched product lines.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vesselPres1.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
A product template consists of:
</div>
</div>
<div class="row">
<div class="seven columns offset-by-three explanation-text groundrules">
<ol>
<li>List of <strong>components</strong></li>
<li>Sequence of <strong>actions</strong> performed on components</li>
</ol>
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vesselPres2.jpg">
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
The list of components would contain all the necessary compliance metadata and chemical calculations for each product.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vesselPres3.jpg">
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
The <strong>action</strong> is the building block for defining the procedures for a batch.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vesselPres4.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
<strong>Parameters</strong> are the discrete values that define a procedure. For example, sterilization would have temperature, duration, and location as parameters. The sterilization step for different products will have different values for each parameter.
<br>
<br>
<strong>Notes</strong> are for free-form text to better describe a procedure.
<br>
<br>
<strong>Signoffs</strong> are checkpoints that require a <em>digital signature</em> for compliance purposes.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vesselPres5.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vesselPres6.jpg">
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Each organization would have a library of common actions.
<br>
Users would be able to stitch together actions to create a template.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vesselPres8.jpg">
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
When put together, actions and components clearly articulate a production workflow.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vesselPres9.jpg">
</div>
</div>
</div>
</section>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Participatory Design (Part II)</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
I conducted a participatory card-sorting session with TekNova's Batch and QA managers to test this framework.
<br>
<br>
I printed out actual action cards with common TekNova procedures. Then, I asked the participants to use the cards to articulate actual products.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/actionCards1.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
This exercise tested the expressibility and scalability of the action framework. Could our subjects design batch records for the entire range of TekNova products?
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/actionCards2.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
For the most part, our subjects found the framework to be powerful and expressive.
<br>
Minor changes were made based on feedback:
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vesselPres10.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
<ol>
<li>We incorporated components into actions; our subjects found that this provided better context.</li>
<li>We removed the concept of separate signoffs and automatically added signoffs for each parameter or component.</li>
</ol>
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/vesselPres11.jpg">
</div>
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">The Production Workflow</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
We had just designed the format of batch records/worksheets. Next, we had to contextualize this artifact within the greater production workflow.
<br>
<br>
After high level interviews with biotech production managers I extrapolated a high-level process.
</div>
</div>
<div class="row">
<div class="ten columns offset-by-one">
<img class="u-max-full-width" src="images/batchWorkflow1.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
During <strong>development</strong>, batch and QA managers are responsible for creating the necessary actions and templates to mirror each product line.
<br>
<br>
In <strong>execution</strong>, technicians "ran the template". These technicians were responsible for recording data for each parameter and making the necessary digital signature signoffs. At this point, we called the "executable template" a <em>batch</em> in our software.
<br>
<br>
During <strong>analysis</strong>, production managers are responsible for monitoring current and completed batch runs. Production managers had to approve/reject completed batches and respond to issues or escalations. We built dashboards for this part of the workflow.
</div>
</div>
<div class="row">
<div class="ten columns offset-by-one">
<img class="u-max-full-width" src="images/batchWorkflow2.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
<br>
I also researched and clarified the lifecycle of a batch itself:
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width" src="images/vesselPres12.jpg">
</div>
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Development</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
Vessel Production was built on top of the existing Vessel Research stack.
<br>
<br>
This was an enterprise grade application holding mission critical data so a higher emphasis was put on testing.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width" src="images/testingFramework.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
I used <a href="https://mochajs.org/">Mocha</a> to run server-side unit tests and end-to-end API integration tests. <a href="https://karma-runner.github.io/0.13/index.html">Karma</a> was used to run UI client-side UI tests. <a href="https://codeship.com/">Codeship</a> tied everything together for continous-integration.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width" src="images/reactNative.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
The mobile application played an important role. Recording batch data would be primarily accomplished through the phone due to the physical nature of drug production. I decided to solely focus on developing an iOS application and used <a href="https://facebook.github.io/react-native/">React Native</a> to leverage native performance.
</div>
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Product Overview</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
Vessel Production is currently in private beta. Here is run through of all the screens. Everything shown is live code/product. Please <a href="mailto:[email protected]">contact me</a> for a full demo.
</div>
</div>
</div>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
The home dashboard provides a kanban view of all current batches.
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width card-shadow" src="images/vesselWorkflow8.jpg">
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Each user can see a list of assigned or owned batches.
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width card-shadow" src="images/vesselWorkflow10.jpg">
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Overview page for a batch.
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width card-shadow" src="images/vesselWorkflow7.jpg">
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Users sign-off on each component and parameter during batch execution.
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width card-shadow" src="images/vesselWorkflow9.jpg">
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
The iOS application is designed for batch execution on the go.
</div>
</div>
<div class="row">
<div class="twelve columns" style="margin-top: -2rem;">
<img class="u-max-full-width" src="images/vesselWorkflow11.jpg">
</div>
</div>
<div class="row" >
<div class="twelve columns" style="margin-top: -5rem;">
<img class="u-max-full-width" src="images/vesselWorkflow12.jpg">
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Product template page. We emphasized transparency for component calculations.
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width" src="images/vesselWorkflow1.jpg">
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Users can create templates by stitching together actions.
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width" src="images/vesselWorkflow2.jpg">
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Organizations can build up a library of common actions.
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width" src="images/vesselWorkflow5.jpg">
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
The inventory page allowed for users to track the use of components, equipment and locations in batches.
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width" src="images/vesselWorkflow3.jpg">
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Printable QR codes were generated for each inventory item.
<br>
Users could scan the use of specific inventory items using the iOS application.
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width" src="images/vesselWorkflow4.jpg">
</div>
</div>
</div>
</section>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">The Regulatory Environment</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
FDA compliance is the central motivation for maintaining batch records.
<br>
<br>
We were fortunate to have FDA regulatory expert, <a href="https://www.linkedin.com/in/angela-bazigos-1465a">Angela Bazigos</a>, to consult and guide us through this process. Angela has decades of compliance experience and was part of the original team that wrote <a href="http://www.fda.gov/RegulatoryInformation/Guidances/ucm125067.htm">CFR 11 Part 21</a> - the official guideline for digital FDA compliance.
<br>
<br>
Much of the onus of compliance comes from the actual documentation of batch records, so I built in safeguards to guide users towards compliance.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Technicians would be warned if expired components are being used.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/warning1.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Issues would be automatically generated for compliance red flags such as high variance from parameter values.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/warning2.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text research-point">
Visual revision history help batch managers to track changes.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/warning3.jpg">
</div>
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Design Principles</h3>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
Our design principles were heavily guided by the legal and regulatory environment.
<br>
<br>
One goal of Vessel was to minimize failed batches. This meant giving guidance and warning whenever <em>bad</em> values were being filled out.
<br>
<br>
On the other hand, we did not want to restrict input. Ultimately, technicians should truthfully record whatever they did. A failure to do so would be a breach of federal law.
<br>
<br>
This was my conclusion:
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text groundrules">
<ol>
<li>
Always give guidance in UI wherever possible to avoid non-compliance.
</li>
<li>
Let users enter whatever they wish, even if it is wrong.
</li>
<li>
Track issues and create an audit trail for future reference.
</li>
</ol>
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="u-max-full-width" src="images/vesselDesignPrinciple.jpg">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two explanation-text">
I wanted Vessel to personify a wise basketball coach.
One who gives advice without interrupting the game. One who lets the players play.
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<img class="u-max-full-width card-shadow" src="images/zenMaster.jpg">
</div>
</div>
<div class="row">
<div class="six columns offset-by-three explanation-text explanation-text-cutout">
Kudos if you get the Phil "Zen Master" Jackson reference.
</div>
</div>
</div>
<section class="section-title-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h3 class="secondary-font section-title">Outcomes</h3>
</div>
</div>
</div>
</section>
<section class="research-section">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two explanation-text">
Vessel Production is currently in private beta among small scale bio-manufacturers.
<br>
<br>
The core application is complete and the current challenge is for full CFR 21 part 11 compliance and validation. Much of this has to do with the underlying cloud and hardware infrastructure of our application.
<br>
<br>
As a designer, I realized that these development challenges were out of my scope. Despite the fact I had designed and implemented the core features, we needed a more seasoned developer who had experience in setting up infrastructure in regulated environments.
<br>
<br>
I also realized that I wanted to focus more on design than development, so I worked with my CEO for a transition out.
<br>
<br>
</div>
</div>
</div>
</section>
<section class="additional-projects">
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h5 class="secondary-font section-title"> Next:</h5>
</div>
</div>
</div>
<a href="/bauhaus.html" style="color:black;">
<div class="container">
<div class="row product-preview">
<div class="six columns">
<img class="u-max-full-width card-shadow" src="images/vmwareBauhausThumbnail.jpg">
</div>
<div class="six columns">
<h5>Project Bauhaus</h5>
<em class="case-study-label">Prototyping Studio - Design Process</em>
Initiative to close the gap between design and engineering by leveraging data-driven prototypes built on top of vSphere and existing APIs.
</div>
</div>
</div>
</a>
<div class="container">
<div class="row">
<div class="twelve columns home">
<a href="/index.html">home</a>
</div>
</div>
</div>
</section>
</body>
</html>