-
Notifications
You must be signed in to change notification settings - Fork 0
/
casestudy-pharmaforesight.html
251 lines (213 loc) · 11.4 KB
/
casestudy-pharmaforesight.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
<!DOCTYPE HTML>
<!--
Directive by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-153596096-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-153596096-1');
</script>
<title>Calibre | Digital Innovation and Product Development Studio</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body class="is-preload page-casestudy-styling">
<!-- Changelog -->
<!-- Page title changed to just "Case Study", to not repeat the company name
Headline text moved to the top. Tags moved below it
Tags changed to replace commas with hyphens so they look more like tags (than a sentence)
Removed link to the website because it's actually dependent on a backend I cannot keep live anyway
Designed a more powerful headline story to lead with, based on many parts of FJ's advice.
Added a clearer CTA at the bottom.
Taken the CTA out of the Calibre Tip section, which I'm not sure about
Fix missing underline on the 3rd "see more" link
-->
<header class="header">
<div class="container header__container">
<nav class="header__nav">
<ul class="header__nav-list">
<li class="header__nav-item">
<a href="./index.html">Home</a>
</li>
<li class="header__nav-item">
<a href="#portfolio">Portfolio</a>
</li>
<li class="header__nav-item">
<a href="#culture">Culture</a>
</li>
<li class="header__nav-item">
<a href="#enquire">Enquire</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Header -->
<div id="header">
</div>
<video autoplay muted loop class="casestudy_headervideo videostyling"
src="https://res.cloudinary.com/dyuw0rfip/video/upload/v1571412048/walkthrough_pharmaforesight_original_h8icma.mov"
poster="./images/casestudies-pfdt/PFDT_wireframes.png">
your browser doesn't support the video tag
</video>
<!-- Main -->
<div id="main">
<div class="container medium center">
<h3 class="greytitles">Case Study</h3>
<h3>Case Study</h3>
<p><strong>PharmaForesight.ai had their first sales meetings fast approaching, but their powerful AI product just looked like a computer returning a percentage in decimal format (e.g. 0.67).</strong></p>
<p><strong>UX - UI - React.js - Startup - MVP - Rapid Turnaround</strong></p>
<p>Today, it costs pharmaceutical companies hundreds of millions of dollars to take a drug to market (<a href="https://en.wikipedia.org/wiki/Cost_of_drug_development">source</a>), and if the trials fail then that money is completely lost. To save these huge financial losses, Pharmaforesight developed a powerful machine learning algorithm that can predict the probability of success of a trial, before it has even started.</p>
<p>To demonstrate how valuable their AI was to non-technical people in the Pharma industry, they neded to design and develop a web app that helps buyers understand what the algorithm does and how they can use it.</p>
</div>
<div class="box container medium left">
<div class="row cs-box-row">
<div><img class="testimonialface" src="./images/casestudies/pharmaforesight/eddiepease.jpg" alt="profilephoto"></div>
<p class="testimonialquote">
I chose to work with Calibre because of their clear communication from the beginning, both at a technical and a business level.<br/> What I really appreciated was when they advised me on ringfencing the scope by writing mock APIs and helped me prioritise features based on their potential effort, which reduced the timelines and budgets for the project.<br/>
Calibre delivered exactly what we agreed at the beginning and I'll certainly reach out to them first for future frontend product development support.<strong><br> - Eddie Pease<br> - Co-founder, PharmaForesight<br>
<a href="https://www.linkedin.com/in/eddie-pease-a5482130/">Linkedin</a></strong>
</p>
</div>
</div>
<div class="container medium center">
<h3>Highlights</h3>
<h3 class="greytitles">Highlights</h3>
</div>
<div class="container medium center">
<p><strong>Focussing on Business Results</strong></p>
<div class="js-Accordion" id="accordion1">
<p id="expandtrigger" class="challenge-cta">See more</p>
<div>
<p>Upon receiving the spec, we knew we needed to understand what "success" looked like in order to deliver the right thing, first time. By understanding how the product was going to be used, and who by, we understood which parts of the brief could be improved.</p>
<p>One recommendation was to use query parameters in the URL. This meant that during a meeting, they could click one of the pre-made hyperlinks and all the input fields (drug names, NLM identifiers, etc) would pre-populated, ready to press the big exciting “Predict” button.</p>
<img class="container" src="./images/casestudies-pfdt/PFDT_wireframes.png" alt="">
</div>
</div>
</div>
<div class="container medium center">
<p><strong>Engineering Value</strong></p>
<div class="js-Accordion" id="accordion2">
<p id="expandtrigger" class="challenge-cta">See more</p>
<div>
<p>Startups depend on being resourceful. We found an opportunity to collaborate with a business-savvy and tech-savvy client to engineer some serious value in a limited budget.</p>
<p>By developing API blueprints, defining responsibilities upfront and being clear on the project’s requirements, we were able to appoint the perfect team to design and develop a snappy frontend-only single page app (SPA).</p>
<p>See below for the two visual directions suggested, before the light theme was built in React.js.</p>
<img class="container" src="./images/casestudies-pfdt/PFDT_visuals.png" alt="">
</div>
</div>
</div>
<div class="container medium center">
<p><strong>When speed matters</strong></p>
<div class="js-Accordion" id="accordion3">
<p id="expandtrigger" class="challenge-cta">See more</p>
<div>
<p>PharmaForesight had a demo meeting in under a month, so we needed to rise to the challenge. For this project, Calibre’s Director and PharmaForesight’s Founder came together and planned the project in just one hour. By the time we kicked the project off, our UI developer had all the information and assets he needed to start crafting.</p>
<p>To avoid slowing things down, feedback was treated as suggestions, giving our team final say over how they met the brief. All our efforts paid off when the project was ready to demo in under two weeks.</p>
</div>
</div>
</div>
<div class="container medium center">
<h3>The result:</h3>
<video muted loop class="videostyling" onclick="this.paused ? this.play() : this.pause();"
src="https://res.cloudinary.com/dyuw0rfip/video/upload/v1571412048/walkthrough_pharmaforesight_original_h8icma.mov"
poster="./images/casestudies/pharmaforesight/poster.png">
your browser doesn't support the video tag
</video>
</div>
<div class="box container medium center">
<h3>CALIBRE TIP: API Specs</h3>
<p class="tipquote">
When managing frontend and backend work at the same time, the best way to clarify the responsibility of each party is by writing API documentation upfront. By defining this 'interface', you can avoid huge delays in a project, where both developers could be emailing back and forth requesting changes to each others’ work in order for their own codebase to function correctly. We use <a href="https://www.getpostman.com">postman for mock APIs.</a><br/>
<strong>Bonus: </strong>Generally, this API documentation should be written by the frontend developer.
</p>
</div>
<div class="container medium center">
<!-- Calendly link widget begin -->
<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/jeromeminney/calibrediscovery'});return false;">
<div class="casestudy_CTA">
Want to keep learning?<br/><strong>Schedule a discovery call now</strong>
</div>
</a><!-- Calendly link widget end -->
</div>
</div> <!-- end main div -->
<!-- Footer -->
<div id="footer">
<div class="container medium" id="enquire">
<header class="major last">
<h2>Questions or comments?</h2>
</header>
<p>You know the drill.</p>
<form method="post" action="https://formspree.io/jerome@calibre.digital">
<div class="row">
<div class="col-6 col-12-mobilep">
<input type="text" name="name" placeholder="Name" />
</div>
<div class="col-6 col-12-mobilep">
<input type="email" name="email" placeholder="Email" />
</div>
<div class="col-6 col-12-mobilep">
<input type="text" name="referrer" placeholder="Who connected you to us?" />
</div>
<div class="col-6 col-12-mobilep">
<select name="enquiry type">
<option value="other">What are you enquiring about?</option>
<option value="newbiz">We've got a project for you</option>
<option value="officehours">I'd love to pick your brain</option>
<option value="bizdev">Partnership Opportunity</option>
</select>
</div>
<div class="col-12">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</div>
<div class="col-12">
<ul class="actions special">
<li><input type="submit" value="Send Message" /></li>
</ul>
</div>
</div>
</form>
<!--
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
</ul> -->
<ul class="copyright">
<li>Website created in a day, the Calibre Digital way</li>
<li>Calibre Digital Limited - Company Number: <a href="https://beta.companieshouse.gov.uk/company/10869672">10869672</a></li>
</ul>
</div>
</div>
<!-- Scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/breakpoints.min.js"></script>
<script src="js/util.js"></script>
<script src="js/main.js"></script>
<script src="js/vanilla-js-accordion.js"></script>
<script>
var accordion = new Accordion({
element: "accordion1", // ID of the accordion container
});
var accordion = new Accordion({
element: "accordion2", // ID of the accordion container
});
var accordion = new Accordion({
element: "accordion3", // ID of the accordion container
});
</script>
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
</body>
</html>