process.html

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- WELCOME TO MY PORTFOLIO PAGE SOURCE VIEWERS ^-^
    Hope you enjoy my ~code~
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-127870742-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'UA-127870742-1');
  </script>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Perrin Anto. Process Journal.</title>
  <meta name="description" content="">
  <meta name="author" content="Perrin Anto.">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="font/fonts.css">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="css/aos.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/verticalnav.css">
  <link rel='stylesheet' href='https://unpkg.com/emoji.css/dist/emoji.min.css'>

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="shortcut icon" type="image/png" href="favicon.png">

</head>

<body class="white-background">

  <!-- Navigation
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <div class="container">
    <header class="row" style="margin-top: 10%">
      <a href="index.html" class="page-link" id="bowtie">⋈</a>
      <nav id="main-navigation">
        <ul>
          <li>
            <a href="index.html" class="page-link">Work</a>
          </li>
          <li>
            <a href="about.html" class="page-link">About</a>
          </li>
          <li>
            <a href="files/UX_Design_Perrin_Jones!.pdf" class="page-link">Resume</a>
          </li>
        </ul>
      </nav>
    </header>

    <nav id="cd-vertical-nav">
      <ul>
        <li>
          <a href="#section1" data-number="1">
            <span class="cd-dot"></span>
            <span class="cd-label">Overview</span>
          </a>
        </li>
        <li>
          <a href="#section2" data-number="2">
            <span class="cd-dot"></span>
            <span class="cd-label">Discover</span>
          </a>
        </li>
        <li>
          <a href="#section3" data-number="3">
            <span class="cd-dot"></span>
            <span class="cd-label">Design</span>
          </a>
        </li>
        <li>
          <a href="#section4" data-number="4">
            <span class="cd-dot"></span>
            <span class="cd-label">Deliver</span>
          </a>
        </li>
        <li>
          <a href="#section5" data-number="5">
            <span class="cd-dot"></span>
            <span class="cd-label">Takeaways</span>
          </a>
        </li>
        <li>
          <a href="#section6" data-number="6">
            <span class="cd-dot"></span>
            <span class="cd-label">More Aira</span>
          </a>
        </li>
      </ul>
    </nav>
    <a class="cd-nav-trigger cd-img-replace">Open navigation
      <span></span>
    </a>

    <!-- Header
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <div class="core-content">
      <div class="row" style="margin-top: 5%" data-aos="fade-up" data-aos-delay="250">
        <img src="images/Process/Process_Banner.png">
      </div>

      <!-- Process Journal Overview
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->

      <section id="section1" class="cd-section">
        <div class="row" style="padding-top: 10%">
          <div class="six columns">
            <div class="stacked-header" data-aos="fade-up" data-aos-delay="500" data-aos-anchor=".core-content">
              <div class="text-header">OVERVIEW</div>
              <hr>
              <h5 class="content-header">Challenge</h5>
              <p class="content-text">With recent technological breakthroughs in machine learning and AI, autonomous vehicles are coming closer to
                the reach of mass consumer markets. With new technologies brings new interactions, along with user interface
                and user experience issues that will make or break their future. Map out the experiences that will be required
                to assist people in interacting with autonomous vehicles in future cities.</p>
              <h5 class="content-header">Approach</h5>
              <p class="content-text">With an open prompt, my team first ideated and researched possible opportunity areas to focus in on. Once we
                narrowed down to autonomous flying taxis, we planned out our overall design process into three main flexible
                sections: discover, design, deliver. Within each step, we iterated our approach to maximize our user-centered
                process.
              </p>
              <p class="content-text">In the end, we used over 20 design research, prototyping, and testing methods (and even created some of our
                own through iteration on existing ones). This enabled us to reach over 500 users through our research, perform
                over 50 user tests on prototypes, and create 6 user insight driven iterations.</p>
              <h5 class="content-header">Outcome</h5>
              <p class="content-text">As a result of 6 tested iterations at varying fidelity, in our final round of user testing, users were able
                to successfully accomplish booking & wayfinding to an autonomous vehicle and all mentioned that the experience
                was intuitive or easy. We were able to innovate multi-modal trip booking and add a new immersive compass
                based navigation that made transiting between modes a breeze. </p>
            </div>
          </div>

          <div class="three columns">
            <p> </p>
          </div>

          <div class="three columns" data-aos="fade-up" data-aos-delay="500" data-aos-anchor=".core-content">
            <div class="stacked-header">
              <div class="text-header">TIMELINE</div>
              <hr>
              <h5 class="content-header">12 Weeks</h5>
            </div>

            <div class="stacked-header">
              <div class="text-header">ROLE</div>
              <hr>
              <h5 class="content-header">User Researcher, UI/UX Designer, Project Manager</h5>
            </div>

            <div class="stacked-header">
              <div class="text-header">TOOLS</div>
              <hr>
              <h5 class="content-header">Typeform, Marvel, Abstract, Sketch, Adobe Illustrator, Invision, Framer</h5>
            </div>

            <div class="stacked-header">
              <div class="text-header">TEAM</div>
              <hr>
              <h5 class="content-header">Jodie Clothier</h5>
              <h5>Adam Vozzo</h5>
            </div>
          </div>
        </div>
      </section>


      <!-- Discover
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
      <section id="section2" class="cd-section">
        <div class="row" style="padding-top: 10%" data-aos="fade-up">
          <div class="text-header">DISCOVER</div>
          <hr>
          <h4 class="section-header">Week 1</h4>

          <h5 class="content-header">Main Focus</h5>
          <p class="content-text">With recent technological breakthroughs in machine learning and AI, autonomous vehicles are coming closer to the
            reach of mass consumer markets. With new technologies brings new interactions, along with user interface and
            user experience issues that will make or break their future. Map out the experiences that will be required to
            assist people in interacting with autonomous vehicles in future cities.</p>
          <h5 class="content-header">Reflection</h5>
          <p class="content-text">As a result of 6 tested iterations at varying fidelity, in our final round of user testing, users were able to
            successfully accomplish booking & wayfinding to an autonomous vehicle and all mentioned that the experience was
            intuitive or easy. We were able to innovate multi-modal trip booking and add a new immersive compass based navigation
            that made transiting between modes a breeze. </p>

          <h4 class="section-header">Week 2</h4>

          <h5 class="content-header">Main Focus</h5>
          <p class="content-text">With recent technological breakthroughs in machine learning and AI, autonomous vehicles are coming closer to the
            reach of mass consumer markets. With new technologies brings new interactions, along with user interface and
            user experience issues that will make or break their future. Map out the experiences that will be required to
            assist people in interacting with autonomous vehicles in future cities.</p>
          <h5 class="content-header">Reflection</h5>
          <p class="content-text">As a result of 6 tested iterations at varying fidelity, in our final round of user testing, users were able to
            successfully accomplish booking & wayfinding to an autonomous vehicle and all mentioned that the experience was
            intuitive or easy. We were able to innovate multi-modal trip booking and add a new immersive compass based navigation
            that made transiting between modes a breeze. </p>

          <h4 class="section-header">Week 3</h4>

          <h5 class="content-header">Main Focus</h5>
          <p class="content-text">With recent technological breakthroughs in machine learning and AI, autonomous vehicles are coming closer to the
            reach of mass consumer markets. With new technologies brings new interactions, along with user interface and
            user experience issues that will make or break their future. Map out the experiences that will be required to
            assist people in interacting with autonomous vehicles in future cities.</p>
          <h5 class="content-header">Reflection</h5>
          <p class="content-text">As a result of 6 tested iterations at varying fidelity, in our final round of user testing, users were able to
            successfully accomplish booking & wayfinding to an autonomous vehicle and all mentioned that the experience was
            intuitive or easy. We were able to innovate multi-modal trip booking and add a new immersive compass based navigation
            that made transiting between modes a breeze.</p>

          <h4 class="section-header">Week 4</h4>

          <h5 class="content-header">Main Focus</h5>
          <p class="content-text">With recent technological breakthroughs in machine learning and AI, autonomous vehicles are coming closer to the
            reach of mass consumer markets. With new technologies brings new interactions, along with user interface and
            user experience issues that will make or break their future. Map out the experiences that will be required to
            assist people in interacting with autonomous vehicles in future cities.</p>
          <h5 class="content-header">Reflection</h5>
          <p class="content-text">As a result of 6 tested iterations at varying fidelity, in our final round of user testing, users were able to
            successfully accomplish booking & wayfinding to an autonomous vehicle and all mentioned that the experience was
            intuitive or easy. We were able to innovate multi-modal trip booking and add a new immersive compass based navigation
            that made transiting between modes a breeze. </p>
        </div>
      </section>

      <!-- Design
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
      <section id="section3" class="cd-section">
        <div class="row" style="padding-top: 10%" data-aos="fade-up">
          <div class="text-header">DESIGN</div>
          <hr>
          <h4 class="section-header">Week 5</h4>

          <h5 class="content-header">Main Focus</h5>
          <p class="content-text">With recent technological breakthroughs in machine learning and AI, autonomous vehicles are coming closer to the
            reach of mass consumer markets. With new technologies brings new interactions, along with user interface and
            user experience issues that will make or break their future. Map out the experiences that will be required to
            assist people in interacting with autonomous vehicles in future cities.</p>
          <h5 class="content-header">Reflection</h5>
          <p class="content-text">As a result of 6 tested iterations at varying fidelity, in our final round of user testing, users were able to
            successfully accomplish booking & wayfinding to an autonomous vehicle and all mentioned that the experience was
            intuitive or easy. We were able to innovate multi-modal trip booking and add a new immersive compass based navigation
            that made transiting between modes a breeze. </p>

          <h4 class="section-header">Week 6</h4>

          <h5 class="content-header">Main Focus</h5>
          <p class="content-text">With recent technological breakthroughs in machine learning and AI, autonomous vehicles are coming closer to the
            reach of mass consumer markets. With new technologies brings new interactions, along with user interface and
            user experience issues that will make or break their future. Map out the experiences that will be required to
            assist people in interacting with autonomous vehicles in future cities.</p>
          <h5 class="content-header">Reflection</h5>
          <p class="content-text">As a result of 6 tested iterations at varying fidelity, in our final round of user testing, users were able to
            successfully accomplish booking & wayfinding to an autonomous vehicle and all mentioned that the experience was
            intuitive or easy. We were able to innovate multi-modal trip booking and add a new immersive compass based navigation
            that made transiting between modes a breeze. </p>

          <h4 class="section-header">Week 7</h4>

          <h5 class="content-header">Main Focus</h5>
          <p class="content-text">With recent technological breakthroughs in machine learning and AI, autonomous vehicles are coming closer to the
            reach of mass consumer markets. With new technologies brings new interactions, along with user interface and
            user experience issues that will make or break their future. Map out the experiences that will be required to
            assist people in interacting with autonomous vehicles in future cities.</p>
          <h5 class="content-header">Reflection</h5>
          <p class="content-text">As a result of 6 tested iterations at varying fidelity, in our final round of user testing, users were able to
            successfully accomplish booking & wayfinding to an autonomous vehicle and all mentioned that the experience was
            intuitive or easy. We were able to innovate multi-modal trip booking and add a new immersive compass based navigation
            that made transiting between modes a breeze. </p>

          <h4 class="section-header">Week 8</h4>

          <h5 class="content-header">Main Focus</h5>
          <p class="content-text">With recent technological breakthroughs in machine learning and AI, autonomous vehicles are coming closer to the
            reach of mass consumer markets. With new technologies brings new interactions, along with user interface and
            user experience issues that will make or break their future. Map out the experiences that will be required to
            assist people in interacting with autonomous vehicles in future cities.</p>
          <h5 class="content-header">Reflection</h5>
          <p class="content-text">As a result of 6 tested iterations at varying fidelity, in our final round of user testing, users were able to
            successfully accomplish booking & wayfinding to an autonomous vehicle and all mentioned that the experience was
            intuitive or easy. We were able to innovate multi-modal trip booking and add a new immersive compass based navigation
            that made transiting between modes a breeze. </p>

          <h4 class="section-header">Week 9</h4>

          <h5 class="content-header">Main Focus</h5>
          <p class="content-text">With recent technological breakthroughs in machine learning and AI, autonomous vehicles are coming closer to the
            reach of mass consumer markets. With new technologies brings new interactions, along with user interface and
            user experience issues that will make or break their future. Map out the experiences that will be required to
            assist people in interacting with autonomous vehicles in future cities.</p>
          <h5 class="content-header">Reflection</h5>
          <p class="content-text">As a result of 6 tested iterations at varying fidelity, in our final round of user testing, users were able to
            successfully accomplish booking & wayfinding to an autonomous vehicle and all mentioned that the experience was
            intuitive or easy. We were able to innovate multi-modal trip booking and add a new immersive compass based navigation
            that made transiting between modes a breeze. </p>

          <h4 class="section-header">Week 10</h4>

          <h5 class="content-header">Main Focus</h5>
          <p class="content-text">With recent technological breakthroughs in machine learning and AI, autonomous vehicles are coming closer to the
            reach of mass consumer markets. With new technologies brings new interactions, along with user interface and
            user experience issues that will make or break their future. Map out the experiences that will be required to
            assist people in interacting with autonomous vehicles in future cities.</p>
          <h5 class="content-header">Reflection</h5>
          <p class="content-text">As a result of 6 tested iterations at varying fidelity, in our final round of user testing, users were able to
            successfully accomplish booking & wayfinding to an autonomous vehicle and all mentioned that the experience was
            intuitive or easy. We were able to innovate multi-modal trip booking and add a new immersive compass based navigation
            that made transiting between modes a breeze. </p>
        </div>
      </section>


      <!-- Deliver
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
      <section id="section4" class="cd-section">
        <div class="row" style="padding-top: 10%" data-aos="fade-up">
          <div class="text-header">DELIVER</div>
          <hr>
          <h4 class="section-header">Week 11</h4>

          <h5 class="content-header">Main Focus</h5>
          <p class="content-text">With recent technological breakthroughs in machine learning and AI, autonomous vehicles are coming closer to the
            reach of mass consumer markets. With new technologies brings new interactions, along with user interface and
            user experience issues that will make or break their future. Map out the experiences that will be required to
            assist people in interacting with autonomous vehicles in future cities.</p>
          <h5 class="content-header">Reflection</h5>
          <p class="content-text">As a result of 6 tested iterations at varying fidelity, in our final round of user testing, users were able to
            successfully accomplish booking & wayfinding to an autonomous vehicle and all mentioned that the experience was
            intuitive or easy. We were able to innovate multi-modal trip booking and add a new immersive compass based navigation
            that made transiting between modes a breeze. </p>

          <h4 class="section-header">Week 12</h4>

          <h5 class="content-header">Main Focus</h5>
          <p class="content-text">With recent technological breakthroughs in machine learning and AI, autonomous vehicles are coming closer to the
            reach of mass consumer markets. With new technologies brings new interactions, along with user interface and
            user experience issues that will make or break their future. Map out the experiences that will be required to
            assist people in interacting with autonomous vehicles in future cities.</p>
          <h5 class="content-header">Reflection</h5>
          <p class="content-text">As a result of 6 tested iterations at varying fidelity, in our final round of user testing, users were able to
            successfully accomplish booking & wayfinding to an autonomous vehicle and all mentioned that the experience was
            intuitive or easy. We were able to innovate multi-modal trip booking and add a new immersive compass based navigation
            that made transiting between modes a breeze. </p>
        </div>
      </section>

      <!-- Takeaways
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
      <section id="section5" class="cd-section">
        <div class="row" style="padding-top: 10%" data-aos="fade-up">
          <div class="text-header">TAKEAWAYS</div>
          <hr>
          <h5 class="content-header">Challenge</h5>
          <p class="content-text">With recent technological breakthroughs in machine learning and AI, autonomous vehicles are coming closer to the
            reach of mass consumer markets. With new technologies brings new interactions, along with user interface and
            user experience issues that will make or break their future. Map out the experiences that will be required to
            assist people in interacting with autonomous vehicles in future cities.</p>
          <h5 class="content-header">Approach</h5>
          <p class="content-text">With an open prompt, my team first ideated and researched possible opportunity areas to focus in on. Once we narrowed
            down to autonomous flying taxis, we planned out our overall design process into three main flexible sections:
            discover, design, deliver. Within each step, we iterated our approach to maximize our user-centered process.
          </p>
          <p class="content-text">In the end, we used over 20 design research, prototyping, and testing methods (and even created some of our own
            through iteration on existing ones). This enabled us to reach over 500 users through our research, perform over
            50 user tests on prototypes, and create 6 user insight driven iterations.</p>
          <h5 class="content-header">Outcome</h5>
          <p class="content-text">As a result of 6 tested iterations at varying fidelity, in our final round of user testing, users were able to
            successfully accomplish booking & wayfinding to an autonomous vehicle and all mentioned that the experience was
            intuitive or easy. We were able to innovate multi-modal trip booking and add a new immersive compass based navigation
            that made transiting between modes a breeze. </p>
        </div>
      </section>

      <!-- More Aira
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
      <section id="section6" class="cd-section" data-aos="fade-up">
        <div class="row" style="padding-top: 10%">
          <div class="text-header">MORE AIRA</div>
          <hr>
        </div>

        <div class="row" style="margin-top: 5%">
          <div class="one-third column">
            <img src="images/UberElevate.jpg" class="card-image" alt="A branded folder and lanyard">
            <h4 class="card-title">Multi-Modal Research Report</h4>
            <p class="card-caption">Where this all started</p>
          </div>

          <div class="one-third column">
            <img src="images/UberElevate.jpg" class="card-image" alt="Fractal tree built with processing.js">
            <h4 class="card-title">Portfolio (Coming Soon)</h4>
            <p class="card-caption">The streamlined overview and deliverables</p>
          </div>

          <div class="one-third column">
            <img src="images/UberElevate.jpg" class="card-image" alt="A branded folder and lanyard">
            <h4 class="card-title">Aira Companion Website</h4>
            <p class="card-caption">Just see the results</p>
          </div>
        </div>
      </section>


      <!-- Get In Touch
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->

      <div data-aos="fade-up" data-aos-offset="-25">
        <div class="row" style="margin-top: 10%">
          <div class="text-header">GET IN TOUCH</div>
          <hr>
        </div>

        <div class="row footer" style="margin-bottom: 5%; margin-top: 1%">
          <div class="social-footer">
            <a href="mailto:perrindesign@outlook.com">Email.</a>
            <a href="https://www.linkedin.com/in/perrindesign">Linkedin.</a>
            <a href="https://dribbble.com/perrindesign">Dribbble.</a>
            <a href="https://twitter.com/perrindesign">Twitter.</a>
            <a href="https://medium.com/@perrindesign">Medium.</a>
          </div>
          <div class="text-footer">Coded and Designed by Perrin Anto. Powered by
            <span class="emoji ec ec-blue-heart"></span> and
            <span class="emoji ec ec-coffee"></span>.</div>
        </div>
      </div>

    </div>
  </div>
  <!-- Javascript
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
  <script src="js/nanobar.js"></script>
  <script src="js/aos.js"></script>
  <script src="js/script.js"></script>

  <!-- End Document

  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>

</html>