-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcasestudy-esa.html
240 lines (198 loc) · 11 KB
/
casestudy-esa.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
<!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="https://res.cloudinary.com/dyuw0rfip/video/upload/v1572454286/esa_walkthrough2_720_ljoqnm.mov"
poster="./images/casestudies/esa/poster.png">
your browser doesn't support the video tag
</video>
<!-- Main -->
<div id="main">
<div class="container medium center">
<h3>European Space Agency Case Study</h3>
<h3 class="greytitles">Overview</h3>
<p><strong>27 Stakeholders, User Interviews, Wireframes & IA, Web Design, Drupal development</strong></p>
<p><strong>The European Space Agency | Business Applications were looking to gain a 70% increase in grant applications in the UK, but didn't have the in-house expertise to achieve this efficiently.</strong></p>
<p>ESA Business Applications (ESA BA) is responsible for awarding grant funding to ventures who plan on incorporating cutting-edge space technology on earth. With a team of engineers available to mentor these companies to build robust products, ESA BA have fostered many ventures across europe that have stimulated economic growth. With a growing amount of grant funding to award, ESA BA needed to grow their applicant pool, but didn't have the expertise to attract a wider range of ventures to apply for funding. Under a Visual Storytelling Studio, a Marketing Strategy consultancy and Calibre came in to achieve a step change in growth, and Calibre was responsible for the UX-driven website redesign.</p>
</div>
<!-- <div class="box container medium left">
<div class="row cs-box-row">
<div><img class="testimonialface" src="./images/casestudies-esa/natasha.png" alt=""></div>
<p class="testimonialquote">
“Calibre was able to make the project look simple and approachable to external stakeholders, whilst delivering a UX-driven and technically complex project under the hood. There aren’t many studios that could be as flexible and dynamic as Calibre.“
<strong><br> - Natasha Wheatley<br> - Marketing, ESA Business Applications</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>Research-driven strategy</strong></p>
<div class="js-Accordion" id="accordion1">
<p id="expandtrigger" class="challenge-cta">See more</p>
<div>
<p>With 27 stakeholders with opinions on the website changes and no clear decision-making structure, we knew the project could lose momentum very quickly. To combat this, we carried out 1-1 interviews and analysed this user reseach to surface the key changes that would contribute to the organisations strategic goals, ranked by effort and impact.</p>
<p>Once we had this high quality insight in place, we were able to filter out the low quality stakeholder input by explaining to them what we could do instead, and why.</p>
<p>Through our rapid prototyping and feedback processes, our wireframes received input from engineering, copywriting, design, and marketing, which meant full stakeholder buy-in to a solution that would get the key messages across to our users.</p>
<img class="container" src="./images/casestudies-esa/challenge1_image.png" alt="">
</div>
</div>
</div>
<div class="container medium center">
<p><strong>Visual Storytelling</strong></p>
<div class="js-Accordion" id="accordion2">
<p id="expandtrigger" class="challenge-cta">See more</p>
<div>
<p>Since we were designing for an aspirational brand like the Space Agency, we saw an opportunity to get people excited about being part of the story.</p>
<p>We did this by collaborating with Nucco Brain to incorporate stylised illustratoins (instead of photography), thereby tapping into an age-old storytelling technique to invite the user to imagine themselves being part of the story. This is particularly valuable when your strategic goal is encourage more people to apply for grant applications.</p>
<p>Take a look at how it turned out</p>
<img class="container" src="./images/casestudies/esa/esa_walkthrough_poster.png" alt="">
</div>
</div>
</div>
<div class="container medium center">
<p><strong>Technical Communication</strong></p>
<div class="js-Accordion" id="accordion3">
<p id="expandtrigger" class="challenge-cta">See more</p>
<div>
<p>When coordinating between 5 companies with varying degrees of technical knowledge, there's a risk of losing engagement from some stakeholders, especially if they find it hard or impossible to understand what's going on. To avoid this, accessible language is crucial in all communications.</p>
<p>From here, it's standard management practice to dedicate 1 main point of contact within each team, and we ensured that this clear communication channel was set up from the beginning.</p>
<p>Finally, it's important to have one clear message for everyone to receive. Our commms needed to have a consistent format, vocabulary, and project plan, like the email below. The key with this email is to stick to the same naming conventions for the rest of the project so as not to confuse people.</p>
<img class="container" src="./images/casestudies-esa/ESA_ReportingEmail.png" alt="">
</div>
</div>
</div>
<div class="container medium center">
<img class="container" src="./images/casestudies-esa/esaprocess.png" alt="">
</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/v1572454286/esa_walkthrough2_720_ljoqnm.mov"
poster="./images/casestudies/esa/poster.png">
your browser doesn't support the video tag
</video>
<p><a href="https://business.esa.int/">https://business.esa.int/</a></p>
</div>
<div class="box container medium center">
<h3>CALIBRE TIP: UX Rule of 5</h3>
<p class="tipquote">
If you’re carrying out user research, you get a statistically significant enough sample by testing with just 5 users.<br/><br/>
There’s some clever stats behind it, outlined in <a href="https://www.invisionapp.com/inside-design/ux-usability-research-testing/">this InVision article</a>. We recommend reading it if you want to understand why, or know when your particular case calls for a different number of users to test with.<br/><br/>
<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>