-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcasestudy-subutai.html
232 lines (192 loc) · 10.3 KB
/
casestudy-subutai.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
<!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">
<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=""
poster="./images/casestudies/subutai/unsplash_ws.jpg">
your browser doesn't support the video tag
</video>
<!-- Main -->
<div id="main">
<div class="container medium center">
<h3>Subutai Case Study</h3>
<h3 class="greytitles">Overview</h3>
<p><strong>Tech Architecture, Elasticsearch, GraphQL, React, Product Design, Agile Coaching</strong></p>
<p><strong>Subutai had been iteratively building their product, but running out of runway fast. They needed their next iteration to take them from no revenue to profitable business, or the company would run out of funds.</strong></p>
<p>Subutai is an InsurTech startup to help underwriters factor in the cybersecurity risk of their customers. With a product that could scan millions of data points about an enterprise and generate visualisations on the fly, they provided unparallel data-driven insight to their customers.</p>
<p>With a strong founding team, their product owner already knew all their future clients, and their CTO had tech degrees from Cambridge and Imperial College. However, they didn't have the product management and web architecure experience to build a product that meets customer needs, and so Calibre came in to coach them to success.</p>
</div>
<div class="box container medium center">
<h3>Result</h3>
<p>After six weeks of engagement with Calibre, the Subutai team went ahead to build their first sellable product within 3 months. They quickly sold their first licences, and became a profitable company within a year.</p>
<p>We later developed a sweet website for them as well: <a href="https://www.esc.co/">www.esc.co</a></p>
</div>
<!-- <div class="box container medium left">
<div class="row cs-box-row">
<div><img class="testimonialface" src="./images/templateface.png" alt=""></div>
<p class="testimonialquote">
Jerome was able to understand our business and focus his efforts after just 1 hour with each of us. Weeks later we were working more effectively than ever before, and I'd highly recommend him as a coach or techncial advisor.<strong><br> - Rufus Herner<br> - Co-founder, Product Owner</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>Communicating tech</strong></p>
<div class="js-Accordion" id="accordion1">
<p id="expandtrigger" class="challenge-cta">See more</p>
<div>
<p>With such a complex product, the product and the engineering lead were imagining different things whenever they discussed how it should work. We felt this was the root issue behind why the last three versions of the product weren’t quite commercially usable by the time they were built.</p>
<p>By shifting their conversation from the language of user needs to talking about final design solutions, we coached the team to create a UI design specification that solved all of the challenges in one product.</p>
<p>The lesson learned? When the Product and Engineering aren’t communicating well, find a language they're both fluent in.</p>
<img class="container" src="./images/casestudies-subutai/SubutaiUI.png" alt="">
</div>
</div>
</div>
<div class="container medium center">
<p><strong>Code Smell</strong></p>
<div class="js-Accordion" id="accordion2">
<p id="expandtrigger" class="challenge-cta">See more</p>
<div>
<p>Code smell is when you notice something that's a sign of a deeper problem. When we noticed how long it was taking to build or modify code, we looked under the hood to see that there were a lot of dependencies across the codebase. They needed a more modular architecture so that a developer could work on one part of the codebase without breaking code elsewhere.</p>
<p>On top of this, too much business logic was happening on the frontend, which made the product slower, less secure, and impossible to manage if they start supporting more devices.</p>
<p>Instead of spending a huge amount of time redesigning the architecture with them, we just nudged them to implement an open source query language called GraphQL (instead of the bespoke one they spent six months developing). We knew GraphQL would structure their codebase in an appropriate way for them, achieving the modular architecture they needed to iterate smoothly.</p>
<img class="container" src="./images/casestudies-subutai/SubutaiArchitecture.png" alt="">
</div>
</div>
</div>
<div class="container medium center">
<p><strong>Sourcing niche expertise</strong></p>
<div class="js-Accordion" id="accordion3">
<p id="expandtrigger" class="challenge-cta">See more</p>
<div>
<p>Once the team implemented a modular architecture, we were able to efficiently start solving engineering challenges across differend parts of the codebase. To achieve this quickly, we reached out to a network of niche experts who had faced similar problems before.</p>
<p>We brought the following experts on board to support Subutai:</p>
<p>An <strong>Elasticsearch</strong> expert to help them efficiently scan millions of data points.</p>
<p>A <strong>React.js</strong> developer to rebuild their frontend for them.</p>
<p>A <strong>DevOps</strong> studio to build them a continuous integration and deployment pipeline.</p>
</div>
</div>
</div>
<div class="box container medium center">
<h3>CALIBRE TIP</h3>
<p class="tipquote">
When needing a niche expert to help us, codementor.io has helped us countless times and we recommend you check it out. For this project, we found an Elasticsearch expert on the platform and she was happy to help us figure anything out.
</p>
<p><strong>Contact us to discover more ways you can leverage technology to grow your company.</strong></p>
</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>
</body>
</html>