<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Made | Tuhin Kumar</title>
    <meta name="author" content="Tuhin Kumar">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="http://tuhin.co/theme/bootstrap.min.css">
    <link rel="stylesheet" href="http://tuhin.co/theme/style.css">
    <link rel="stylesheet" href="./theme/style.css">
    <link rel="stylesheet" href=>
    <link href='http://fonts.googleapis.com/css?family=Playfair+Display:700' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="./theme/jquery.unveil.js"></script>
    <script>
        $( document ).ready(function() {
            $("img").unveil(200, function() {
              $(this).load(function() {
                this.style.opacity = 1;
              });
            });
            console.log( "ready!" );

        });
    </script>
</head>

<body>

<div>
        <header class="container fade-in one darkheader">
            <div id="top">
                <div id="nav">
                    <p><a class="navtitle" href="http://tuhinkumar.com">Made</a>
                    </p>
                </div>

                <div class="clearfix"></div>
                <ul id="globalnav">
                    <li><a class="" href="http://tuhin.co">Journal</a>
                    </li>
                    <li><a class="active" href="http://tuhinkumar.com">Projects</a>
                    </li>
                    <li><a class="" href="http://tuhin.co/about.html">About</a>
                    </li>
                </ul>
            </div>
        </header>

        <div id="main" role="main">
             
<article>
        <div class="container aboutintro portfoliointro">
                    <div class="row">
                        <div class="col-md-12 fade-in two">
                            <div class="heroimage fade-in two">
                            </div>
                        </div>
                    </div>
                    <div class="row fade-in three">
                        <div class="col-sm-6 col-md-4">
                        <h1>Tuhin <br />Kumar</h1>
                        <h5 class="smallheadline">Currently at Apple</h5>
                        </div>

                        <div class="col-sm-6 col-md-offset-1 col-md-7">
                            <h3 class="_currentjob">Human Interface Designer at <a href="https://apple.com">Apple</a></h3>  

                            <p>Prior to this I was at <a href="https://airbnb.com">Airbnb</a> where I focused on interactions, design system and worked on almost all the product surfaces over my 4.5 years there. Before that I was a Founding Designer at <a href="https://claralabs.com">Clara</a> — a new way of interacting with computers and information. Long time ago I was at <a href="http://facebook.com">Facebook</a>, building systems for the society as a product designer. I was the first full-time designer at <a href="http://bits.blogs.nytimes.com/2010/06/01/the-ipad-pulse-reader-scales-the-charts/?_r=0">Pulse</a>, an Apple Design Award winning news app (now acquired by LinkedIn).</p> 

                            <p><a class="contact" href="mailto:tuhin@me.com">GET IN TOUCH</a></p>
                        </div>
                    
                    </div>
                </div>

    <div class="clearfix"></div>
</article>

<div id="portfolio">
    <div class="container">
<!--     <div class="row">
        <h1 class="portfoliomega col-xs-2"> Selected Works</h1>
    </div> -->

     

    


    <!-- Airbnb Trip Planner -->
    <article class="airbnbdls centered">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="projectyear">2019</h1>
            </div>
        </div>


        <div class="entry-detail">
            <div class="row">
                <div class="col-sm-4 col-md-3">
                    <h1>Airbnb DLS & Spatial Model</h1>
                    <div class="entry-content">
                        <ul class="entry-meta">
                            <li>With Áthila, Yujin, Eric & many others</li>
                        </ul>
                    </div> 
                </div>
            </div>

            <div class="row">
                <div class="col-sm-10 col-md-offset-0 col-md-5">
                    <p><p>Over the course of 2019 we redesigned Airbnb’s entire design system (<a href="https://airbnb.design/?s=dls&amp;is_v=1">DLS</a>) to make it more vivid, global and accessible. I was part of the small group that established a vision of the new system and later joined the DLS team to execute on that vision.</p>
<p>The work spanned across color, typography, interactions, components, layouts and many other facets involving multiple designers and engineers. </p>
<p>I led the effort to enhance fluidity of the Airbnb app - one of the key aspects of the original vision. We looked across the entire guest journey and critical moments to establish a spatial model for the entire Airbnb app — creating new modal patterns and a cohesive library of interactive view transitions.</p>
<p><a href="https://twitter.com/tuhin/status/1207443511768780801">LEARN MORE</a></p></p>
                </div>
                <div class="col-xs-12 col-md-8 col-md-offset-4">
                   <video class="newdls" autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/newdls.png" muted playsinline webkit-playsinline>
                    <source src="https://dv3qy69e0zfs0.cloudfront.net/images/newdls.mp4" type="video/mp4">
                    <img src="https://dv3qy69e0zfs0.cloudfront.net/images/newdls.png">
                </video>
                </div> 

            </div>

            <div class="row">
            <div class="col-xs-12 col-md-offset-1 col-md-11 right dlsprimitives">
                <img src="https://dv3qy69e0zfs0.cloudfront.net/images/dlsprimitives.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/dlsprimitives.png">
            </div>
            <div class="col-xs-12 left spatialmodel">
                <img src="https://dv3qy69e0zfs0.cloudfront.net/images/spatialmodel.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/spatialmodel.png">
                
            </div>
            <div class="col-xs-12 col-sm-6 col-sm-offset-6 col-md-4 col-md-offset-8 right spatialmodelcaption">
            	<span class="caption right">We defined Spatial position of each canvas as well as role for X, Y and Z axis. This allowed us to create a unified family of interactive transitions</span>
            </div>
        	</div>

        	<div class="row">
            <div class="col-xs-6 col-xs-offset-0 col-sm-6 col-sm-offset-0 col-md-5">
                <video class="popovers" autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/popovers.png" muted playsinline webkit-playsinline>
                    <source src="https://dv3qy69e0zfs0.cloudfront.net/images/Popovers.mp4" type="video/mp4">
                    <img src="https://dv3qy69e0zfs0.cloudfront.net/images/popovers.png">
                </video>
                <span class="caption left">Modal patterns that contextually grow, can be stacked, work with dynamic type and can have scroll views</span>
            </div>

            <div class="col-xs-6 col-xs-offset-0 col-sm-6 col-sm-offset-0 col-md-5 col-md-offset-2">
                <video class="viewtransition" autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/viewtransition.png" muted playsinline webkit-playsinline>
                    <source src="https://dv3qy69e0zfs0.cloudfront.net/images/viewtransition.mp4" type="video/mp4">
                    <img src="https://dv3qy69e0zfs0.cloudfront.net/images/viewtransition.png">
                </video>
                <span class="caption right">Views can be dismissed by a continuous pan gesture and provides haptic feedback to aid the user</span>
            </div>

        	</div>

        </div>
        

        <div class="clearfix"></div>
    </article>
              

      


    <!-- Airbnb Trip Planner -->
    <article class="airbnbplanner centered">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="projectyear">2018</h1>
            </div>
        </div>


        <div class="entry-detail">
            <div class="row">
                <div class="col-sm-4 col-md-3">
                    <h1>Airbnb Trip Planner</h1>
                    <div class="entry-content">
                        <ul class="entry-meta">
                            <li>With Danny & Eric</li>
                        </ul>
                    </div> 
                </div>
            </div>

            <div class="row">
                <div class="col-sm-10 col-md-offset-0 col-md-5">
                    <p><p>I co-led the redesign of Airbnb itinerary to move away from an itemized list of bookings to a planning surface. We wanted to mimic how people plan on paper — writing simple lists, checking things off, moving them around — for a digital medium.</p>
<p>We combined different ways people plan into a simple &amp; fun interface where it was easy to switch from planning spatially to planning around free time. The result was a day by day itinerary paired with a fluid map to aid planning in the real world. Additionally each day shows recommendations from your Airbnb host as well as the larger host community to help you make the most out of your trip.</p></p>
                </div>
                <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 col-md-5 col-md-offset-2">
                   <video class="tripplanner" autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/tripplanner.png" muted playsinline webkit-playsinline>
                    <source src="https://dv3qy69e0zfs0.cloudfront.net/images/tripplanner.mp4" type="video/mp4">
                    <img src="https://dv3qy69e0zfs0.cloudfront.net/images/tripplanner.png">
                </video>
                </div> 

            </div>

            <div class="row">
            <div class="col-xs-12 left plannermosaic">
                <img src="https://dv3qy69e0zfs0.cloudfront.net/images/tripplanner2.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/tripplanner2.png">
            </div>
        	</div>

        	<div class="row">
            <div class="col-xs-6 col-xs-offset-0 col-sm-6 col-sm-offset-0 col-md-5">
                <video class="tripcard" autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/tripcard.png" muted playsinline webkit-playsinline>
                    <source src="https://dv3qy69e0zfs0.cloudfront.net/images/tripcard.mp4" type="video/mp4">
                    <img src="https://dv3qy69e0zfs0.cloudfront.net/images/tripcard.png">
                </video>
            </div>

            <div class="col-xs-6 col-xs-offset-0 col-sm-6 col-sm-offset-0 col-md-5 col-md-offset-2">
                <video class="planning" autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/planning.png" muted playsinline webkit-playsinline>
                    <source src="https://dv3qy69e0zfs0.cloudfront.net/images/planning.mp4" type="video/mp4">
                    <img src="https://dv3qy69e0zfs0.cloudfront.net/images/planning.png">
                </video>
                <span class="caption right">Exploring ways to make planning feel fun and lightweight</span>
            </div>

        	</div>

        </div>
        

        <div class="clearfix"></div>
    </article>
            

        


    <!-- Airbnb Stories -->
    <article class="airbnbstories centered">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="projectyear">2017</h1>
            </div>
        </div>


        <div class="entry-detail">
            <div class="row">
                <div class="col-sm-4 col-md-3">
                    <h1>Airbnb Travel Stories</h1>
                    <div class="entry-content">
                        <ul class="entry-meta">
                            <li>With Michelle, Lisa & Stephanie</li>
                        </ul>
                    </div> 
                </div>
            </div>

            <div class="row">
                <div class="col-sm-10 col-md-offset-0 col-md-5">
                    <p><p>Airbnb Travel Stories was created to help people choose their next travel destination by showcasing real trips from Airbnb guests. It was designed to answer the age-old question of travel - "where should I go next" - through short video clips tagged with a location, home or activity. </p>
<p>My first week at Airbnb (Sep, 2016) kickstarted the project and over the course of next year we crystalized the vision, product positioning and iterated through multiple prototypes to eventually launch to a small community of creators.</p></p>
                </div>
                <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 col-md-5 col-md-offset-2">
                   <video class="pensieve" autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/e2ev3.png" muted playsinline webkit-playsinline>
                    <source src="https://dv3qy69e0zfs0.cloudfront.net/images/e2ev2.mp4" type="video/mp4">
                    <img src="https://dv3qy69e0zfs0.cloudfront.net/images/e2ev3.png">
                </video>
                </div> 

            </div>

<!--             <div class="row">
            <div class="col-xs-4 left airbnbcascade">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/pensieve1_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/pensieve1.png">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/pensieve2_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/pensieve2.png">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/pensieve4_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/pensieve4.png">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/pensieve3_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/pensieve3.png">
            </div>
        </div> -->

        <div class="row">

            <div class="col-xs-4 journal">
                <video autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/tokyojournal.png" muted playsinline webkit-playsinline>
                    <source src="https://dv3qy69e0zfs0.cloudfront.net/images/tokyojournal.mp4" type="video/mp4">
                    <img src="https://dv3qy69e0zfs0.cloudfront.net/images/tokyojournal.png">
                </video>
            </div>

            <div class="col-xs-4 journey">
                <video autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/journey.png" muted playsinline webkit-playsinline>
                    <source src="https://dv3qy69e0zfs0.cloudfront.net/images/journey.mp4" type="video/mp4">
                    <img src="https://dv3qy69e0zfs0.cloudfront.net/images/journey.png">
                </video>
            </div>

             <div class="col-xs-4 videostory">
                <video autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/videoreel.png" muted playsinline webkit-playsinline>
                    <source src="https://dv3qy69e0zfs0.cloudfront.net/images/videoreel.mp4" type="video/mp4">
                    <img src="https://dv3qy69e0zfs0.cloudfront.net/images/videoreel.png">
                </video>
            </div>
            <div class="col-xs-12 col-sm-6 col-sm-offset-6 col-md-4 col-md-offset-8">
            <span class="caption right">Different formats exploring journaling, remembering and broadcasting</span>
           </div>
        </div>


        <div class="row">
            <div class="col-xs-8 col-sm-6 col-md-4">
                    <span class="caption left top">Early prototype of translating vertical video stories to web</span>
            </div>

            <div class="col-xs-12">
            <video autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/Webv2.png" playsinline muted webkit-playsinline>
                <source src="https://dv3qy69e0zfs0.cloudfront.net/images/webv3.mp4" type="video/mp4">
                <img src="https://dv3qy69e0zfs0.cloudfront.net/images/Webv2.png">
            </video>
            </div>
        </div>

<!--         <div class="row">
            <div class="col-xs-12 left">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/story_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/story.png">
            </div>
            <div class="col-xs-9 col-xs-offset-3 right pulsecascade storycascade">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/story2.png">
            </div>
        </div> -->

        </div>
        

        <div class="clearfix"></div>
    </article>
          

         



    <!-- Clara -->
    <article class="clarawebsite centered">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="projectyear">2015-16</h1>
            </div>
        </div>


        <div class="entry-detail">
            <div class="row">
                <div class="col-sm-5 col-md-3">
                    <h1>Clara</h1>
                    <div class="entry-content">
                        <ul class="entry-meta">
                            <li>With Michael & Maran</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-10 col-md-offset-0 col-md-8">
                    <p><p>Clara was a <a href="http://www.fastcodesign.com/3051464/if-you-cc-this-robot-onto-your-emails-it-will-schedule-meetings-for-you">virtual assistant</a> that <a href="http://www.usatoday.com/story/tech/2015/09/24/clara-applying-your-virtual-personal-assistant-no-benefits-required/72713514/">scheduled your meetings</a>. Cc Clara on any email, and it was designed to take care of the scheduling on your behalf. Clara handled this by a <a href="http://www.wired.com/2015/09/ai-helps-humans-best-humans-help-ai/">unique human-in-the loop</a> system that combines the efficiency of AI with human agents who oversee the system and handle edge cases. </p>
<p>At Clara, I was responsible for all things design — product design, brand design, design system &amp; marketing website for Clara’s  launch. I also worked closely with engineering and machine learning team to design the agent tools that help Clara’s remote assistants in supporting its customers. </p>
<p>Clara was named one of the most innovative enterprise companies by <a href="https://www.fastcompany.com/most-innovative-companies/2017/sectors/enterprise">Fast Company</a>. </p>
<p><a href="https://claralabs.com"><strong>VIEW SITE</strong></a></p></p>
                </div>
            </div>
        </div>
 

        <div class="row">
            <div class="col-xs-12">
            <img src="https://dv3qy69e0zfs0.cloudfront.net/images/clarabranding_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/clarabranding.png">
        </div>

                <div class="col-sm-6 col-sm-offset-6 col-md-4 col-md-offset-8">
                    <span class="caption right">Early research, moodboarding, brand assets and styleguide. Logo by <a href="http://fuzzco.com">Fuzzco</a>.</span>
                </div>
        </div>
        
         <div class="clearfix"></div>

        <div class="row">
            <div class="col-xs-12">
            <video autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/clarawebsite.png" muted playsinline webkit-playsinline>
                <!-- <source src="https://dv3qy69e0zfs0.cloudfront.net/images/clarasite.mp4" type="video/mp4"> -->
                <source src="https://dv3qy69e0zfs0.cloudfront.net/images/Clarawebsite.mp4" type="video/mp4">
                <img src="https://dv3qy69e0zfs0.cloudfront.net/images/clarawebsite.png">
            </video>
        </div>
                <div class="col-sm-6 col-md-4">
                    <span class="caption left">Clara marketing website</span>
                </div>
        </div>

        <div class="row">
            <div class="col-xs-12">
            <video autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/future.png" muted playsinline webkit-playsinline>
                <!-- <source src="https://dv3qy69e0zfs0.cloudfront.net/images/clarasite.mp4" type="video/mp4"> -->
                <source src="https://dv3qy69e0zfs0.cloudfront.net/images/Future.mp4" type="video/mp4">
                <img src="https://dv3qy69e0zfs0.cloudfront.net/images/future.png">
            </video>
            </div>
                <div class="col-sm-6 col-sm-offset-6 col-md-4 col-md-offset-8">
                    <span class="caption right">A prototype of the agent tool used to oversee the algorithm’s output and handle edge cases</span>
                </div>
        </div>

        <div class="clearfix"></div>
    </article>
         

          



    <!-- Facebook Comments -->
    <article class="fbcomments centered">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="projectyear">2014</h1>
            </div>
        </div>


        <div class="entry-detail">
            <div class="row">
                <div class="col-sm-5 col-md-3">
                    <h1>Facebook Comments</h1>
                    <div class="entry-content">
                        <ul class="entry-meta">
                            <li>Solo</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-10 col-md-offset-0 col-md-5">
                    <p><p>My last phase of work at Facebook was focused on improving and inventing new ways for people to interact with stories on Facebook and enabling more conversations - liking, commenting and everything in between. Over the years some of these ideas have found their way in the core Facebook app — for <a href="https://www.wired.com/2016/02/facebook-reactions-totally-redesigned-like-button/">better</a> or <a href="https://www.theverge.com/2017/3/22/15026690/facebook-testing-messenger-like-comments-format-bubbles">worse</a>. </p></p>
                </div>
            </div>
        </div>


        
        <div class="row">
            <div class="col-xs-6 col-xs-offset-0 col-sm-6 col-sm-offset-0 col-md-5">
            <video autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/reactions.png" muted playsinline webkit-playsinline>
                <source src="https://dv3qy69e0zfs0.cloudfront.net/images/fbreactions.mp4" type="video/mp4">
                 <img src="https://dv3qy69e0zfs0.cloudfront.net/images/reactions.png">
            </video>
            <span class="caption left">Super Like — a very early prototype of Reactions </span>
            </div>

            <div class="col-xs-6 col-xs-offset-0 col-sm-6 col-sm-offset-0  col-md-5 col-md-offset-2">
                    <!-- <img src="./theme/images/fc.png"> -->
                    <video class="fbquickcam" autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/fc.png" muted playsinline webkit-playsinline>
                        <source src="https://dv3qy69e0zfs0.cloudfront.net/images/selfiecam.mp4" type="video/mp4">
                         <img src="https://dv3qy69e0zfs0.cloudfront.net/images/fc.png">
                    </video>
                    <span class="caption left">Quick cam to enable conversations via photos</span>
                </div>
        </div>


        <div class="row">
            <div class="col-xs-6 col-xs-offset-0 col-sm-6 col-sm-offset-0 col-md-5">
                <video autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/photos.png" muted playsinline webkit-playsinline>
                    <source src="https://dv3qy69e0zfs0.cloudfront.net/images/photoscroll.mp4" type="video/mp4">
                     <img src="https://dv3qy69e0zfs0.cloudfront.net/images/photos.png">
                </video>
                <span class="caption left">Richer discussions on photos and videos</span>
            </div>

            <div class="col-xs-6 col-xs-offset-0 col-sm-6 col-sm-offset-0 col-md-5 col-md-offset-2">
                <img class="fbmessagethread shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/messagethreads_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/messagethreads.png">
                <span class="caption left">Messaging paradigms in comment threads</span>
            </div>

        </div>

        <div class="clearfix"></div>
    </article>
        

           



    <!-- Facebook Search -->
    <article class="graphsearch centered">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="projectyear">2013</h1>
            </div>
        </div>


        <div class="entry-detail">
            <div class="row">
                <div class="col-sm-5 col-md-3">
                    <h1>Facebook Search</h1>
                    <div class="entry-content">
                        <ul class="entry-meta">
                            <li>With Christine, Taylor & Russ</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-10 col-md-offset-0 col-md-5">
                    <p><p>I helped shape the vision of the <a href="http://newsroom.fb.com/news/2014/12/updates-to-facebook-search/">current</a> Search <a href="https://techcrunch.com/2014/12/08/facebook-keyword-search/">experience</a> on Facebook — the successor to Graph Search. Graph Search’s original experience, while powerful, was not intuitive for people. As part of rethinking the search experience, my work involved convincing and shifting the focus of the team from natural language queries to simpler keyword queries. A lot of this was made possible by <a href="http://newsroom.fb.com/news/2013/09/graph-search-now-includes-posts-and-status-updates/">Posts Search</a> which was my first project at Facebook.</p></p>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 col-md-offset-7 col-md-5">
                <video class="mobilesearch" autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/gsl.png" muted playsinline webkit-playsinline>
                    <source src="https://dv3qy69e0zfs0.cloudfront.net/images/gsleica.mp4" type="video/mp4">
                    <img src="https://dv3qy69e0zfs0.cloudfront.net/images/gsl.png">
                </video>
            </div>
        </div>

        <div class="fbsearchcomponent">

        <div class="row">
            <div class="col-xs-8 col-sm-4 col-md-3">
                <span class="caption left top searchcaption">Core components of search system — typeahead and result cards</span>
            </div>
            <!-- <div class="col-xs-12">
            <img src="https://dv3qy69e0zfs0.cloudfront.net/images/searchcomponents.png">
            </div> -->
        </div>

        <div class="row">
            <div class="col-xs-6 left cascade">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/gs2_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/gs2.png">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/placecard_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/placecard.png">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/photocard_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/photocard.png">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/postscard_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/postscard.png">
            </div>
        </div>
        </div>


        <div class="row search">
            <div class="col-xs-8 col-sm-5 col-md-4">
                <span class="caption left">Redesigned search results to show different object types - photos, people, posts and places on one page</span>
            </div>
            <div class="col-xs-12">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/gs1_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/gs1.png">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/ps_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/ps.png">
            </div>
            <div class="col-xs-8 col-sm-5 col-md-4">
            <span class="caption left">First version of Posts search using natural language</span>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-4">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/hunch1_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/hunch1.png">
            </div>
            <div class="col-xs-4">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/hunch2_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/hunch2.png">
            </div>
            <div class="col-xs-4">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/hunch3_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/hunch3.png">
            </div>
            <div class="col-xs-8 col-sm-5 col-md-4">
                <span class="caption left">Explaining natural language syntax by showing relevant queries in the typeahed</span>
            </div>
        </div>
        


        <div class="clearfix"></div>
    </article>
       

            



    <!-- Pulse  -->
    <article class="pulsethree centered">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="projectyear">2011-13</h1>
            </div>
        </div>


        <div class="entry-detail">
            <div class="row">
                <div class="col-sm-5 col-md-3">
                    <h1>Pulse</h1>
                    <div class="entry-content">
                        <ul class="entry-meta">
                            <li>With Akshay & Ankit</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-10 col-md-offset-0 col-md-5">
                    <p><p>I was the first full-time designer at Pulse and was there for a little under two years. I was responsible for shaping different aspects of the Pulse experience — product strategy, interface design (for iOS, Android &amp; Web) and brand design.</p>
<p>Major projects included launching a brand new <a href="http://theultralinx.com/2011/12/pulse-android-updated-adding-catalog-smart-dock.html">catalog</a>, <a href="http://techcrunch.com/2012/11/08/pulse-3-0-for-android-and-ios-launches-with-unlimited-pages-better-search-more/">redesigning the entire app</a>, refreshing the brand identity and launching a <a href="http://techcrunch.com/2013/02/12/pulse-news-reader-dips-its-toes-into-social/">social feed</a> within the app. </p>
<p>Pulse won the <a href="https://techcrunch.com/2011/06/16/4-million-users-strong-and-apple-design-award-in-hand-pulse-grabs-9-million-series-a/">Apple Design Award</a> in 2011 and was eventually acquired by <a href="https://techcrunch.com/2013/04/11/linkedin-acquires-pulse-for-90m-in-stock-and-cash/">LinkedIn</a>.</p></p>
                </div> 

                <div class="col-sm-12 col-md-offset-6 col-md-6">
                   <video class="mobilesearch" autoplay="autoplay" loop="loop" muted preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/stevepulse.png" playsinline webkit-playsinline>
                    <source src="https://dv3qy69e0zfs0.cloudfront.net/images/stevepulse.mp4" type="video/mp4">
                    <img src="https://dv3qy69e0zfs0.cloudfront.net/images/stevepulse.png">
                </video>
                </div> 

                
            </div>
        </div>


        <div class="row">
            <div class="col-xs-8 col-sm-offset-8 col-sm-4 col-md-offset-9 col-md-3">
                <span class="caption right top pulsecaption">Various iterations of the Pulse home screen over the years</span>
            </div>

<!--             <div class="col-xs-12">
                <img class="pulsespread" src="https://dv3qy69e0zfs0.cloudfront.net/images/homescreen.png">
            </div>
 -->        </div>

            <div class="row">
            <div class="col-xs-8 left pulsehomecascade">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/pulsehome1_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/pulsehome1.png">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/pulsehome2_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/pulsehome2.png">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/pulsehome3_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/pulsehome3.png">
            </div>
            </div>
        

        <div class="row">
            <div class="col-xs-8 col-sm-offset-9 col-sm-3 col-md-offset-10 col-md-2">
                <span class="caption right top pulsecaption pulsecaptionreading">Pulse reading experience</span>
            </div>
            <div class="col-xs-7 left">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/readingdark_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/readingdark.png">
            </div>
            <div class="col-xs-9 col-xs-offset-3 right pulsecascade">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/readingpane_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/readingpane.png">
            </div>
        </div>

        <div class="row socialreading">
            <div class="col-xs-8 col-sm-3 col-md-2">
                <span class="caption left top">Various experiments with social reading</span>
            </div>
            <div class="col-xs-12">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/pulseexperiments_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/pulseexperiments.png">
            </div>
        </div>

        <div class="row">
            
            <div class="col-xs-7 left">
                <img class="shadow" src="https://dv3qy69e0zfs0.cloudfront.net/images/pc1_.png" data-src="https://dv3qy69e0zfs0.cloudfront.net/images/pc1.png">
            </div>

            


            <div class="col-xs-6 col-xs-offset-6 right catalog">
                <video class="" autoplay="autoplay" loop="loop" preload="true" poster="https://dv3qy69e0zfs0.cloudfront.net/images/pulsecatalog.png" muted playsinline webkit-playsinline>
                    <source src="https://dv3qy69e0zfs0.cloudfront.net/images/pulsecatalog.mp4" type="video/mp4">
                    <img src="https://dv3qy69e0zfs0.cloudfront.net/images/pulsecatalog.png">
                </video>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
                <span class="caption left bottom">Redesigning the Pulse catalog was my first big project at Pulse. Video via <a href="http://teksocial.com/">Teksocial</a></span>
            </div>
            
        </div>



        <div class="clearfix"></div>
    </article>
      

              

             
</div>
</div>

<!--             <div id="indicator"></div> -->
        </div>

        <footer>
            <div class="container" id="foot">
                <section role="social" id="socialbadges">
                    <ul>

                        <li><a href="http://twitter.com/tuhin" class="twitter ir">Twitter</a>
                        </li>
                        <li><a href="http://instagram.com/tuhin" class="instagram ir">Instagram</a>
                        </li>
                        <!-- <li><a href="http://feeds.feedburner.com/ituhin" class="rss ir">RSS</a>
                        </li> -->
                    </ul>
                </section>
                <div class="clearfix"></div>

            </div>
        </footer>
    </div>
    <!--! end of #container -->

    <script type="text/javascript">
    var _gauges = _gauges || [];
    (function() {
        var t = document.createElement('script');
        t.type = 'text/javascript';
        t.async = true;
        t.id = 'gauges-tracker';
        t.setAttribute('data-site-id', '50430820613f5d297d00002e');
        t.src = '//secure.gaug.es/track.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(t, s);
    })();
    </script>

    <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', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-16220800-1', 'auto');
    ga('send', 'pageview');
    </script>

    <!--[if lt IE 7 ]>
        <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
        <script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
    <![endif]-->

</body>

</html>