-
Notifications
You must be signed in to change notification settings - Fork 0
/
he.html
executable file
·233 lines (186 loc) · 11.9 KB
/
he.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nitesh Kumar's Portfolio</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<link href="css/base.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="name"><a href="index.html">Nitesh Kumar</a></div>
<ul class="nav">
<a href="mailto:[email protected]"><li>Email</li></a>
<a href="http://www.niteshk.com/Nitesh_Kumar_resume.pdf" target="blank"><li>Resume</li></a>
<a href="about"><li>About</li></a>
<a href="index"><li>Work</li></a>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="project-name">Product Design at HackerEarth</div>
<div class="project-desc">
HackerEarth builds technology solutions to help companies hire software developers more efficiently. One such solution is HackerEarth Recruit. HackerEarth Recruit allows technical recruiters to conduct online programming tests to better assess developer skills.
</div>
</div>
</div>
</div>
<div class="ff-he">
<img class="banner" src="images/banners/he-banner.png">
</div>
<div class="story">
<div class="container">
<div class="row">
<div class="heading col-md-8 col-md-offset-2">My Role</div>
<p class="text col-md-8 col-md-offset-2">
I've been a part of HackerEarth for 2 years now and have had the pleasure of working on a wide range of products from a very early stage.
</p>
<p class="text col-md-8 col-md-offset-2">
I joined HackerEarth as their 2nd product designer, when the company and product, both were in a nascent stage. I joined the B2B product team and was incharge of designing HackerEarth Recruit — a SaaS application to help companies assess developer skills more effectively. I have been the only designer in the team.
</p>
<p class="text col-md-8 col-md-offset-2">
I worked closely with developers, product managers, sales, senior management and the rest in a highly collaborative and hands-on process.
</p>
<p class="text col-md-8 col-md-offset-2">
Below is a glimpse of some of the projects. To know the full process in detail, <a href ="mailto:[email protected]" target = "blank">get in touch</a>.
</p>
<div class="text col-md-8 col-md-offset-2 visit-row">
<a class="visit-button" href="https://www.hackerearth.com/recruit/" target="blank">Visit Site <i class="fa fa-angle-right"></i></a>
</div>
<div class="heading col-md-8 col-md-offset-2">Recruit Dashboard</div>
<p class="text col-md-8 col-md-offset-2">
Recruit dashboard is the place where a technical recruiters can see their team's activity - live recruitment tests, live interviews, everything.
It also serves as a place to access different products like tests, interviews and hackathons.
</p>
<p class="text col-md-8 col-md-offset-2">
After interacting with some recruiters, we discovered that not all recruiters in a team were using all the products we had to offer but they were shown these products anyway which was getting in their way. For example - most of the recruiters aren't hackathon oraganisers. Also, as recruiters, they would like to keep a tab on all the live events as well as recently conducted events in the dashboard. This helped us compartmentalize the experience and people were shown only the products they chose to use.
</p>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/he/dash2.png"><img class="story-img" src="images/he/dash2.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/he/dash3.png"><img class="story-img" src="images/he/dash3.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/he/globalnavigation.png"><img class="story-img" src="images/he/globalnavigation.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/he/settings3.png"><img class="story-img" src="images/he/settings3.png"></a>
</div>
<div class="col-md-12 caption">
HackerEarth Recruit dashboard and settings
</div>
<div class="heading col-md-8 col-md-offset-2">Recruit Pricing Structure</div>
<p class="text col-md-8 col-md-offset-2">
In early November 2015, we set out to revisit our pricing strategy with a goal to make it more obvious, streamlined and transparent for our customers. We decided to move to a free-mium subscription model.
</p>
<p class="text col-md-8 col-md-offset-2">
I designed the information architecture, UX flows and visuals for different components of the new pricing structure. Starting with the pricing page, I designed the billing and usage section, subscription plan change wizard, payment settings, flows for different edge cases, payment invoices and emails.
</p>
<p class="text col-md-8 col-md-offset-2">
Since I was designing a B2B product, it was critical that I understood our customers and our business motivations. I took time to discuss with our founding members, the motivation behind rethinking the pricing structure and how we thought it will affect the way our customers use our product. And since I had never designed a pricing structure before, there was a tremendous amount of I could learn.
</p>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/he/pricing.png"><img class="story-img" src="images/he/pricing-small.png"></a>
</div>
<div class="col-md-12 caption">
pricing page
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/he/billing.png"><img class="story-img" src="images/he/billing-small.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/he/wizard2.png"><img class="story-img" src="images/he/wizard2.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/he/wizard3.png"><img class="story-img" src="images/he/wizard3.png"></a>
</div>
<div class="col-md-12 caption">
Billing section and plan change wizard
</div>
<div class="heading col-md-8 col-md-offset-2">Improving usability of test interface based on candidate feedback</div>
<p class="text col-md-8 col-md-offset-2">
HackerEarth provides an interface where the developers can take programming tests created by companies. Their programming skills are assessed based on how they perform in these tests. If they score well, they are shortlisted and are invited for further interview process by the companies.
</p>
<p class="text col-md-8 col-md-offset-2">
This interface is very crucial because:
</p>
<ol class="text col-md-8 col-md-offset-2">
<li>It directly affected people’s prospects of getting a job.</li>
<li>It's an interface for taking tests. Most users have never seen it before. This means that there can be absolutely no learning curve.</li>
</ol>
<p class="text col-md-8 col-md-offset-2">
I recently redesigned the complete test taking experience of the user based on extensive user-study and feedback.
</p>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/he/ti1.png"><img class="story-img" src="images/he/ti1.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/he/ti2.png"><img class="story-img" src="images/he/ti2.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/he/ti3.png"><img class="story-img" src="images/he/ti3.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/he/ti4.png"><img class="story-img" src="images/he/ti4.png"></a>
</div>
<div class="col-md-12 caption">
Some snaps of the new design
</div>
<p class="text col-md-8 col-md-offset-2 para-gap">
These are just some of the projects I did at HackerEarth over 2 years. To know about the full process in detail, <a href ="mailto:[email protected]" target = "blank">get in touch</a>.
</p>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="project-nav">
<a href="index" class="home-link">HOME</a>
<a href="jukebox" class="proj-nav-btn next"><span class="next-text">NEXT</span><i class="fa fa-long-arrow-right"></i></a>
<a href="framerjs" class="proj-nav-btn prev"><i class="fa fa-long-arrow-left"></i><span class="prev-text">PREVIOUS</span></a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 footer">
<div class = "social">
<a href="https://twitter.com/thatnitesh" target="blank">Twitter</a>
<span class="social-sep">-</span>
<a href="https://medium.com/@thatnitesh" target="blank">Medium</a>
<span class="social-sep">-</span>
<a href="https://www.instagram.com/thatnitesh/" target="blank">Instagram</a>
<span class="social-sep">-</span>
<a href="https://in.linkedin.com/in/nitesh-kumar-86631925" target="blank">LinkedIn</a>
<span class="social-sep">-</span>
<a href="mailto:[email protected]" target="blank">Email</a>
<br><br>
© 2017
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bottstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.10.1.min.js "></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="fancybox/lib/fancybox-load.js"></script>
</body>
</html>