-
Notifications
You must be signed in to change notification settings - Fork 0
/
sharechat.html
212 lines (197 loc) · 18.5 KB
/
sharechat.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Kush Taneja">
<meta name="description" content="Entrepreneur | Product Manager | Coder">
<meta property="og:title" content="Kush Taneja"/>
<meta property="og:type" content="website">
<meta property="og:url" content="http://kushtaneja.com">
<meta property="og:image" content="img/sharechat-fav.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="100">
<meta property="og:image:height" content="130">
<meta property="og:description" content="ShareChat UX Design Intern Experience | Kush Taneja">
<meta property="og:site_name" content="@kushtaneja"/>
<title>Kush Taneja - ShareChat</title>
<!-- favicon -->
<link href="favicon.png" rel=icon>
<!-- web-fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
<!-- font-awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Style CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-72044402-2', 'auto');
ga('send', 'pageview');
</script>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar">
<div class ="col-md-4" style="height: 733px;
position: relative;
margin-top: 10px;
left: 0;">
<div class="blog-thumb-circle"></div>
<div class="blog-thumb-main" style="background-size: contain;"></div>
</div>
<div style="height: auto;
padding: 160px 32px 0px;
max-width: 800px;" class= "col-md-7">
<div>
<h1 class="sc-iwsKbI dSSzxt">ShareChat</h1>
</div>
<p>As the untapped market of India is gaining the attention of international investors, ShareChat is one of the leading companies to make a product for the vernacular audience in India’s tier 3 population.ShareChat is a <strong>vernacular social media</strong> targeting the Indian audience.</p>
<p>After failing in 13 startup attempts, the hard work of 3 IIT Kanpur Alumni got the shape of ShareChat. They recently got funded by big names in investment, receiving investments of around $100 Million, evaluating the company at $400 Million!</p>
<p><strong>My role:</strong> **I joined the team as the UI/UX Design intern on 14th May, and was blown away with the growth rate of the company. And as they got a new funding, they started to expand the team, with work on the product being the main motive.</p>
<p>I worked with the design team and worked upon the User Creation Process. The app was a platform for non-English people to share and consume content, but most of the content was not being generated by the people themselves. According to data, only 2% of the people registered were generating their own content, every other person was there to just consume the content.</p>
<h1>The Research</h1>
<p>Starting with initial research about the product, the audience and the process, I came across many vital things, which helped in later stages.</p>
<p><strong>User is the king, data is the dictator</strong></p>
<p><img class="blog-image" src="img/sharchat-blog-1.jpg" alt="" /></p>
<p>Every decision made, from micro level to c-suite level, was based on solid data, interpreted correctly. I had no idea whatsoever that having the data was not that important until you interpreted it correctly. So, I started learning some tools for the proper data analysis. I got my hands on CleverTap, making funnels, flows and retention cohorts. As you can see, I did not make any assumptions of my own, like the UI being bad, or the flow being broken, I went straight to the data. I tried to figure out what could be done about the user generation of content, what was the reason behind not making content, or publishing the content. Well, we got to know where were we dropping the most users. They were the ones who first clicked on the add button. Also, I tried to grasp the data about the percentage of every type of data, and got to know that images were the most, and audios were the least. Other than that, the product team told me that most of the users came for consuming, and never even thought about contributing. And those who were posting the content, did because of the number of followers, likes and views. One last thing that came into my notice was that the flow of posting was not efficient. It was confusing, too many steps and not much of a pleasant flow.</p>
<p><strong>User</strong> <strong>P</strong><strong>ersonas are the worst for Indian users.</strong></p>
<p><img class="blog-image" src="img/sharchat-blog-2.jpg" alt="" /></p>
<p>This was the second biggest bummer for me, as I thought that having a good user persona is essential for the design to work efficiently. But, as my mentor told me and gave me the reason for not using user personas in ShareChat, it made more and more sense to me. He told me that the main role of user persona is to have your target audience’s details in one person, so that you can judge your product and how the users will react to your designs. But, in India, the diversity of culture and geography is so vast that to imbibe every Indian into one persona is impossible and insensible. Not only that, it is very difficult to imbibe Indians into double digit numbers of personas. And to have these many personas and to maintain them, is not the most efficient way. Instead, using this energy and resources into actually having small hypothesis and experimenting and A/B testing it, first, gives you far efficient results, as you are actually going into the market and testing it with actual users, and secondly, is less time consuming and frustrating, as you don’t have to assume the customers and maintain them.</p>
<p><strong>KPI is the key</strong></p>
<p><img class="blog-image" src="img/sharchat-blog-3.jpg" alt="" /></p>
<p>I will be honest with you, I had no idea what KPI was until I started working with the team. KPI is the acronym for Key Performance Index. It is the basis, on which you will decide whether your experiment is successful or not. Choosing the correct KPI is of utmost importance. Let me take an example to explain it better to you. For a startup, growth is everything, and according to your startup, you define the basis of defining growth. So, for example, you planted a tree, and you defined the success of your efforts based on the height of the plant in the future. But, if the plant is of watermelon, it won’t be having any height, but instead will ripe into a ton of watermelons that you can eat. So, even though, your design is great for your users, you will never be able to find out its success, if you don’t choose the correct metric. In the internship, I chose the metric as the growth in the user’s percentage and the percentage of UGC created. Well, obviously, our final goal was to increase the growth rate of the product, but that would not be as good of a metric to judge the product.</p>
<h1>The Users</h1>
<p>As I told you before, the user personas were not the way. But I had to have at least some knowledge about our user base. The data was there to serve me. ShareChat had the most audience in the southern part of India, the DAU (Daily Active Users) were around 6 million at the time of my joining. Further, they were mostly living in the tier 3 cities and villages. They didn’t know the English language, and the primary language used in their daily life was the local language. Also, I came to know that they were not aware of the internet until Jio (a telecommunication company) came out and reached the small towns, at around 2016-17.</p>
<p><img class="blog-image" src="img/sharchat-blog-4.jpg" alt="" /></p>
<p><strong>The App ecosystem</strong></p>
<p><img class="blog-image" src="img/sharchat-blog-5.jpg" alt="" /></p>
<p>I came to know about a thing called app ecosystem, I don’t know if it’s useful for each product or company, but it was vital in ShareChat, as our users were new to the internet. They only used some apps, mostly Whatsapp, Facebook and YouTube. When I first heard this information, I didn’t know what to do with it, but as my mentor started explaining it to me, it clicked me. The basic design principle of UI, the familiarity, that our eyes love seeing familiar and simple things. This helped me in designing the UI, interactions and placement decisions of various features.</p>
<h1>My Approach</h1>
<p>I took a basic approach of task completion with Human Computer Interaction in mind. I divided each problem into tasks that needed to be completed by the user, pinned the pain points, and found vital solutions for those tasks.</p>
<p>Problems → Tasks → Solutions → Interfaces</p>
<h1>The Problems</h1>
<p>We had a lot going on, but my main project during the internship was to increase the number of creators.</p>
<ol>
<li>The user side: The post creation process was complex.</li>
<li>The business side: Increase the engagement of the people but with original content.</li>
</ol>
<h1>The Solution</h1>
<h2>Converting problems into tasks</h2>
<p>I converted the problem into the task that users wanted to complete.</p>
<blockquote>
<p>The user wanted to <strong>SHARE</strong> their content on ShareChat.</p>
</blockquote>
<p>No more, no less. So I started digging into the current interaction, which had way too much cognitive load and hard to understand to the conventional user of ShareChat.</p>
<h2>The Current Interaction</h2>
<ul>
<li>Click the pencil icon</li>
<li>Start writing the status or select from the type of content you want to share.</li>
<li>If you select any content, it will open your default gallery.</li>
<li>If you write, you will go to the next step where you will decorate it.</li>
<li>Select the category</li>
<li>Select the tag</li>
<li>If you want to change any settings, change it.</li>
<li>Post it.</li>
</ul>
<h2>Problems with the Current Interaction</h2>
<p>The major problems were:</p>
<ul>
<li>Many people didn’t even see or know that there was a pencil icon.</li>
<li>The default gallery was badly designed for most of the mobiles used by conventional users.</li>
<li>Minimum 50 letters limit in text creation.</li>
<li>No paste clipboard button upfront. The data showed that majority of users pasted the text from their clipboard.</li>
<li>Finding the tag was pretty difficult for first time users.</li>
</ul>
<p><strong>Restructuring the</strong> <strong>F</strong><strong>low</strong> There were following discrepancies in the current flow:</p>
<ul>
<li>The button was not on top in visual hierarchy.</li>
<li>Text compose opened up directly even though the conversion was the least.</li>
<li>Every interaction into the new step.</li>
</ul>
<p><img class="blog-image" src="img/sharchat-blog-6.jpg" alt="" /></p>
<p><img class="blog-image" src="img/sharchat-blog-7.jpg" alt="" /></p>
<p>To make it more user friendly, we proposed the above given flow. In this, we would ask the users up front, what they wanted to post. This would make 4 different pipelines, for 4 different task. One major thing added was the final view screen. This would show how the user’s post would look like. This would then help in reducing the cognitive load from user’s mind. I have broken down my solution step by step.</p>
<h2>My Proposed Solution</h2>
<p><strong>The</strong> <strong>C</strong><strong>ompose</strong> <strong>I</strong><strong>nteraction:</strong> Currently, the compose button was at the bottom right, just like button. Tapping that would open the text composing screen, with all other options at the bottom. This was biased towards creating text heavy posts. But, according to data, the number of text posts were least.So, we decided to give each type of post an equal priority. Also, as the whole navigation flow was revamping, the compose button would be at the centre, more centric and focused. So, our proposed UI was something like this.</p>
<p><img class="blog-image" src="img/sharchat-blog-8.jpg" alt="" /></p>
<p>The right one was chosen, due to the similarity with Whatsapp’s attach file interface.</p>
<p><strong>The</strong> <strong>T</strong><strong>ext</strong> <strong>C</strong><strong>ompose</strong> <strong>S</strong><strong>creen:</strong> Next up was the text compose screen. Currently, the process of making a text post was:</p>
<ul>
<li>Write what you want</li>
<li>Change the decoration of post</li>
</ul>
<p>We revamped the whole process, giving every feature upfront, and not distributing it over different steps.</p>
<p><img class="blog-image" src="img/sharchat-blog-9.jpg" alt="" /></p>
<p>One big feature added was the paste clipboard button. This was because the data told that most of the people paste the text instead of writing it. Also, every feature was at the same screen, which would remove the unnecessary steps.</p>
<p><strong>The Gallery</strong> <strong>S</strong><strong>creen:</strong> There was no initial gallery before, the app used the default gallery, which would reduce our control over the experience. So, we decided to add our own gallery screen.</p>
<p><img class="blog-image" src="img/sharchat-blog-10.jpg" alt="" /></p>
<p><strong>The full post view:</strong> This was a major change in the flow, as people had no idea how the post was looking and what more can be done. This would give the user a sense of his/her creation. Also, this would serve as one portal to every feature. You can reach any feature and do everything from this screen.</p>
<p><img class="blog-image" src="img/sharchat-blog-11.jpg" alt="" /></p>
<p><strong>The tag selection process:</strong> This was the most important thing in the ‘compose’. In the app, each post was given a particular tag, which would further make the post inside one of the many buckets/ categories. So, this was important.</p>
<p>We did some pretty good brainstorming and tried to explore as many variations as possible.</p>
<p><img class="blog-image" src="img/sharchat-blog-12.jpg" alt="" /></p>
<p>In the final UI, these 2 UI interactions went for A/B Testing.</p>
<p><img class="blog-image" src="img/sharchat-blog-13.jpg" alt="" /></p>
<h2>The Prototyping</h2>
<p>After this, I made a prototype in Framer. Framer was a new tool for me, it used CoffeeScript, and had a huge community for FAQs and doubts. So, I started learning Framer and made some dummy prototypes.</p>
<p><img class="blog-image" src="img/sharchat-blog-14.png" alt="" /></p>
<p>I had developed a prototype, but it was not responsive, neither it had dynamic data, everything was hardcoded into the app. Well, according to me, it was the best thing on Earth. But my mentor told me to level up this stupid, not-so-good prototype.</p>
<p>Discouraged, I started exploring, I came to know a basic concept used in coding, the object oriented programming. Well, I started learning how to make a class, how to make instances, and it would benefit me for my prototyping. So, I scraped the whole prototype, and I started again, from scratch. I worked on it for couple of weeks. And finally, it was complete. This was responsive, had dynamic data fetched from a JSON file, was a fully functional working prototype.</p>
<p>https://framer.cloud/DhPsB/</p>
<p><a href="https://framer.cloud/DhPsB">https://framer.cloud/DhPsB</a></p>
<p><strong>Testing:</strong> After completing my prototype, we started testing our hypothesis, and tried to gain reactions from users as well as employees. We were able to test it with around 50+ people, in which we had 3 power-users of ShareChat and many regular users.</p>
<p><strong>Results:</strong> Our testing results were positive, we got some great feedback, which I would consider a huge success.</p>
<ul>
<li>From the 2 types of tag selection, the horizontal scroll (second one) was found to be intuitive from user’s point of view.</li>
<li>The prototype still had a lot of steps, which meant we needed to reduce it further.</li>
<li>The ‘our-own-gallery’ was a good idea from user’s point of view, but it was infeasible from product’s point of view.</li>
<li>Paste clipboard button was a winner.</li>
<li>Full post view screen was one of the most appreciated thing.</li>
</ul>
<h2>Conclusion</h2>
<p>It was an incredible experience for me at ShareChat. This internship helped me a lot with data analysis and how it helps in design, user flows, how to rapidly test and improvise, how to not only think of users but also the technical point of view, and the power of prototyping! I would like to thanks Sohil sir, Ronak, Chetan, Siva, Likith and Kush.</p>
<p>Cheers!</p>
<p> </p>
</div>
<div class="col-md-1" id ="nav">
<div class="content text-center">
<ul class="activitysheet" style="list-style: none;">
<li style="border-radius: 14px;">
<a href="."><h4>Cancel</h4></a>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
<!-- jquery -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- acobot -->
<!-- <script src="https://acobot.ai/js/w?key=428424.UrIMQlBJhBZA4BZu"></script> -->
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution="setup_tool"
page_id="227376697814980">
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>