-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcleartax.html
278 lines (248 loc) · 16.4 KB
/
cleartax.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Product Design Internship at ClearTax</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<script src="js/script.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="img/site.webmanifest">
</head>
<body><style>
.ct-bar-color{
background-color: #00a2ff !important;
}
.section-desc ul{
color: #00a2ff;
}
.page-sp-link{
color: #00a2ff;
}
.page-sp-link:hover{
color: #0682ca;
}
.challenge-banner{
background-image: url('img/challenge-banner.png');}
.header-image .ct-banner{
background-image: url('img/ct-banner.png');}
</style>
<div class="fixed-top" id="header">
<nav class="navbar navbar-expand-sm navbar-light">
<a class="navbar-brand" href="index.html"><img alt="Yash Khandelwal" src="img/logo.svg"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mr-auto"></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html#works">Works<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href=" https://drive.google.com/file/d/1-pVIPOUIaZktp9aUnPU_4Da5dlcWhpMH/view?usp=sharing">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<div id="header-progress" class="ct-bar-color"></div>
</div>
<div class="header-image" data-aos="fade-up">
<div class="ct-banner"></div>
<div class="header-info">
<h1>Product Design Internship at ClearTax</h1>
<div class="separator-line"></div>
<table>
<tr>
<td class="table-heading">Role</td>
<td>Product Design Intern<br><date>May 2019 - July 2019</date></td>
</tr>
<tr>
<td class="table-heading">Project</td>
<td>ClearTax Desktop Companion</td>
</tr>
<tr>
<td class="table-heading">Website</td>
<td><a href="https://cleartax.in" class="page-sp-link" target="_blank">Cleartax.in</a></td>
</tr>
</table>
</div>
</div>
<div class="content-separator-line"></div>
<div class="section-desc" data-aos="fade-up">
<heading>Project Overview</heading>
<ul type="bullet">
<li><span>Simplifying the process of GSTR-9 filing by providing a web automated desktop tool.</span></li>
<li><span>Analyse the existing tool and find out the scopes of further improvement in the user experience.</span></li>
<li><span>My major task was to deliver designs that would <span id="t5">simplify and educate </span>the user about the process.</span></li>
</ul>
</div>
<div class="content-separator-line"></div>
<div class="section-desc" data-aos="fade-up">
<heading>Understanding the Product</heading>
<ul type="bullet">
<li><span>First 2-3 weeks of the internship were spent on understanding of the taxation system in India and how a taxpayer faces problems while paying taxes.</span></li>
<li><span>Understanding of the Product (ClearTax GST) and how this platform is being used by the taxpayers.</span></li>
<li><span>Much of this time I spent on reading research material compiled by ClearTax User Research Team. The research included taxpayer’s experiences, the pain points they face and what expectations they had set up already with a tool like ClearTax.</span></li>
<li><span>This stage involved the analysis of the existing tools and system, trying to find out the scopes of improvements. </span></li>
<li><span>It also involved getting hands on the ClearTax Design System. For the first time I was working with a design system, hence it became important for me to understand the tone and emotion conveyed by the design system at ClearTax.</span></li>
<li><span>A part of this time was spent on conducting a critical analysis of the exisitng tool and trying to figure out the scope of improvements.<img class="full-image" src="img/results.png"></span></li>
</ul>
</div>
<div class="content-separator-line"></div>
<div class="section-desc" data-aos="fade-up">
<heading>Context <span id="t1">|</span><span id="t2"> What is GST?</span></heading>
<ul type="bullet">
<li><span>Goods and Service Tax (GST) is an indirect tax levied on the supply of goods and services.</span></li>
<li><span>Tax under GST is paid through GST Returns.</span><br><span id="t3">GST Return is a document which contatin details of sales, purchases, tax collected and claimed by the taxpayer. There are of various types like GSTR-1, 2A, 3B, 9 etc.</span></li>
<li><span>GSTR-9 is an annual return that contains details regarding all the sales and purchases made throughout a given financial year.<br><span id="t6">It is a consolidation of all the monthly returns, i.e., GSTR-1, 2A and 3B.</span><br><br>The given information is sufficient to understand the project. You can still learn more about GST at <a class="page-sp-link" href="https://cleartax.in/gst" target="_blank">ClearTax GST</a> </span></li>
</ul>
</div>
<div class="content-separator-line"></div>
<div class="section-desc" data-aos="fade-up">
<heading>Understanding the Problem</heading>
<ul type="bullet">
<li><span>ClearTax’s GST users were primarily Charted Accountant (CA) firms. These are firms headed by a CA or a group of CA who are responsible for filing tax returns for different GSTINs.</span></li>
<li><span>GSTR-9 Filing was a cumborsome task for CA as for each GSTIN a CA has to download all the monthly returns over a span of one financial year, then reconcile and audit each of them, compile and then file them back on the government portal.</span></li>
<li><span>For a span of two years a CA was suppose to download in total 24 months * 3 returns per month, total 72 returns.<br><br>Hence the overall process looked like this<br> <br> <img class="full-image" src="img/Initial Flow.png"><br><br></span></li>
<li><span>Therefore, this became a very long and time consuming task, and from here came the need of drafting a solution that can help a filer save his/her time.</span></li>
</ul>
</div>
<div class="content-separator-line"></div>
<div class="challenge-banner" data-aos="fade-up">
<heading>Challenge<br></heading>
<p>To simplify the experience of downloading all monthly returns in one go for a GSTR-9 filer and help him filing GSTR-9</p>
</div>
<div class="content-separator-line"></div>
<div class="section-desc" data-aos="fade-up">
<heading>Task Flow</heading><br> <br>
<p id="t12">There existed a desktop companion, however it had its own limitations. The following task flow shows the path one had to take to download files, using the desktop companion.</p>
<img src="img/task-flow.png" class="full-image">
</div>
<div class="content-separator-line"></div>
<div class="section-desc" id="t8" >
<heading>Final Designs</heading>
<div class="design-row" data-aos="fade-up">
<img src="img/fd123.png" class="image-div">
<div class="content-div">
<div class="content-box">
<div class="number">1</div>
<div class="content-rectangle">Iconography for fast and easy scanning of content</div>
</div>
<div class="content-box">
<div class="number">2</div>
<div class="content-rectangle">Upfront and clear instructions to guide the user</div>
</div>
<div class="content-box">
<div class="number">3</div>
<div class="content-rectangle">Tabs to see ongoing processes and notifications</div>
</div>
</div>
</div>
<div class="design-row" data-aos="fade-up">
<img src="img/fd45.png" class="image-div">
<div class="content-div">
<div class="content-box">
<div class="number">4</div>
<div class="content-rectangle">Button to file GSTR-9 once the data is downloaded</div>
</div>
<div class="content-box">
<div class="number">5</div>
<div class="content-rectangle">Option to Perform Actions on the downloaded data</div>
</div>
</div>
</div>
<div class="design-row" data-aos="fade-up">
<img src="img/fd67.png" class="image-div">
<div class="content-div">
<div class="content-box">
<div class="number">6</div>
<div class="content-rectangle">Option to perform specific downloads</div>
</div>
<div class="content-box">
<div class="number">7</div>
<div class="content-rectangle">Clear warnings wherever required</div>
</div>
</div>
</div>
</div>
<div class="content-separator-line"></div>
<div class="section-desc" data-aos="fade-up">
<heading>Final Takeaways</heading>
<ul type="bullet">
<li><span>The initial phase of learning was more about understanding the whole process of how and what it takes to ship a product. This being my first internship, I dedicated most of my time in learning how different teams collab and what can be my takeaways as a designer from these teams.</span></li>
<li><span>Learnt to work on a design system. Before that I have always worked in an open environment with no constraints. However, at ClearTax I was supposed to follow a design system and also write content that suits their brand, emotion and tone. Added Sketch, Whimsical, Marvel, Abstract to my skill set. </span></li>
<li><span>Majority of my work was laid on the lines of drafting better content such that users read and understand it. I learnt that how important it is for a designer to write copy that acutally helps the users.</span></li>
<li><span>Desktop Companion was a very challenging task and there were lot of other cases / scenarios which were yet to be deal with. Solving for those cases were the key factors which motivated me always to learn and grow</span></li>
</ul>
</div>
<div class="thankyou">
<p>Thanks For Reading</p>
</div>
<div class="content-separator-line" id="t9"></div>
<div class="all-projects" id="other-projects">
<div class="intern-projects" data-aos="fade-up">
<h2>See Other Projects</h2>
<div class="project-stack">
<div class="card card-setu">
<div class="card-content">
<h1>UX Design Internship at Setu</h1>
<div class="card-line"></div>
<a href="https://setu.co/">Visit Website</a>
</div>
</div>
<div class="card card-turing ">
<div class="card-content">
<h1>UI/UX Design Internship at turingLabs</h1>
<div class="card-line"></div>
<a href="https://www.turinglabs.in/">Visit Website</a>
</div>
</div>
<div class="card card-sds ">
<div class="card-content">
<h1>Redesigning Study Portal at SDSLabs</h1>
<div class="card-line"></div>
<a href="studyportal.html">Read Documentation</a>
</div>
</div>
<div class="card card-nss ">
<div class="card-content">
<h1>Rebranding National Social Summit</h1>
<div class="card-line"></div>
<a href="nss.html">Read Documentation</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer" id="mobile-css">
<div class="footer-content" id="contact" data-aos="fade-up">
<h2> <span id="t14">Let's</span> Connect!</h2>
<p>I am open to all type of project or freelance opportunities.<br> Ping me now to discuss or just say hello.</p>
<h4>Email</h4>
<a href="mailto:[email protected]">[email protected]</a>
<div class="social-links">
<a href="https://www.linkedin.com/in/khandelwaly/" target="_blank"><i class="fa fa-linkedin"></i></a>
<a href="https://www.behance.net/yashgupta8d6cb" target="_blank"><i class="fa fa-behance"></i></a>
<a href="https://dribbble.com/yashg" target="_blank"><i class="fa fa-dribbble" target="_blank"></i></a>
<a href="https://www.facebook.com/Gupta.yashuu" id="t15" target="_blank"><i class="fa fa-facebook"></i></a>
</div>
</div>
<img src="img/HumaaLeaf.svg">
</div>
</body>
</html>