-
Notifications
You must be signed in to change notification settings - Fork 0
/
channeli.html
executable file
·202 lines (168 loc) · 11.5 KB
/
channeli.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
<!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">Channel i</div>
<div class="project-desc">
Channel i is the official intranet portal of IIT Roorkee, India. It is home for a number of useful apps built keeping in mind the students of IIT Roorkee. It helps students connect with other students and the faculties as well. It also serves as a platform for various campus groups to represent themselves.
</div>
</div>
</div>
</div>
<div class="ff-ci">
<img class="banner" src="images/banners/ci-banner.png">
</div>
<div class="story">
<div class="container">
<div class="row">
<div class="heading col-md-8 col-md-offset-2">My Work</div>
<p class="text col-md-8 col-md-offset-2">
Having worked as a UI/UX designer with <a href="http://img.channeli.in/" target="blank">Information Management Group, IIT Roorkee</a>, I have lead the product vision, took key design decisions, designed UX flows, visuals and implemented them by working closely with the engineering team. Also, I have mentored and closely worked with a team of talented designers while working on Channel i.
</p>
<div class="text col-md-8 col-md-offset-2 visit-row">
<a class="visit-button" href="https://www.quora.com/Reviews-of-Channel-I" target="blank">Know More <i class="fa fa-angle-right"></i></a>
</div>
<div class="heading col-md-8 col-md-offset-2">Older Generations of Channel i</div>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/channeli/ciold.png"><img class="story-img" src="images/channeli/ciold.png"></a>
</div>
<p class="text col-md-8 col-md-offset-2 para-gap">
Channel i was always centered around apps and there was a lot of activity being done on these apps by a diverse community of students and faculties but it was not organised in a useful manner. When I started redesigning Channel i, I placed it around people rather than apps so that it offers a more dynamic experience and decided to make use of the activity done on various apps by presenting it in an organised and useful manner.
</p>
<p class="text col-md-8 col-md-offset-2">
Our first step in this direction was to build a people-centric newsfeed that gives you updates of activity done on various apps.
</p>
<div class="heading col-md-8 col-md-offset-2">Newsfeed</div>
<p class="text col-md-8 col-md-offset-2">
Earlier, people used various apps on Channel i but that information didn't come to the fore. For example - If a student reported on Lost and Found app that he has lost his bag in the campus, nobody would know about it unless they were a frequent visitor of Lost and Found app.
To make this information visible, we decided to introduce Newsfeed - A simple way to know about every activity on all the apps right at your homepage. When you click on a feed item, it takes you to the app it came from.
</p>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/channeli/ci1.png"><img class="story-img" src="images/channeli/ci1.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">Events</div>
<p class="text col-md-8 col-md-offset-2">
Shows all the upcoming events in the campus and public holidays. Users get email reminders before all events. Campus groups can add events and posters. People can filter events using various labels and create their own task list as well.
</p>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/channeli/ci2.png"><img class="story-img" src="images/channeli/ci2.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">Groups</div>
<p class="text col-md-8 col-md-offset-2">
Different campus groups get a page to represent themselves. They can edit their group info, post important updates and add events which would be visible to all students.
</p>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/channeli/ci3.png"><img class="story-img" src="images/channeli/ci3.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">Settings</div>
<p class="text col-md-8 col-md-offset-2">
In settings, people can edit their profile, change profile picture, manage email preferences and keep their account secure by managing sessions.
</p>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/channeli/ci5.png"><img class="story-img" src="images/channeli/ci5.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/channeli/ci6.png"><img class="story-img" src="images/channeli/ci6.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/channeli/ci7.png"><img class="story-img" src="images/channeli/ci7.png"></a>
</div>
<div class="col-md-4 story-small-box">
<a class="fancybox-button" rel="fancybox-button" href="images/channeli/ci8.png"><img class="story-img" src="images/channeli/ci8.png"></a>
</div>
<div class="heading col-md-8 col-md-offset-2">A More Human Help Center</div>
<p class="text col-md-8 col-md-offset-2">
Earlier, there was no help center in Channel i and students had to contact us via other means for any issues or questions. When we decided to build a help center as a part of the new Channel i, we knew that we couldn't have a static help center with articles and FAQs. We knew that it was meant to help the students of a college and their issues and queries were time-specific.
</p>
<p class="text col-md-8 col-md-offset-2">
We decided to build a 1 - 1 chat for help. If any student had a question, he could just shoot us a quick message and we would reply promptly. It worked for us because of the fixed number of our users. It helped make support feel more human and direct and it helped us be more empathatic towards our users.
</p>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/channeli/ci9.png"><img class="story-img" src="images/channeli/ci9.png"></a>
</div>
<p class="para-gap text col-md-8 col-md-offset-2">
Since it's launch, many components of Channel i have changed and we have been iterating on the product continuously to make it better.
</p>
<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">Information is useless if not organised properly</div>
<p class="text col-md-8 col-md-offset-2">
When we built the newsfeed, it acted as a bridge between different apps and people. People could see relevent information without having to look for it. This taught me what impact properly organised information can have on people's lives.
</p>
<div class="mini-heading col-md-8 col-md-offset-2">User experience extends way beyond your product</div>
<p class="text col-md-8 col-md-offset-2">
How you treat your users, how empathatic you are towards them defines user experience as much as a well built product.
</p>
<div class="mini-heading col-md-8 col-md-offset-2">Be ready to kill features and products</div>
<p class="text col-md-8 col-md-offset-2">
You don't want to build a vacuum cleaner that can also make you coffee. It's okay to kill features and products that don't add value. It helps you focus.
</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="metroapp" 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>