-
Notifications
You must be signed in to change notification settings - Fork 1
/
case_study--usability_testing_with_kolektiv.html
128 lines (111 loc) · 7.88 KB
/
case_study--usability_testing_with_kolektiv.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Coaching an organisation in usability testing | by Vedran Arnautovic</title>
<link rel="stylesheet" src="http://normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/app.css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto' rel='stylesheet' type='text/css'>
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon'/ >
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="public"/>
</head>
<body>
<!-- NAV -->
<nav class="nav nav--on-light-bg noselect" id="nav">
<ul class="nav__list">
<li class="nav__item"><a href="index.html">Home</a></li>
<li class="nav__item"><a href="about_vedran.html">About me</a></li>
<li class="nav__item nav__item--selected"><a href="vedrans_design_work.html">My work</a></li>
</ul>
</nav>
<!-- Make nav sticky on scroll -->
<script type="text/javascript" src="/js/sticky_nav.js"></script>
<script type="text/javascript">formatStickyNav("@colour-light-gray");</script>
<!-- lazy load images -->
<script src="js/lazy_img.js"></script>
<!-- CASE STUDY INTRO -->
<div class="section section--medium">
<div class="section__content section--top-of-page section--last-in-section section__content--allow-wide">
<h1 class="h1-heading">Coaching an organisation in usability testing</h1>
<p><a class ="link link--on-light-bg link--inline" target="_blank" href="http://kolektiv.ba/">Kolektiv</a> are a regional leader in international recruitment, operating in the Balkans and central and eastern Europe. They offer a range of products and services including a job board, salary surveys and recruitment services.</p>
</div>
</div>
<div class="section section--light ">
<div class="sub-section__content sub-section--first-in-section">
<h2 class="h2-heading">The challenge</h2>
<p>Kolektiv grew organically from a small team of self thought developers and entrepaneurs, into a company employing over 40 people. Along the way some common product development practices were skipped – it was time to bring some of those into their process.</p>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">Where to start?</h2>
<p>There were a number of areas where Kolektiv’s product development process could be improved, but a complete lack of user involvment alarmed me. I suggested we start with this.</p>
<p>Given that they had a mature product, we decided that a good starting point would be running some usability tests to figure out whether there were any major issues with the existing product.</p>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">Running usability testing</h2>
<p>I started with education about usability testing; what it was, why it was useful, how to conduct usability tests and how to analyse the results.</p>
<p>We quickly turned to the practical side of things; the team recruited some users, we wrote a test script together and ran a couple of internal sessions to give everyone some practice and much needed confidence.</p>
<div id="results-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/kolektiv_organising_usability_testing_results.jpg">
<img id="results-img-placeholder" class="img-small" src="resources/images/kolektiv_organising_usability_testing_results_PLACEHOLDER.jpg">
<div style="padding-bottom: 75%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('results-img-container','results-img-placeholder',"Teaching Team Kolektiv designers to organise usability test results");</script>
<div class="image-caption">Teaching Team Kolektiv designers to organise usability test results</div>
<p>The testing setup was kept fairly simple:</p>
<ul class="list">
<li class="list__item">A MacBook runnig <a class ="link link--on-light-bg link--inline" target="_blank" href="https://www.techsmith.com/morae.html">Morae</a> for interaction and user recording</li>
<li class="list__item">PostIt Notes and Sharpies for note taking</li>
<li class="list__item">A test script</li>
<li class="list__item">A facilitator (me)</li>
<li class="list__item">A note taker</li>
</ul>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">The output</h2>
<p>Once we wrapped up all the sessions, we organised and summarised our notes. I prepared a report and a presentation higlighting the key findings.</p>
<p>I also put together a 20 minute highlights reel of footage from the testing sessions. This was the most valuable output as it allowed a wider audience, including the marketing and sales teams, as well as the CEO to see the results of the testing, first hand.</p>
<div id="video-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/kolektiv_watching_usability_testing_summary_video.jpg">
<img id="video-img-placeholder" class="img-small" src="resources/images/kolektiv_watching_usability_testing_summary_video_PLACEHOLDER.jpg">
<div style="padding-bottom: 75%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('video-img-container','video-img-placeholder',"Team Kolektiv watching usability testing highlights reel");</script>
<div class="image-caption">Team Kolektiv watching usability testing highlights reel</div>
<p>The team’s reactions ranged from laughter to shock and disbelief – seeing real users interact with your product is always a powerful experience.</p>
</div>
<div class="sub-section__content sub-section--last-in-section">
<h2 class="h2-heading">The outcome</h2>
<p>This was one of the most rewarding consulting engagements I've ever done.</p>
<p>There was complete buy-in into the findings of the usability testing from everyone, right up to the CEO.</p>
<p>As a result, Kolektiv have started making changes to address some of the findings of the testing. More importantly, they are now committed to running usability testing as part of their product development process.</p>
</div>
<div class="section section--medium section--nav">
<div class="sub-section__content sub-section--last-in-section">
<a class="link link--on-light-bg link--case-study-nav" href="vedrans_design_work.html#CoachingAnOrgInUsabilityTesting">Back to ‘My work’</a>
<a class="link link--on-light-bg link--inline" href="case_study--gymsales_settings_page.html">Next case study</a>
</div>
</div>
</div>
<!-- START FOOTER -->
<script src="js/clipboard.min.js"></script>
<script src="js/copy_email.js"></script>
<div id='footer'></div>
<div class="footer section--dark footer__content">
<div class="section__content noselect">
<div id="email-bttn" class="bttn bttn--almost-black bttn--email">
<span class="bttn__label" id="email-label"
onmouseover="mouseOver('email-label')"
onmouseout="mouseOut('email-label','[email protected]')"
data-clipboard-text="[email protected]">
</span>
</div>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://twitter.com/vedranio">Twitter</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://medium.com/@vedranio">Medium</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://www.linkedin.com/in/vedran-arnautovic-716a1b128">LinkedIn</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://github.com/vedranio">GitHub</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://www.instagram.com/vedran_arnautovic/">Instagram</a>
<script type="text/javascript">copyEmailToClipBoard('.bttn__label','email-label', "bttn__label","[email protected]");</script>
</div>
</div>
<!-- END FOOTER -->
</body>
</html>