project2.html

<div id="goTo" class="text-center"style="width:auto;position:fixed;right:5%;bottom:2%;z-index:998">
       <ul id="project_nav" class="nav_in">
           <li class="tag"><a href="#research">Research</a></li>
           <li class="tag"><a href="#solution">Solution</a></li>
           <li class="tag"><a href="#framework">Framework</a></li>
       </ul>
        <button class="center nav_in_button" onclick="nav_in()" >
            Go To
        </button>
    </div>
    
    <div id="banner" style="width:100%;height:auto;padding-bottom:0px !important">
        <div class="project_container">
            <span id="project_logo"> <img src="img/Logo_Techniche2018_.png" alt="company logo"></span><br>
            <h5 class="small-titles" style="color:#1bb99b">Techniche.org</h5>
            <h3 class="titles">Increasing Online Registrations by Allowing Quick Registration in the Right Event</h3>
            <p style="text-align:justify;"> Techniche is one of the largest college tech fests in the country, with more than <strong class="strong">50,000 participants</strong>  each year. But every year, a new website was built, which resulted in <strong class="strong">inconsistent, slow, and confusing registration experience.</strong>
            <br><br>

            I took upon an ambitious challenge to design the browsing and registration experience for users and to change the team's approach towards integrating solutions for effective internal manegement. </p>                    
        </div>        
    </div>
    <img src="img/p13-copy.png" style="width:50%;margin-left:50%;transform:translateX(-50%);"alt="">
    
    <div id="projectdetail" >
              

              <div class="project_container black">
                  

                   <h3 class="titles"> Website - An Irony </h3>
                         <p> Over the years, Techniche has served as a distinguished platform for entrepreneurs, innovators, and technocrats to showcase their ability while allowing students to learn by engaging in these events. The Techniche website has become the essential bridge in connecting participants and techniche core team.
                    <br><br>

                        But it failed to evolve. <strong class="strong"> Nonresponsiveness, slow loading time, complex architecture, and new partner's integration</strong> resulted in decreased digital registrations, an increase in the number of queries, and extensive manual work to manage registration data.
                    <br><br>

                        The techfest site became an irony to the brand.</p>

                    <div class="row">
                       <div class="col-lg-6 col-md-12 col-sm-12">
                        <img src="img/T17-1.png" alt="">
                           <p class="caption" >

                                   Interactive Javascript libraries slowed down website. The nav bar links were arranged randomly. 
                                   Techniche dates were shown, when a user hovered over the floating shape which resembled something unpleasant <br>

                            </p>

                        </div>   
                        <div class="col-lg-6 col-md-12 col-sm-12">
                        <img src="img/T17-2.png" alt="">
                        <p class="caption">The dots when clicked would show the next event, which users rarely figured out. The navigation system failed up front.</p>
                        </div>                  
                    </div>
            </div>     
</div>

    <div class="project_container">
               <h5 class="small-titles" >Challenge</h5>
               <br><br>
                <h3 class="titles"> Deliver Consistent Experience Within Four Months </h3>
                <p>Our goal was to deliver a consistent and straightforward experience. Each event in Techniche is unique in it's functioning. Inherently, this leads to different launch timelines and exclusive functionalities. Inevitably, everything had to be done in sprints while maintaining consistency.</p>
                <br>
                <p>Our High-level Goals were : <br>
                    1. Developing a simple, elegant, and usable site. <br>
                    2. Responsive Design <br>
                    3. Optimized for Quick Loading <br>
                    4. Easy to find on the web</p>
                    <br><br><br>

                <h5 class="small-titles" >Obstacles</h5>
                <p>Every journey has barriers, and our's were - <br> <br>
                    <strong class="strong_dehighlight">1. Starting From Scratch </strong><br>
                    Modification of the previous code was impossible for us. The voluntary student team's development skills were under development. We had to start fresh, for design as well as development.
                    <br><br>
                    <strong class="strong_dehighlight">2. Short Time to Develop and Launch </strong><br>
                    Four months is a short time to design and deliver a website. We began in November when the team started to learn how to build a website and had to launch the site by 1st week of March. 
                    <br><br>
                    <strong class="strong_dehighlight">3. Balancing Academics </strong><br>
                    The academic deliverables were the priority. We had to find a balance between academics and Techniche.</p>
</div> 

    <div class="project_body_black">
            <div class="project_container black">
                <h5 class="small-titles" >My Role</h5>
                <br><br>
                <p>I was the <strong class="strong">Head of the Web Operations </strong>in Techniche. I was responsible for developing the <strong class="strong"> project timeline, ensuring on-time deliverables, gathering requirements </strong>from sponsors, partners, and other Techniche verticals, <strong class="strong">registration management, and payment query resolutions </strong> from November 2017 to September 2018.  I led a team of 3 enthusiastic juniors with different engineering streams and collaborated with two designers for concept review and site improvement.</p>
            </div>
            <br><br>
</div>

    <div class="project_container" id="research">
                <h5 class="small-titles" >Research</h5>
                <br><br>
                <h3 class="titles">Forcing Each User to Browse Everything Slowed the Process</h3>
                <p>Based on our 2017 edition experience, we found that participants were facing difficulty finding already-present information. Participants emailed us to get that information. We set out to discover why. <br><br>

                Based on analytics, we knew 50% of participants used mobile and other 50%, laptop/tablet to visit our platform. We went around college people to see how they use the website on these devices. <br><br> </p>

                <h5 class="small-titles" >Findings</h5>
                <p>
                <br>
                <strong class="strong_dehighlight">1. Slow connectivity and massive site: </strong>
                <br>
                Indian cellular connections are slow, and hence site almost was unable to load on the mobile browser.
                Even on the college network (with fast internet), it took <strong class="strong">more than 10 seconds </strong> to load on the laptop
                <br><br>
                    <strong class="strong_dehighlight">2. Classic Case of Inconsistencies </strong> <br><br>
                    <strong class="strong" style="margin-left:30px">a. Navigation </strong> </p>
                        <div style="margin-left:30px"><p>How often do you see two type of navigation? Rarely right? And we had 3 different navigation structures making it difficult to find the right information quickly.</p>
                        </div>

                <br>
                <div class="row">
                    <div class="col-lg-6 col-md-12 col-sm-12">
                            <img src="img/T17_Nav1.svg" alt="">
                            <p class="caption">Navbar on Home</p>
                    </div> 
                    <div class="col-lg-6 col-md-12 col-sm-12">
                            <img src="img/T17_Nav2.svg" alt="">
                            <p class="caption">Navbar on Contact Us Page</p>
                    </div> 
                    <div class="col-lg-6 col-md-12 col-sm-12">
                            <img src="img/T17_Nav3.svg" alt="">
                            <p class="caption">Navbar Inside Events</p>
                    </div> 
                </div>
                <br><br>
                <p>            
                <strong class="strong" style="margin-left:30px">b. Design Language </strong> 
                <br>
                <div class="row">
                    <div class="col-lg-6 col-md-12 col-sm-12">
                            <img src="img/T17_DL_1.svg" alt="">
                            <p class="caption">Event page featured minimalist design</p>
                    </div> 
                    <div class="col-lg-6 col-md-12 col-sm-12">
                            <img src="img/T17_DL_2.svg" alt="">
                            <p class="caption">Accommodation page featured image background and overlayed information</p>
                    </div> 
                </div>
                <br>
                <br><br>
                <p>
                <strong class="strong_dehighlight">3. Usabilty Issues on Smartphones</strong>
                    <br> </p>
                <div class="row">
                    <div class="col-lg-4 col-md-12 col-sm-12">
                            <img src="img/T17_Mobile_1.svg" style="height:auto;width:250px;margin-left:50%;transform:translateX(-50%)"alt="">
                            <p class="caption">Participants with fat fingers found it difficult to navigate due to close proximity of navigation links.</p>
                    </div> 
                    <div class="col-lg-4 col-md-6 col-sm-12">
                            <img src="img/T17_Mobile_3.svg" style="height:auto;width:250px;margin-left:50%;transform:translateX(-50%)" alt="">
                            <p class="caption">Don't feel bad, participants had to scroll way more than you to find information about a particular event.</p>
                    </div> 
                    <div class="col-lg-4 col-md-6 col-sm-12">
                            <img src="img/1.gif" style="height:auto;width:240px;margin-left:50%;transform:translateX(-50%)" alt="">
                            <p class="caption">GIF showing the scroll length of single page with 6 events.</p>
                    </div>
                </div>
                <br><br>
                <p>
                <strong class="strong_dehighlight">4. One Label for Everything</strong>
                <br>
                Events, competitions, and famous Technothlon exam, <strong class="strong">everything was put under events label</strong>. Inevitably users were <strong class="strong">unable to understand the differences</strong>. 
                </p>
                <br><br><br>

                <h5 class="small-titles">Reframing the Problem</h5>
                <p>Our research gave insight that users had different intentions:
                  <br><br>
                   1. Compete on a national level
                   <br>
                   2. Showcase their impressive work and get exposure
                   <br>
                   3. Learn from the experts
                   <br>
                   4. Participate in fun and have social interaction
                    <br><br>

              </p>
                    <h3 class="titles">"How might we allow participants to participate in the right event quickly?" </h3><br>

                <p> For the above problem the critical metrics used were <br>
                    1. Digital Registrations Count & Revenue <br>
                    2. Digital Footfall <br>
                    3. Number of queries raised through email for existing information <br><br>

                    There were many solutions to the problem, yet we picked a solution with the least development effort and higher impact. 
                </p>           
</div>

    <div class="project_body_black" id="solution">
            <div class="project_container black">
               <h5 class="small-titles">Solution</h5>
               <br><br>
                <h3 class="titles">Introducing Explore With Techniche'18</h3> <br><br>
                <p>
                    <strong class="small-titles">A. Browsing Activities </strong> <br>
                    1. The new Techniche site's Home page allows users to explore activities based on their intent. For example: a user wishes to compete can directly look at all competitions with 1 click. A single glance tells everything planned for Techniche in 2018.
                </p>
            </div>
            <img src="img/Asset%202.png" style="width:90%;margin-left:50%;transform:translateX(-50%)" alt="">
            <p class="caption" style="color:white;text-align:center;width:70%;margin-left:50%;transform:translateX(-50%)">Techniche'18 Homepage allows users to browse through different types of activities based on their interest.</p>
            <div class="project_container black">
                <p>
                    2. <strong class="strong">With the mobile-first approach</strong>, irrespective of device, it got easier to navigate. Every component excluded hover interaction, making it more usable on mobile. <strong class="strong">The side navigation</strong> allows easy navigation from one activity to any other, with three clicks at max.
                </p>
                <div class="row">
                    <div class="col-lg-4 col-md-6 col-sm-12">
                            <img src="img/1x/home1.svg" style="height:auto;width:240px;margin-left:50%;transform:translateX(-50%)" alt="">
                            <p class="caption text-center">Techniche home on mobile</p>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12">
                            <img src="img/1x/nav.png" style="height:auto;width:240px;margin-left:50%;transform:translateX(-50%)" alt="">
                            <p class="caption text-center">Consistent nested navigation menu across devices </p>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12">
                            <img src="img/1x/home2.png" style="height:auto;width:240px;margin-left:50%;transform:translateX(-50%)" alt="">
                            <p class="caption text-center">Responsive Version of Exploration Grid</p>
                    </div>
                </div>
                <p>
                    3. <strong class="strong">Consistent design language</strong> made it easier to predict where to find the information on similar pages. Also, our efforts drastically reduced, and everything appeared as a part of a big home.
                </p>                
            </div>
            <div class="row" style="width:80%;margin-left:50%; transform:translateX(-50%)">
                    <div class="col-lg-6 col-md-12 col-sm-12">
                            <img class="center_custom"src="img/TechOlympics.png" style="height:auto;width:95%" alt="">
                            
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-12">
                            <img class="center_custom" src="img/robotics.png" style="height:auto;width:95%" alt="">
                            
                    </div>                    
                </div>
        </div>
        
    <div class="project_container">
        <p> <strong class="small-titles">B. Registration Experience</strong> 
           <br><br>
           1. Wherever possible, in consultation with event teams, the fields in forms were reduced to make registration quick. When form fields were needed, the form was segregated into sections to avoid overwhelming participants and losing registrations.        
        </p>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <img class="center_custom"src="img/T17_form.png" style="height:450px;width:auto" alt="">
                <p class="caption text-center">Form from Techniche 17</p>
            </div>                
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-12 col-sm-12">
                <img class="center_custom"src="img/Form3.png"  alt="">
                <p class="caption text-center">Step 1/3 </p>
            </div> 
            <div class="col-lg-4 col-md-12 col-sm-12">
                <img class="center_custom"src="img/Form2.png"  alt="">
                <p class="caption text-center">Step 2/3</p>
            </div> 
            <div class="col-lg-4 col-md-12 col-sm-12">
                <img class="center_custom"src="img/Form1.png"  alt="">
                <p class="caption text-center">Step 3/3</p>
            </div>                
        </div>
        <p>
            2. We use 3rd party vendors for buying event tickets and payment handling. Their system required users to fill the form and then make payment. With form on our site, the user had to enter the same details twice. The marketing head and I discussed with our partner and developed a Techniche exclusive API allowing payment by filling one form on our site, saving effort and time.
        </p> <br><br>
        
            <h3 class="small-titles"> Speeding Up With Internal Tools : Guwahati Half Marathon Case</h3><br><br>
            <p>1. For Guwahati Half Marathon, the BIB distribution, digital record of the BIB number against participant's name, and new registrations took <strong class="strong">more than 2 hours. It often resulted in a delayed start of the marathon. </strong><br><br>
            
                2. I designed a mechanism that completed everything with <strong class="strong">1.25 hours</strong>. Here's how we handled this challenge.</p>
                <img src="" alt="">
                
                <p><strong class="strong">Listen to how this tool helped in the Missing Child Incident </strong></p>
                 <audio controls>
                  <source src="img/1x/6%20Jun,%2021.48.mp3" type="audio/ogg">
                  
                Your browser does not support the audio element.
                </audio> 
        </div>
    <div class="project_body_black">
        <div class="project_container black">
            <h3 class="titles">Impact</h3>
            <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-12">
                    <div class="mycard">
                        <h3 class="small-titles" style="color:#1dba9b">40,000</h3>
                        <p>Users Accessed The Website</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                    <div class="mycard">
                        <h3 class="small-titles" style="color:#1dba9b">30%</h3>
                        <p>Increase in Digital Registrations on an Average</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">    
                    <div class="mycard">
                        <h3 class="small-titles" style="color:#1dba9b">>50%</h3>
                        <p>Reduction in Query Emails for Existing Information </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">   
                    <div class="mycard">
                        <h3 class="small-titles" style="color:#1dba9b">60%</h3>
                        <p>Users now used Smartphone for Access </p>
                    </div>
                </div>
                </div>
            </div>
        </div>
    
        
        
        
    <br><br>
   
   
  
 


<script>

    $(initialize);
    $(window).scroll(function() {
        
        
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    var ps = $('#ps').scrollTop(); 
    var contact = $('#contact').scrollTop();
    if (pos < winTop + 400) {
      $(this).addClass("slide");
        
        if(ps < winTop - 500){
            $('#ps').addClass('ps-fixed');
        }
        
    }
  });
}); 
    

    
</script>