1<!DOCTYPE html> 2<!--[if IE 8 ]><html class="no-js oldie ie8" lang="en"> <![endif]--> 3<!--[if IE 9 ]><html class="no-js oldie ie9" lang="en"> <![endif]--> 4<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]--> 5<head> 6 7 <!--- basic page needs 8 ================================================== --> 9 <meta charset="utf-8"> 10 <title>Clearfunds-Avik Dey-UI/UX Designer</title> 11 <meta name="description" content="Bringing simplicity and clarity to investing"> 12 <meta name="author" content=""> 13 14 <!-- mobile specific metas 15 ================================================== --> 16 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 17 18 <!-- CSS 19 ================================================== --> 20 <link rel="stylesheet" href="css/base.css"> 21 <link rel="stylesheet" href="css/vendor.css"> 22 <link rel="stylesheet" href="css/main.css"> 23 24 25 <!-- script 26 ================================================== --> 27
27<script src="js/modernizr.js"></script>
27 28
28<script src="js/pace.min.js"></script>
28 29 30 <!-- favicons 31 ================================================== --> 32 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 33 <link rel="icon" href="favicon.ico" type="image/x-icon"> 34 35</head> 36 37<body id="top"> 38 39 <!-- header 40 ================================================== --> 41 <header class="short-header"> 42 43 <div class="gradient-block"></div> 44 45 <div class="row header-content"> 46 47 <div class="logo"> 48 <a href="index.html">Avik Dey</a> 49 </div> 50 51 <nav id="main-nav-wrap"> 52 <ul class="main-navigation sf-menu"> 53 <li><a href="index.html" title="">Work</a></li> 54 <li><a href="about.html" title="">About</a></li> 55 56 </ul> 57 </nav> <!-- end main-nav-wrap --> 58 59 60 61 <div class="triggers"> 62 <a class="menu-toggle" href="#"><span>Menu</span></a> 63 </div> <!-- end triggers --> 64 65 </div> 66 67 </header> <!-- end header --> 68 69 <!-- content 70 ================================================== --> 71 <figure class='full-widthimg'> 72 <img src=images/clearfunds/cover.png alt=âclearfundscoverâ width=100%> 73 </figure> 74 75 <section id="content-wrap" class="blog-single"> 76 <div class="row"> 77 <div class="col-twelve"> 78 79 <article class="format-standard"> 80 81 <div class="primary-content"> 82 83 <h1 class="page-title">Clearfunds</h1> 84 85 <ul class="entry-meta"> 86 <li class="date">Feb-Aug 2017</li> 87 <li class="cat"><a href="#">Website, Tools</a></li> 88 </ul> 89 90 <p class="lead">Bringing simplicity and clarity to investing.</p> 91 <p> <a href="https://clearfunds.com/" target="_blank">Clearfunds</a> is a Mutual Fund Marketplace, and investment advisor in India. The <a href="https://en.wikipedia.org/wiki/Robo-advisor">robo-advisory</a> platform provides financial planning advice via their web and mobile tools. With the government promoting investment to the masses, the number of investors multiplied many folds since 2015. Clearfunds entered the market at the right time to capitalize on this trend. 92</p> 93 94 95 <p> 96 97The<a href="https://www.clearfunds.com/about"> founders of Clearfunds</a> are well-known in the finance sector. Their large network along with some media coverage helped acquire the first thousand customers. Many in this group were well-paid professionals who invested their money in <a href="https://www.clearfunds.com/resources/direct-vs-regular-plan">regular mutual funds</a> -- paying up to 1% in commissions every year.</p> 98 99<p><img src=images/clearfunds/graph.png alt="graph" width="100%"></p> 100 101<p>The company's original messaging focused on educating users about hidden commissions they were paying with regular mutual funds. While this was effective in acquiring customers, it did not communicate other qualities of the platform. Through competitor research and user interviews, we identified and reinforced the messaging to emphasize the platform's expertise and trustworthiness. 102</p> 103 104 105 106 107<img src=images/clearfunds/web.png style="margin-bottom:0;" width="100%" ;> 108 109 <div> 110 <br> 111 <p style="font-size: 16px"> 112 <a href="https://clearfunds.com/" target="_blank"><b>Launch website</b></a></p> 113 114<br> 115<br> 116<h2>Illustrations</h2> 117<p>I developed an illustration style for the Clearfunds brand, which was used for the website, editorials, and marketing campaigns. The primary challenge was to create a theme that conveyed the sophistication of a financial product in a simple manner. To illustrate the concept of small costs compounding over time, I used extra-large elements. The use of characters helped convey the scale and drama while making the brand more human. 118</p> 119<div> 120 121<div class="col-six tab-full"> 122 <img style="margin-bottom:0" src=images/clearfunds/dev.png alt="development" width="100%"> 123 </div> 124 <div class="col-six tab-full"> 125 <p style="font-size: 13px"><br><b>Development of Illustration style:</b><br><ol> 126 <li style="font-size: 13px">This style was initially developed for error screens. The team found it too dark and gloomy for an investing platform. Silhouttes also constrained the level of detail. However, it gave us the idea of using bold dark elements to convey negative emotions wherever needed. 127 </li> 128 <br> 129 <li style="font-size: 13px"> 130I improved the illustrations with more detail and color. This style too had two issues: First, the colors - though realistic, felt disconnected the Clearfunds brand. Secondly, the character was dressed in a western attire and was hard to relate for an Indian audience. 131 </li> 132 <br> 133 <li style="font-size: 13px"> 134 I had to develop a fresh color palette for the illustrations. I refined the style further - making the illustration cleaner and flatter while adding more drama to make the characters appear more animated. 135 </li> 136 </p> 137 </div> 138 139 <p><img src="images/clearfunds/grow.png" width="100%"></p> 140 141 142 <p><img src="images/clearfunds/stoppaying.png" width="100%"></p> 143 144 </div> 145</div> 146<div> 147 <h2>Investment Tools</h2> 148 <p>The company's primary goal is to provide superior financial advice to its users and help them invest in the best fund schemes. Through research, we categorized users into three levels of expertise and developed tools to address their investment needs. These tools make it easier invest and manage their portfolio. 149 </p> 150<b>Dashboard search and explore</b> 151 <img style="margin-bottom:0" src=images/clearfunds/dashboard.png alt="dashboard" width="100%"> 152 <div> 153 <p style="font-size: 13px">The primary way to search funds. People could additionally filter, compare and buy funds through the dashoard. 154 </p><br> 155 <b>Clearfunds recommended</b> 156 <img style="margin-bottom:0" src=images/clearfunds/recommended.png alt="recommended" width="100%"> 157 <div> 158 <p style="font-size: 13px">Too many options may feel overwhelming. Clearfunds applies statistical modelling with some machine learning to help users narrow their investment choices. 159 </p><br> 160 </div> 161 162 <b>Fund Finder</b> 163 <img style="margin-bottom:0" src=images/clearfunds/fundfinder.png alt="fundfinder" width="100%"> 164 <div> 165 <p style="font-size: 13px">It is difficult for early investors to decide the type of funds to invest in. Fund helper educates and guides users to the appropriate fund categories â based on their time horizon and risk appetite. 166 </p><br> 167 </div><b>Portfolio Builder</b> 168 <img style="margin-bottom:0" src=images/clearfunds/portfoliobuilder.png alt="portfoliobuilder" width="100%"> 169 <div> 170 <p style="font-size: 13px">Portfolios are a diversified mix of funds that help maximize returns while minimizing risk. Users answer questions regarding their financial life and their reason for investing -- based on which clearfunds recommends a personalized portfolio. 171 </p><br> 172 </div> 173 174 175</div> 176 177<div> 178<h2>Mobile Screens</h2> 179<p>We also developed the mobile experience for Clearfunds. Since the tools and dashboards were data intensive, we followed a desktop-first approach to ensure efficient usage of the real estate. This made it more challenging to visualise the designs for smaller screens. I explored <a href="https://css-tricks.
179com/responsive-data-tables/"> different strategies</a> and optimised the experience to facilitate comparison. 180</p> 181 182<div class="card-grid"> 183 <div class="card-wrap"> 184 <div class="card"> 185 <img src=images/clearfunds/mob1.png alt=âmob1â width=100%> 186 187 </div> 188 </div> 189 <div class="card-wrap"> 190 <div class="card"> 191 <img src=images/clearfunds/mob2.png alt=âmob2â width=100%> 192 193 </div> 194 </div> 195 196 <div class="card-wrap"> 197 <div class="card"> 198 <img src=images/clearfunds/mob3.png alt=âmob3â width=100%> 199 200 </div> 201 </div> 202 203 204<div class="card-wrap"> 205 <div class="card"> 206 <img src=images/clearfunds/mob4.png alt=âmob4â width=100%> 207 208 </div> 209 </div> 210 </div> 211</div> 212<br> 213<h2>Conclusion</h2> 214 <p> 215 Apart from setting up the design process, the project also improved the team's design thinking. This project helped us bring simplicity and approachability to a complex domain like finance. As a result, Clearfunds saw a 30-fold increase in the number of investors on the platform in 6 months. They was acquired by Indian payments company Mobikwik in 2018. 216 217<p>With no prior experience in the investment sector, this was a challenging but a great learning experience for me. I was fortunate to interact with the managers of leading fund houses and learn from some of the best people in the industry.</p> 218A very special thanks the founders of Clearfunds: <a href="https://www.linkedin.com/in/kuna1bajaj/" target="_blank">Kunal Bajaj</a>, <a href="https://www.linkedin.com/in/iranisarosh/" target="_blank">Sarosh Irani</a> and <a href="https://www.linkedin.com/in/jtibrewala/">Jaideep Tibrewala</a> for their invaluable inputs. 219</p> 220 221 222 223 224 </div> <!-- end entry-primary --> 225 226 <div class="pagenav group"> 227 228 <div class="prev-nav"> 229 <a href="safarist.html" rel="prev"> 230 <span>Previous</span> 231 The Safarist 232 </a> 233 </div> 234 <div class="next-nav"> 235 <a href="hotstar.html" rel="next"> 236 <span>Next</span> 237 Hotstar-Case study 238 </a> 239 </div> 240 </div> 241 242 243 <div class="author-profile"> 244 <a href="about.html"> <img src="images/avatars/dp.jpg" alt="avatar"></a> 245 246 <div class="about"> 247 <h4><a href="about.html">Avik Dey</a></h4> 248 249 <p>UI/UX designer based in Helsinki. Ex-design lead at TinyOwl and Runnr. 250 </p> 251 252 253 </div> 254 </div> <!-- end author-profile --> 255 256 </article> 257 258 259 </div> <!-- end col-twelve --> 260 </div> <!-- end row --> 261 262 </section> <!-- end content --> 263 264 265 <!-- footer 266 ================================================== --> 267 <footer> 268 269 270 <div class="footer-bottom"> 271 <div class="row"> 272 273 <div class="col-twelve"> 274 <div class="links"> 275 <span> 276 <a href="https://dribbble.com/avikdey" target="_blank"><img src="dribbble.png" alt="dribbble" 277 width="48px" height="48px"></a> 278 </span> 279 <span> 280 <a href=" 281 https://www.linkedin.com/in/deyavik/" target="_blank"><img src="linkedin.png" alt="Linkedin" width="48px" height="48px"> 282 </a> 283 </span> 284 </div> 285 286 <div id="go-top"> 287 <a class="smoothscroll" title="Back to Top" href="#top"><i class="icon icon-arrow-up"></i></a> 288 </div> 289 </div> 290 291 </div> 292 293 <div class="col-twelve"> 294 295 296 <div class="col-twelve"> 297 <div class="copyright"> 298 <span>© Copyright Avik Dey 2018 ⢠</span>
299 <span>Template by <a href="http://www.styleshout.com/">styleshout</a></span> 300 </div> 301 302 <div id="go-top"> 303 <a class="smoothscroll" title="Back to Top" href="#top"><i class="icon icon-arrow-up"></i></a> 304 </div> 305 </div> 306 307 </div> 308 </div> 309 </footer> 310 <!-- end footer-bottom --> 311 312 <div id="preloader"> 313 <div id="loader"></div> 314 </div> 315 316 <!-- Java Script 317 ================================================== --> 318
318<script src="js/jquery-2.1.3.min.js"></script>
318 319
319<script src="js/plugins.js"></script>
319 320
320<script src="js/main.js"></script>
320 321 322</body> 323 324</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.