-
Notifications
You must be signed in to change notification settings - Fork 0
/
he-pricing.html
executable file
·259 lines (201 loc) · 13.8 KB
/
he-pricing.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
<!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="https://medium.com/@thatnitesh" target="blank"><li>Blog</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">HackerEarth Recruit Pricing</div>
<div class="project-desc">
HackerEarth Recruit SaaS application allows technical recruiters to conduct online programming tests and remote interviews to hire tech talent in an effective manner. I recently redesigned our pricing structure to make it more obvious, streamlined and transparent.
</div>
</div>
</div>
</div>
<div class="ff-hepr">
<div class="container">
<div class="row">
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/hepricing/pricing.png"><img class="first-screen" src="images/hepricing/pricingff.png"></a>
</div>
</div>
</div>
</div>
<div class="story">
<div class="container">
<div class="row">
<div class="heading col-md-8 col-md-offset-2">The Task</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.
</p>
<p class="text col-md-8 col-md-offset-2">
We had something called test and interview credits which were nothing but HackerEarth Recruit currency. With credits, you could invite candidates to take recruitment tests or interviews. But it was not clear to our customers that you could invite only one person with one credit, since the the terms credit and invite are so disconnected.
</p>
<p class="text col-md-8 col-md-offset-2">
Also, customers had to purchase credits again and again as they got over and this was a huge pain point as they had to do a number of transactions manually and had to keep track of the number of credits remaining in their account.
</p>
<div class="heading col-md-8 col-md-offset-2">My Work</div>
<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="text col-md-8 col-md-offset-2 visit-row">
<a class="visit-button" href="https://www.hackerearth.com/recruit/pricing" target="blank">Visit Site <i class="fa fa-angle-right"></i></a>
</div>
<div class="heading col-md-8 col-md-offset-2">Invites, Not Credits</div>
<p class="text col-md-8 col-md-offset-2">
Our first step towards making the new pricing structure obvious was to choose to use the term “invite” instead of “credit”. The term “invite” makes it clear that you can invite only one person for a test or an interview. So, invites became the new HackerEarth Recruit Currency.
</p>
<div class="heading col-md-8 col-md-offset-2">Brainstorming Possible Workflows</div>
<p class="text col-md-8 col-md-offset-2">
We started brainstorming different pricing plans. The primary goal is to help customers choose a plan that fits their requirements and then let them use HackerEarth Recruit without having to worry about purchasing invites ever again.
</p>
<p class="text col-md-8 col-md-offset-2">
We zeroed in on four plans, namely<br>
1. Free - Use HackerEarth Recruit for free for as long as you want<br>
2. Startup - For small requirements<br>
3. Enterprise - For enterprise accounts<br>
4. Custom - A tailormade plan that fits your needs
</p>
<p class="text col-md-8 col-md-offset-2">
I started by outlining where the user signs up for a plan and what all cases might occur, for example, if the user hasn't added a payment method or if the free trial period is over. I listed all the scenarios and edge cases and proceeded to design flows to handle them.
</p>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/hepricing/discuss.jpg"><img class="story-img" src="images/hepricing/discuss.jpg"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">Sketches And Flow</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/hepricing/pricingw1.jpg"><img class="story-img" src="images/hepricing/pricingw1.jpg"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/hepricing/pricingw2.jpg"><img class="story-img" src="images/hepricing/pricingw2.jpg"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/hepricing/pricingw3.jpg"><img class="story-img" src="images/hepricing/pricingw3.jpg"></a>
</div>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/hepricing/wizardflow.png"><img class="story-img" src="images/hepricing/wizardflow.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">Pricing Page</div>
<p class="text col-md-8 col-md-offset-2">
I designed a pricing page that sets clear expectations of what our customers can expect from different plans.
</p>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/hepricing/pricing.png"><img class="story-img" src="images/hepricing/pricing.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">Billing & Usage</div>
<p class="text col-md-8 col-md-offset-2">
Billing & Usage section provides a complete overview of the payment methods, usage, due amount and invoices. Here, users can - <br/>
1. View and edit the primary payment method<br/>
2. View their invite usage<br/>
3. View amount due at the end of the month<br/>
4. View and download invoices<br/>
5. Deactivate account<br/>
</p>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/hepricing/billing.png"><img class="story-img" src="images/hepricing/billing.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/hepricing/wizard1.png"><img class="story-img" src="images/hepricing/wizard1.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/hepricing/wizard2.png"><img class="story-img" src="images/hepricing/wizard2.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/hepricing/wizard3.png"><img class="story-img" src="images/hepricing/wizard3.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">The New Sign Up Page</div>
<p class="text col-md-8 col-md-offset-2">
I also redesigned the HackerEarth Recruit sign up page to show the details of the chosen pricing plan and the set of features the customers get with it.
</p>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/hepricing/signuppage.png"><img class="story-img" src="images/hepricing/signuppage.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">Emails</div>
<p class="text col-md-8 col-md-offset-2">
Moving on, I designed the welcome email and other emails to be sent to users at different time. We tried to keep the message as simple and clear as possible.
</p>
<div class="col-md-6 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/hepricing/email1.png"><img class="story-img" src="images/hepricing/email1.png"></a>
</div>
<div class="col-md-6 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/hepricing/email2.png"><img class="story-img" src="images/hepricing/email2.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">What I Learned</div>
<div class="mini-heading col-md-8 col-md-offset-2">People don't like surprises, especially when they're paying</div>
<p class="text col-md-8 col-md-offset-2">
We made it a point that people should know exactly what they are paying for. That means no surprise transactions, no forcing people into upgrading their plan and no hidden costs. Also, we made it really easy for customers to track their usage by showing them their remaining and used invites, monthly due amount, and promptly downloadable invoices for every transaction done previously.
</p>
<div class="mini-heading col-md-8 col-md-offset-2">Design of a pricing structure is much more than what it looks</div>
<p class="text col-md-8 col-md-offset-2">
The visible components of a pricing structure can be compared to the tip of an iceberg. These visible components essentially boil down to the pricing page and the billing section. But there were so many invisible design components that we took care of. That means we simulated a customer's usage journey through each plan and handled all the edge cases that occured. Not to mention, all the notification emails and alerts that we designed.
</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="he" class="proj-nav-btn next"><span class="next-text">NEXT</span><i class="fa fa-long-arrow-right"></i></a>
<a href="jukebox" 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>