-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathairecruitment.html
507 lines (499 loc) · 28 KB
/
airecruitment.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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Primary Meta Tags -->
<title>AI Job Interviewer Case Study</title>
<meta name="title" content="Shardé Heim - AI Job Interviewer Case Study" />
<meta name="description" content="Defining the experience for an AI Job Interviewer" />
<meta name="keywords" content="Portfolio, Design Portfolio, Product Designer, UX Designer, UI Designer, Interface Designer, London Designer, Voice AI, Recruitment, Case Study">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.shardeheim.com/airecruitment" />
<meta property="og:title" content="Shardé Heim - AI Job Interviewer Case Study" />
<meta property="og:description" content="Defining the experience for an AI Job Interviewer" />
<meta property="og:image" content="images/metaphoto4.jpg" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://www.shardeheim.com/airecruitment" />
<meta property="twitter:title" content="Shardé Heim - AI Job Interviewer Case Study" />
<meta property="twitter:description" content="Defining the experience for an AI Job Interviewer" />
<meta property="twitter:image" content="images/metaphoto4.jpg" />
<!-- Links -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,500i,700,800" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/javascript.js" type="text/javascript" defer></script>
</head>
<body>
<!-- nav one for web -->
<nav>
<div class='fade-in-element'>
<div class="topnav">
<div class="topNavLeft">
<div class="navleftwidth1"> <a href="/#work">Work</a> </div>
<div class="navleftwidth2"> <a href="/#experience">Experience</a></div>
</div>
<div class="logo">
<div class="LogoIcons">
<a href="/"><img class="activeLogoIcons" src="images/logo.svg" alt="Logo"></a>
<a href="/"><img class="hoverLogoIcons" src="images/HLogo2.png" alt="HLogo"></a>
</div>
</div>
<div class="topNavRight">
<div class="navrightwidth3"><a href="https://www.shardeheim.com/images/sharderesume.pdf" target="_blank">Resumé</a></div>
<div class="navrightwidth4"><a href="about">About</a> </div>
</div>
</div>
</div>
</nav>
<!-- nav two for mobile -->
<div class="topMobilelNav fade-in-element">
<nav class="mobile-nav">
<a href="/#work">Work</a> <a href="/#experience">Experience</a> <a href="about">About</a> <a href="https://www.shardeheim.com/images/sharderesume.pdf" target="_blank">Resumé</a>
</nav>
<div class="mobileNavbLogo">
<a href="/"><img height="40" src="images/logo.svg" alt="moiblelogoimage"></a>
</div>
<button class="hamburger" aria-label="Hamburger Menu">
<div class="bar"></div>
</button>
</div>
<!-- above fold content -->
<div class="caseStudyTopContainer fade-in-element">
<div class="companyInfo">
<h1>AI Job Interviewer</h1>
<img height="40" src="images/CTlogoCasestudy.svg" alt="CTLogoImage">
</div>
<div class="caseStudyDescription">
<p>The process of redesigning how AI job interview results were consumed by businesses</p>
</div>
<div class="rollandtimeleft">
<h3>Roles</h3>
<div class="roleTags">
<div class="ProductDesignTag">
Product Desgin
</div>
<div class="UXTag">
UX Design
</div>
<div class="UITag">
UI Design
</div>
</div>
</div>
<div class="rollandtimeright">
<h3>Time</h3>
<div class="tableDate">
May 2021 - July 2021
</div>
</div>
</div>
<!-- image swivel -->
<div class="imageSwivel fade-in-element">
<div class="imageSwivelWrapper">
<h1 class="SwivelTopImage">
<img src="images/AIRecruitmentTop.png" height="280" alt="VoiceAiHeaderTop">
</h1>
<h1 class="SwivelDownImage">
<img src="images/AIRecruitmentBottom.png" height="280" alt="VoiceAiHeaderTop">
</h1>
</div>
</div>
<!-- Entire Wrapper-->
<div class="container-wrapper fade-in-element">
<nav class="sidebarNav">
<div class="container">
<div class="sidebar">
<li class="section-1">
<img src="images/book.svg" width="17"height="17" alt="Context"/>
<a href="#section-1">Context</a>
</li>
<li class="section-2">
<img src="images/notification-status.svg" alt="Overview" width="17"height="17"/>
<a href="#section-2">Overview</a>
</li>
<li class="section-3">
<img src="images/people.svg" alt="UserFeedback" width="17" height="17"/>
<a href="#section-3">User Feedback</a>
</li>
<li class="section-4">
<img src="images/layer.svg" alt="Requirements" width="17" height="17"/>
<a href="#section-4" >Requirements</a >
</li>
<li class="section-5">
<img src="images/user-square.svg" alt="DefiningRequiremnts" width="17" height="17"/>
<a href="#section-5">User personas</a>
</li>
<li class="section-6">
<img src="images/search-status.svg" alt="Research" width="17" height="17"/>
<a href="#section-6" >Research</a >
</li>
<li class="section-7">
<img src="images/pen-tool.svg" width="17"height="17" alt="Wireframe"/>
<a href="#section-7" >Ideating & wireframes</a>
</li>
<li class="section-8">
<img src="images/glass.svg" alt="testings" width="17"height="17"/>
<a href="#section-8" >First testing round</a>
</li>
<li class="section-9">
<img src="images/figma.svg" alt="Design" width="17" height="17"/>
<a href="#section-9" >High fidelity design</a>
</li>
<li class="section-10">
<img
src="images/glass.svg" alt="testing" width="17" height="17"/>
<a href="#section-10" >Second testing round</a>
</li>
<li class="section-11">
<img src="images/data.svg" alt="Implementation" width="17" height="17"/>
<a href="#section-11">Implementation</a >
</li>
<li class="section-12">
<img src="images/teacher.svg" alt="Learnings" width="17" height="17"/>
<a href="#section-12" >Learnings</a >
</li>
<li class="section-13">
<img src="images/arrow-up.svg" alt="Top" width="17" height="17"/>
<a href="#section-1" >Top</a >
</li>
</div>
</div>
</nav>
<!-- content-->
<section id="section-1" class="sectionImage">
<div class="container-content">
<br>
<h4>Context</h4>
<p>
I joined Curious Thing in 2019, 6 months after it was founded, when the company’s mission was to enable hiring managers to interview high volumes of candidates for a job in one go.
<br><br>
Curious Thing’s AI Job Interviewer would hold screening interviews with applicants in order to assess every candidate and remove bias. Following AI screening, hiring managers could log into a client portal where the candidates would be ranked and assessed using the latest behaviour assessment criteria, focussing on meritocracy from technical to soft skills.
<br><br>
<b>Key roles: </b> UX and UI design for the client portal, conversation UX design, creating the CT components library, brand identity, website design and commercial assets.
<div>
<img src="images/contextBeforeAndAfter.jpg" width="100%" alt="placeholderimage">
</div>
<div class="ImageSubHeading">
Sample of UI before I joined vs after
</div>
</p>
</div>
</section>
<section id="section-2" class="sectionImage">
<div class="container-content">
<h4>Overview</h4>
<p>
Customer Success passed on feedback to me that clients were exporting candidate interview data and analysing it outside the platform. Curious Thing’s goal was to automate the job candidate process from initial screening to shortlisting. This feedback signalled a lack of value in the shortlisting step. 🚩
<br><br>
<b>Project responsibility: </b> Investigate the problem, improve the experience of the candidate report and results pages (UX/UI), create new user personas and oversee implementation.
<br><br>
<b>The Team: </b>I worked with the Customer Success team manager lead, the head of sales, a data scientist and a full stack engineer.
</p>
<br><br><br><br>
</div>
</section>
<section id="section-3" class="sectionImage">
<div class="container-content">
<h4>User feedback</h4>
<p> To understand the problem better I held feedback sessions directly with the clients over Zoom (it was the middle of Covid lockdowns). These sessions were to see clients’ processes live, and to gather context regarding what they were doing with their data outside the platform.
</p>
<div>
<img src="images/Zoom.jpg" width="100%" alt="placeholderimage">
</div>
<div class="ImageSubHeading">
Zoom feedback session, faces blurred for privacy
</div>
<p>
<br>
Our clients shared similar pain points and analysed the data post-interview in similar ways.
<br><br>
Following these sessions I presented two problems to our internal stakeholders. I was conscious to stick to the problem and not jump to the solutions proposed/used by our clients at this stage.
</p>
<br>
<br>
<br>
<div class="subHeading">
<img src="images/weight.svg" alt="testing" width="17" height="17"/> The Challenges
</div>
<p>
<span>•</span> Users have difficulty understanding results & analytics and interpreting them as they relate to the job role. <br/>
<span>•</span> Users have to leave the platform to analyse results or create shortlists. <br/>
<span>•</span> Users required knowledge of external tools like Excel or Tableau to analyse results.
<br>
<br>
</p>
<div class="subHeading">
<img src="images/diagram.svg" alt="testing" width="17" height="17"/> How clients wanted to use the candidate report
</div>
<p>
<span>•</span> Users want information to be displayed as simply as possible so that anyone can immediately understand what is happening. <br>
<span>•</span> Users want to be guided on how to interpret personality insights, needs, values and attribute scores as they relate to the role.
</p>
<br>
<br>
<div class="subHeading">
<img src="images/keyboard-open.svg" alt="testing" width="17" height="17"/> How clients wanted to use the dashboard
</div>
<p>
<span>•</span> Users want to view and sort cohort results by weighted averages based on inputs. <br/>
<span>•</span> Users want to see top performers for each attribute (e.g. top 25%)<br/>
<span>•</span> Guidance or suggestions for weightings based on role requirements.
</p>
<br>
<br>
<br>
</div>
</section>
<section id="section-4" class="sectionImage">
<div class="container-content">
<h4>Requirements</h4>
<p>The problems could be tackled with two main areas of improvement:
</p>
<div class="SmallerSectionImage">
<img src="images/Requirments2.jpg" width="100%" alt="placeholderimage">
</div>
</div>
</section>
<section id="section-5" class="sectionImage">
<div class="container-content">
<h4>User personas</h4>
<p>An additional benefit of the feedback sessions was enabling me realise our existing user personas were not aligned with how clients used the dashboard. I created two new key personas that were helpful references when I was later updating the UX of the results and candidate outcome page.
<br/><br/>
</p>
<div class="SmallerSectionImage">
<img src="images/Personas.jpg" width="100%" alt="placeholderimage">
</div>
</div>
</section>
<section id="section-6" class="sectionImage">
<div class="container-content">
<h4>Research</h4>
<p>
I set out asking myself two main questions. What is the most consumable way to display personality test results to clients and what is the most impactful method of displaying top candidates?
</p>
<br><br>
<div class="subHeading">
<img src="images/note-1.svg" alt="testing" width="17" height="17"/> Persoanlity Insights Research
</div>
<p>
Our platform already analysed candidates using a version of the IBM Watson Big 5 personality traits. However, I wanted to make sure there wasn’t another personality test that would better suit our clients, so I also researched the DiSC Assessment, Hogan Personality Inventory and Caliber Profile.
<br><br>
After discussions with our data scientist on how our current assessment system was implemented, going with a different test was not worth the effort, they didn’t offer any substantial benefits. The Big 5 still suited our needs best, but needed improvement.
<br><br>
Through my research, I discovered there was also considerably more categorisation description data available that we weren’t displaying. Our labels weren’t accurate and up to date with the latest version of IMB Watson and we were using language that suggested some traits were better/worse than others.
</p>
<div>
<img src="images/Research2.jpg" width="100%" alt="placeholderimage">
</div>
<div class="ImageSubHeading">
Disc Assessment, Hogan Personality Inventory, Caliber Profile and IMB Watson Big 5
</div>
<br>
<br>
<div class="subHeading">
<img src="images/note-1.svg" alt="testing" width="17" height="17"/> Results page research
</div>
<p>
The client feedback sessions proved to be excellent research and information gathering on what clients were already doing outside of the platform and how our own results page could be enabling users to rank candidates.
<br><br>
After exporting the csv data from our platform, multiple clients would use systems such as Tableau and Excel to select the top three to five attributes they wanted to asses the candidates with, and then give weightings to the attributes that were more or less important to them. This weighting had to add up to 100 and delivered a weighted average score (WAS) that could be used to rank and group the candidates.
</p>
<div>
<img src="images/ReportResearch.jpg" width="100%" alt="placeholderimage">
</div>
<div class="ImageSubHeading">
Sample of a clients using their version of weighted attributes with their exported data
</div>
</div>
</section >
<section id="section-7" class="sectionImage">
<div class="container-content">
<h4>Ideating & wireframes </h4>
<p>
Next I conducted multiple rounds of white board sessions with our customer success lead to map out how we might present the personality insights data in a more useful way. I referenced the personas I had made earlier to help me better empathise with the user.
</p>
<div>
<img src="images/PersoanlityInsightsSketches.jpg" width="100%" alt="placeholderimage">
</div>
<div class="ImageSubHeading">
Personality insights sketches
</div>
<p>
I then started paper sketching some mockups. I wanted to create a weighted attribute filtering system that was quick and easy to implement and sat at the top of the results page as part of the filter. I also wanted to introduce rank groups to visually group candidates together. e.g top 25%, top 5%.
</p>
<div >
<img src="images/ResultsPageFiltersSketches.jpg" width="100%" alt="placeholderimage">
</div>
<div class="ImageSubHeading">
Results page filters sketches
</div>
<br>
</div>
</section >
<section id="section-8" class="sectionImage">
<div class="container-content">
<h4>First testing round</h4>
<p>
I conducted testing sessions with each of our customer success team members and our data scientist, taking them through the paper prototypes before I started the detailed UI.
<br><br>
There were two main streams of feedback:
<br>
<br>
</p>
<div class="indent">
<p>
<b> 1. </b> The Big 5 personality traits were still being presented with language that implied positivity and negativity. This led to a separate work stream where the CS team lead and I re-wrote each description associated with each Big 5 personality trait using more neutral terminology.
</p>
</div>
<div >
<img src="images/testingroundimage.jpg" width="100%" alt="placeholderimage">
</div>
<div class="indent">
<p>
<b> 2. </b>The way I had designed the weighted attributes assumed users could select more or less attributes at any time during the campaign. Through testing with our data scientist I found that a limitation of our platform was that attributes could only be pre-determined at campaign set up by the internal team, and not altered once the campaign was launched. This meant the filter would become more of a reminder for users to see what attributes and weights they had selected, rather than being able to update it in real time.
</p>
<br>
<br>
</div>
</div>
</section>
<section id="section-9" class="sectionImage">
<div class="container-content">
<h4>High fidelity designs </h4>
<p>
Using our UI Components Library not only meant design could come together quickly, but development as well. One of my main roles at CT was creating the first version of the component library, which I worked closely with our front end engineer to implement.
</p>
<div>
<img src="images/componentslibray2.jpg" width="100%" alt="placeholderimage">
</div>
<p>
Leveraging the UI Components Library allowed the high-fidelity designs to come together quickly. Depending on the size of the design project, I normally bypass low fidelity digital design: I find that using a well functioning components library gets you 90% of the way there and it actually takes longer to simplify the designs. I built the UI in Sketch, the final results are below.
<div>
<img src="images/HighFideltiyDesgin1.jpg" width="100%" alt="placeholderimage">
</div>
<div class="ImageSubHeadingNoPaddingBottom">
Results page weighted attributes filter, rank group filter and visual colour markers
</div>
<div>
<img src="images/OptionAandB.jpg" width="100%" alt="placeholderimage">
</div>
<div class="ImageSubHeadingNoPaddingBottom">
Candidate personality insights option A and B
</div>
<br>
</p>
</div>
</section>
<section id="section-10" class="sectionImage">
<div class="container-content">
<h4>Second round of testing</h4>
<p>
I gathered both general feedback and more pointed feedback from clients and Customer Success on whether design A or B was the more neutral presentation of the Big 5 personality traits.
<br><br>
Their general feedback was extremely positive, and the overall vote was for design A.
<div>
<img src="images/OptionAorBResults.jpg" width="100%" alt="placeholderimage">
</div>
<div class="ImageSubHeadingNoPaddingBottom">
Option A and Option B testing with clients
</div>
</p>
<br>
</div>
</section>
<section id="section-11" class="sectionImage">
<div class="container-content">
<h4>Implementation</h4>
<p>I pride myself on the design to developer handover as I once was a front end engineer. I put together a product document for engineering outlining the problem and solution, the business ‘why’, the list of new features, the requirements, metric rules and the before and after UI.
<br><br>
To deliver immediate value to our clients, the feature was split into two stages, personality improvements first then improvements to the results page.
<br><br>
Once each round of implementation was done, it was my job to undertake UAT testing and functional and design sign off before the feature was released. During my UAT testing, I put together a sheet with all of my feedback prioritised by low, medium, high and urgent fixes before the feature was to be released.
<br><br>
Implementation of both features took about a sprint (2 weeks) worth of work.
</p>
<br><br>
</div>
</section>
<section id="section-12" class="sectionImage">
<div class="container-content">
<h4>Learnings</h4>
<p>
After both features were implemented, we received a lot of positive feedback from clients and Customer Success. The weighted attributes and ranked group filters were definitely fan favourites. My key takeaways were:
<br><br><br>
</p>
<div class="subHeading">
<img src="images/paintbucket.svg" alt="testing" width="17" height="17"/> The system sometimes just needs an oil change, not a full service
</div>
<p>
We already had the functionality implemented, but not in a way that enabled our clients to easily access the information they wanted. In the end, we didn't’ need an entire redesign, just some tweaks to bring out this value.
<br><br>
</p>
<div class="subHeading">
<img src="images/routing-2.svg" alt="testing" width="17" height="17"/> The best solution is often the simplest one
</div>
<p>
While I don’t often like to consider the bandaid fixes clients use to solve their problems, in this instance their workaround was quite smart and sophisticated and was easy to implement in our existing system.
<br><br>
</p>
<div class="subHeading">
<img src="images/color-swatch.svg" alt="testing" width="17" height="17"/> You have to be able to work within the restrictions
</div>
<p>
My original design assumed our system would work a certain way technically, when in fact our system had some HARD limitations. Being flexible and adaptable with my designs to work within the current technical system limitations is always crucial.
</p>
</div>
</section>
</div>
<div class="prevnextwrapper fade-in-element">
<div class="prev">
<a href="aivoice"><img height="13" src="images/blue-arrow-left.svg" alt="BlueArrowLeftImage"> Voice AI project</a>
</div>
<div class="next">
<a href="scrunch">Scrunch project <img height="13" src="images/blue-arrow.svg" alt="BlueArrowRightImage"></a>
</div>
</div>
<!-- full width photo -->
<div class="fullwidthphoto fade-in-element"><img src="images/CTGroupphoto.jpg" width="100%" alt="placeholderimage"></div>
<!--Footer-->
<footer>
<div class="footerwrapper fade-in-element">
<a href="mailto:%[email protected]">
<h2>Say hi, don't be shy <img height="30" src="images/arrow-right.svg" alt="ArrowRightImage"></h2>
<p>Feel free to reach out for collaborations or just a friendly hello 🚀 <b>Let's chat.</b></p>
</a>
</div>
<div class="socials fade-in-element">
<div class="footerIcons">
<div class="EmailIcons">
<a href="mailto:[email protected]" target="_blank">
<img class="activeEmailImage" src="images/emailicon.svg" alt="EmailIconLight"></a> <a href="mailto:[email protected]" target="_blank">
<img class="hoverEmailImage" src="images/emailicondark.svg" alt="EmailIcondDark"></a>
</div>
<div class="CameraIcons">
<a href="https://www.shardeheimphotography.com/" target="_blank">
<img class="activeCameraImage" src="images/camericon.svg" alt="CameraIconLight"></a> <a href="https://www.shardeheimphotography.com/" target="_blank">
<img class="hoverCameraImage" src="images/camericondark.svg" alt="CameraIconDark"></a>
</div>
<div class="InstagramIcons">
<a href="https://www.instagram.com/shardeheim/" target="_blank">
<img class="activeInstagramImage" src="images/instagramicon.svg" alt="InstagramIconLight"></a> <a href="https://www.instagram.com/shardeheim/" target="_blank">
<img class="hoverInstagramImage" src="images/instagramicondark.svg" alt="InstagramIconDark"></a>
</div>
<div class="LinkedinIcons">
<a href="https://www.linkedin.com/in/shardeheim/" target="_blank">
<img class="activeLinkedinImage" src="images/linkedinicon.svg" alt="LinkedinIconLight"></a> <a href="https://www.linkedin.com/in/shardeheim/" target="_blank">
<img class="hoverLinkedinImage" src="images/linkedinicondark.svg" alt="LinkedinIconDark"></a>
</div>
</div>
</div>
<div class="madeBy">
Designed and built by Shardé Heim © 2023
</div>
</footer>
</body>
</html>