-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathknode.html
More file actions
executable file
·275 lines (265 loc) · 12 KB
/
knode.html
File metadata and controls
executable file
·275 lines (265 loc) · 12 KB
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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Knode Case Study</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/style_knode.css">
<!-- JQuery -->
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!-- Header -->
<header>
<nav class="container">
<a name="top"></a>
<div class="header">
<ul id="headers" class="menu no-bullet" >
<li><a data-page="home" href="index.html"><h5>Home</h5> </a></li>
<li><a data-page="about" href="index.html#about"><h5>About</h5> </a></li>
<li><a data-page="contact" href="index.html#contact"><h5>Contact</h5> </a></li>
</ul>
</div>
<hr id="headerline"/>
</nav>
</header>
<main role="main">
<section class="case-study">
<li class="center-text">
<img src="Assets/Knode/KnodeLogo.png" alt="Portfolio" />
</li>
<li class="center-text">
<p>KNODE was created as part of a UX Hackathon event by myself, Alyssa Esteban, Anthony Virey, Ben Booker, and Boris Yu. The goal of the Hackathon was to design a product that redesigned the candidate experience. Ben Booker researched user flows while Anthony Virey researched market analysis. I handled research insights through previous articles and research done on the job market. Boris Yu designed our wireframes, while Alyssa Esteban was our project manager and overall UI designer.
<br/>
<br/>The event was hosted by JET and took place on 04.29.2017 at the JET Headquarters in Hoboken, NJ.</p>
<br/>
<br/><p class="link"> <a href="https://goo.gl/iq19w2">Click for more information on the Hackathon</a> </p>
<br/>
<br/><p>Judges at the UX Hackathon were Juan Sanchez (Director of UX, Jet.com), Travis Kessel (Head of Recruiting, Jet.com) and Sean Echevarria (Product and Research Manager, Jet.com).
<br/>
<br/>Team KNODE placed with special recognition in 4th place.</p>
</li>
<li class="center-text">
<div class="designheading">
<hr id="problemline1"/>
<h2>The Problem</h2>
<hr id="problemline2"/>
</div>
<p>Millennial job-hopping is a major problem within the industry, costing the U.S. economy $30.5 billion annually.*</p>
<h2>Research Methodologies</h2>
<p>Article Research in Millennial Turnover and Job Satisfaction
<br/>User Interviews with active job seekers, employed millennials, and a talent acquisition recruiter.
<br/>Fireside chat with Kathryn Minshew, CEO the Muse</p>
<h2>Market Analysis</h2>
</li>
<div class="market-analysis">
<div>
<li class="market-left">
<img src="Assets/Knode/muse.png" alt="Portfolio" />
</li>
<li class="market-left">
<img src="Assets/Knode/indeed.png" alt="Portfolio" />
</li>
</div>
<div>
<li class="market-right">
<img src="Assets/Knode/monster.png" alt="Portfolio" />
</li>
<li class="market-right">
<img src="Assets/Knode/linkedin.png" alt="Portfolio" />
</li>
</div>
</div>
<h2>Research Insights</h2>
<div class="research">
<div>
<li class="research-left">
<p>Millennials are more inclined to stay at a company long-term when they are actively engaged and feel they have an impact on the company.*
<br/>
<br/>Millennials want to contribute to the positive impact they believe business has on society, but in doing so, they wish to stay true to their personal values.</p>
</li>
</div>
<li class="research-right">
<img src="Assets/Knode/DeloitteScreenshot.png" alt="Portfolio" />
</li>
</div>
<li class="center-text">
<p>82% of millennials believe their personal values are shared by the organizations they work for where they have intention to stay for at least another five years.*
<br/>However, only 27% of millennials expect to stay in their current positions by 2020.
<br/>
<br/>64% of senior millennials indicate that personal values have the greatest influence on their decisions, while 49% of junior millennials say the same.
<br/>The values that millennials associate best with are people treatment @ 26%, ethics @ 25% and customer focus @ 19%</p>
<br/>
<br/><p class="link"> <a href=https://goo.gl/aMW6tY>Click to read more</a> </p>
<br/>
<br/>
<div class="designheading">
<hr id="approachline1"/>
<h2>The Approach</h2>
<hr id="approachline2"/>
</div>
</li>
<div class="approach">
<li class="approach-left">
<img src="Assets/Knode/Triangle.png" alt="Portfolio" />
</li>
<li class="approach-center">
<p>How might we invert the paradigm of the job search?</p>
</li>
<li class="approach-right">
<img src="Assets/Knode/InvertedTriangle.png" alt="Portfolio" />
</li>
</div>
<li class="center-text">
<h2>The Product</h2>
<p>Knode provides the job seeker with an interactive experience to find companies that align with their personal values in order to build long-term employee engagement.
<br/>
<br/>Target User — Millennial at mid–level actively seeking the right company fit.</p>
<h2>User Flow / Wireframes</h2>
</li>
<div class="wireframes">
<div>
<li class="left-third">
<img src="Assets/Knode/WIRE_00.png" alt="Portfolio" />
</li>
<li class="left-third">
<h6>Step 1:
<br/>
<br/>Open up Knode webpage</h6>
</li>
<li class="left-third">
<img src="Assets/Knode/WIRE_02.png" alt="Portfolio" />
</li>
<li class="left-third">
<h6>Step 3:
<br/>
<br/>Companies populate</h6>
</li>
<li class="left-third">
<img src="Assets/Knode/WIRE_04.png" alt="Portfolio" />
</li>
<li class="left-third">
<h6>Step 4b:
<br/>
<br/>Search again or click another node to explore</h6>
</li>
</div>
<div>
<li class="right-third">
<img src="Assets/Knode/WIRE_01.png" alt="Portfolio" />
</li>
<li class="right-third">
<h6>Step 2:
<br/>
<br/>Enter Search Term</h6>
</li>
<li class="right-third">
<img src="Assets/Knode/WIRE_03.png" alt="Portfolio" />
</li>
<li class="right-third">
<h6>Step 4a:
<br/>
<br/>Browse company profile</h6>
</li>
<li class="right-third">
<img src="Assets/Knode/WIRE_05.png" alt="Portfolio" />
</li>
<li class="right-third">
<h6>Step 5:
<br/>
<br/>Apply!</h6>
</li>
</div>
</div>
<li class="center-text">
<div class="designheading">
<hr id="designline1"/>
<h2>Finished Design</h2>
<hr id="designline2"/>
</div>
</li>
<li class="center-text">
<img src="Assets/Knode/Step1.png" alt="Portfolio" />
</li>
<li class="center-text">
<img src="Assets/Knode/Step2.png" alt="Portfolio" />
</li>
<li class="center-text">
<img src="Assets/Knode/Step3.png" alt="Portfolio" />
</li>
<li class="center-text">
<img src="Assets/Knode/Step4.png" alt="Portfolio" />
</li>
<li class="center-text">
<img src="Assets/Knode/Step5.png" alt="Portfolio" />
</li>
<li class="center-text">
<img src="Assets/Knode/Step6.png" alt="Portfolio" />
</li>
<li class="center-text">
<img src="Assets/Knode/Step7.png" alt="Portfolio" />
</li>
<li id="conclusion" class="center-text">
<div class="designheading">
<hr id="conclusionline1"/>
<h2>Conclusion</h2>
<hr id="conclusionline2"/>
</div>
<h3>Doubts</h3>
<p>Some doubts I had going into this project were if we could have a full product on our hands by the end of the time period. Being a Hackathon, time was a limiting factor that really pushed us to think quickly and effectively for a creative solution.</p>
<br/>
<h3>Surprises</h3>
<p>With my doubts being said, however, I was really surprised at how high up our product placed. I think we came up with a great product, and my only regret is that we didn’t get to touch up on some of the more important aspects of the UX design process and get in some more user data.</p>
<br/>
<h3>More Time/Resources
<p><li class="bullet">Time limitations - as you can tell from my case study, we did not have enough time to have effective personal user research or any user testing. While we made do with the research articles and user testing on millennial job market conducted in published papers, I would have liked to have gotten some personalized user surveys and responses filled out. I also would have loved to have gotten some user testing in, as one of the reasons why we placed 4th was because we had no user testing to back up our product. </li>
<li class="bullet">Team Dyanmic - while having all members of the team be equally self motivated and driven, that is unfortunately not the case in a lot of situations. It was challenging to keep people focused, especially given the relative newbness some of us were to the design process.</li></p>
<br/>
<h3>Takeaways</h3>
<p>I learned how to cooperate on a team, specifically as a researcher, while other members handled other aspects of the design process. Having this event be a Hackathon was also a very interesting learning experience, as a full scale project was not possible for some parts of the process. Overall, I really enjoyed this experience. I felt like I learned a lot about working on a UX team and how to efficiently manage my time, a skill that I carried into the rest of my Bloc program.</p>
</div>
</li>
<div class="center-text">
<div class="designheading">
<hr id="approachline1"/>
<h2>More Projects</h2>
<hr id="approachline2"/>
</div>
<a href="http://agchen.design/paycrave.html"> <img src="Assets/PayCraveBanner.png" alt="Portfolio"/> </a>
<a href="http://agchen.design/blocbox.html"> <img src="Assets/BlocboxBanner.png" alt="Portfolio"/> </a>
</div>
</section>
</main>
<!-- Footer -->
<hr/>
<footer>
<div class="footer-nav-block">
<div class="footer-left"><a href="index.html"><img class="logo" src="Assets/Logo3-sm.png" alt="Portfolio" /></a></div>
<div class="footer-mid">
<div class="back"><a href='#top' class="back">back to top</a></div>
</div>
<div class="footer-right"><ul class="social_icons">
<li class="social"><a href="http://instagram.com/ackeepitcool"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></li>
<li class="social"><a href="http://twitter.com/ackeepitcool"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></li>
<li class="social"><a href="http://linkedin.com/agchen"><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i></li>
<li class="social"><a href="http://dribbble.com/ackeepitcool"><i class="fa fa-dribbble fa-2x" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</footer>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-107040718-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-107040718-1');
</script>
</body>
</html>