rtapella.github.io/data-dashboard.html at master · rtapella/rtapella.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DNA Sequencing Data Dashboard - Rob Tapella</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <header class="header">
        <a href="index.html" class="logo">ROB TAPELLA</a>
        <nav class="nav">
            <a href="index.html">HOME</a>
            <a href="about.html">ABOUT</a>
            <div class="dropdown">
                <a href="#" class="dropbtn active">WORK</a>
                <div class="dropdown-content">
                    <a href="methane.html">Methane Map Web Site</a>
                    <a href="data-dashboard.html" class="active">DNA Sequencing Data Dashboard</a>
                    <a href="rna-quantification.html">RNA Quantification Reagent</a>
                    <a href="service-map.html">Service Journey Map</a>
                </div>
            </div>

        </nav>
    </header>

    <section class="hero">
        <div class="hero-image-container">
            <img src="images/rs-hero.png" alt="DNA Sequencing Data Dashboard" class="hero-image">
            <div class="hero-overlay">
                <h1>Data Dashboard for DNA Sequencer</h1>
            </div>
        </div>
    </section>

    <main class="main">
        <div class="grid-container">
            <div class="left-sidebar">
                <div class="content-section">
                    <h2 class="section-title">MY ACTIVITIES</h2>
                    <div class="section-content">
                        <ul>
                            <li>Product manager</li>
                            <li>User research and analysis</li>
                            <li>Participatory design research</li>
                            <li>Interaction design</li>
                            <li>Requirements development</li>
                        </ul>
                    </div>
                </div>

                <div class="content-section">
                    <h2 class="section-title">TOOLS</h2>
                    <div class="section-content">
                        <ul>
                            <li>Pen & paper</li>
                            <li>Excel</li>
                            <li>OmniGraffle</li>
                            <li>Balsamiq</li>
                        </ul>
                    </div>
                </div>

            </div>

            <div class="main-content">
                <div class="content-section">
                    <div class="section-content">
                        <p>Pacific Biosciences develops DNA sequencing technology, including hardware instrumentation
                            with embedded control software, biochemical reagents, and data analysis software.</p>
                        <p>As the product manager for the instrument and for its embedded and run-tracking software, I
                            visited a number of customer sites to observe and interview the technicians who ran our
                            installed instruments, and the lab managers who were responsible for capital equipment
                            purchases and for ongoing management of lab services. By engaging with the customers
                            continuously, and by including the service and support staff's expertise, we created an
                            all-new web-based run monitoring and quality-control software that was validated with real
                            users before launching it.</p>
                    </div>
                </div>

                <div class="content-section">
                    <h2 class="section-title">CONCLUSION AND IMPACT</h2>
                    <div class="section-content">
                        <p>There were some assumptions built into the software design of the original PacBio RS
                            instrument that turned out to be false once the instruments began to be installed in the
                            field. I was able to help improve the instrument run-monitoring and data-QC software both in
                            terms of the information presented, as well as in the manifestation. Internal teams who had
                            built custom software to address pain points began to use the built-in software instead,
                            which helped to further validate its completeness and utility.</p>
                        <p>Findings from the research also influenced the development of the PacBio Sequel System
                            embedded- and run-monitoring-software.</p>
                    </div>
                </div>

                <div class="project-image-container wide">
                    <img src="images/RS-Dashboard.jpg"
                        alt="The RS Dashboard software showing an example DNA Sequencing report" class="project-image">
                    <p class="image-caption">The RS Dashboard software showing an example DNA Sequencing report.</p>
                </div>

                <div class="content-section">
                    <h2 class="section-title">ADDITIONAL RESULTS</h2>
                    <div class="section-content">
                        <p>Based on the observations during my customer visits, other changes were made. For example,
                            packaging was updated to reflect how the technicians' labs were set up, and how instrument
                            runs were documented and tracked. For example, barcode scanning of the boxes was often a
                            pain because the scanner computer was by the instrument, which was not necessarily next to
                            the fridge where reagents were stored. The simple improvement to help with this problem was
                            to put an additional barcode sticker inside the reagents box that could be stored near the
                            computer and stuck into a lab notebook for record-keeping.</p>
                    </div>
                </div>

                <div class="content-section">
                    <h2 class="section-title">PROCESS AND ARTIFACTS</h2>
                    <div class="section-content">
                        <p>For this project, I closely followed the Cooper Goal-Directed Design process, including the
                            creation of personas and scenarios to generate narratives around the use of the software. I
                            was able to rely on the user research methods that I had developed previously with Applied
                            Biosystems and a collaborative project with IDEO.</p>
                    </div>
                </div>

                <div class="project-image-container">
                    <img src="images/rs-scenario-example.png"
                        alt="Example scenario from IxDworks.com showing user workflow" class="project-image">
                    <p class="image-caption">Example scenario from IxDworks.com. Actual work product is proprietary.
                        Each step in the narrative should be analyzed for what the user does (action), what they are
                        thinking (including information inputs and outputs), and potentially how they feel (emotional
                        dimension).</p>
                </div>

                <div class="project-image-container">
                    <img src="images/rs-heatmap.png" alt="Persona discovery process heatmap" class="project-image">
                    <p class="image-caption">Persona discovery process. The details are proprietary, of course.</p>
                </div>
            </div>

            <div class="right-sidebar">
                <div class="content-section">
                    <h2 class="section-title">ADDITIONAL INFO</h2>
                    <div class="section-content">
                        <p>For the PacBio RS II software, I performed all of the design activities.</p>
                        <p>Images from <a href="https://www.pacb.com" target="_blank">Pacific Biosciences of California,
                                Inc.</a></p>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="js/script.js"></script>
    <script src="js/dropdown.js"></script>
</body>

</html>