<commit_before>---
layout: testlayout
---


<div class="bg-home">
  <section class="container race-tri-intro">
    <h1 class='rt-title'>RaceTri</h1>
    <h2 class='rt-subtitle'>Redesign</h2>

    <div class="rt-intro-text-container">
      <h3 class="rt-description-title">problem</h3>
      <p class="rt-description-text">SCHAWEL+COLES wanted to see how I would approach redesigning a section of one of their client’s current site.</p>
    </div>

    <div class="rt-intro-text-container">
      <h3 class="rt-description-title">constraints</h3>
      <ul>
        <li class="rt-description-text">Time (1 day)</li>
        <li class="rt-description-text">No client interaction</li>
      </ul>
    </div>

    <div class="rt-intro-text-container">
      <h3 class="rt-description-title">Process Overview</h3>
      <p class="rt-description-text">I work in a ‘Lean UX’ method of Build -> Measure -> Learn, and quick iterations.</p>
    <img src="../assets/img/build-measure-learn.png" alt="build-measure-learn">
      
      <p class="rt-description-text">The time constraint of 24 hours, and not being able to interact with the client, I made some assumptions that I would have first discussed with the client and tested afterwards to verify success.</p>
    </div>
  </section>
</div>





  <section class="container rt-step0-container">

  <h1 class='rt-title--light'>Whatchu workin’ with</h1>
  <h2 class='rt-subtitle--light'>Site Audit</h2>


    <div class="rt-paper-container">
      <h3 class="rt-description-title--light">Paper</h3>
      <p class="rt-description-text--light">In order to find out what area would have the most impact from a redesign, I started with taking a general audit of the site.</p>
      <p class="rt-description-text--light">For easy annotation and the ability to have various type of media without looking terrible (i.e., g-docs), I chose to use Dropbox's Paper to take my notes.</p>
    </div>

    <div class="rt-included-container">
      <h3 class="rt-description-title--light">Included</h3>
      <ul class='cookie-container'>
        <li class='cookie'>current information architecture</li>
        <li class='cookie'>basic QA (links/buttons/forms)</li>
        <li class='cookie'>website responsiveness</li>
        <li class='cookie'>screenshots</li>
        <li class='cookie'>date of content</li>
        <li class='cookie'>pagespeed insights</li>
        <li class='cookie'>problem code snippets</li>
      </ul>
    </div>


    
  </section>





<section class="container race-tri-outcome">
  <h1 class='rt-title'>Outcome Problem Solution</h1>
  <h2 class='rt-subtitle'>Events Page</h2>

  <div class="rt-outcome-container">

    <div class="rt-outcome-container">
     <!--  <h3 class="rt-description-title--light">Paper</h3> -->
      <p class="rt-description-text">After the site audit, I decided to focus on the <strong> ‘Events’</strong> page. By focusing on an <strong>outcome</strong>, I approached the redesign with the intent to increase signups for race events.</p>
      <p class="rt-description-text">The current website had several areas that I could reasonably assume were impacting sign ups.</p>


        <div class="rt-outcome-sidenote">
          <i class="fa fa-quote-left" aria-hidden="true"></i>
          <p>Going with the outcome of 'increasing event sign ups,' I would have nailed down a meaningful percentage increase with the client.</p>
        </div>
    </div>

  
 <h3 class="rt-description-title u-center">Potential Problems</h3>
    


    <div class="rt-problem-container">
     
       
      <figure class="testcenter u-center phone">
         <img src="../assets/img/iphone-current.png" alt="iphone-current">
         <figcaption class='figure-caption'>current site on mobile (not-responsive)</figcaption>
      </figure>


      <div class="closeup-container">

        <figure class="testcenter">
           <img src="../assets/img/noinfo.png" alt="iphone-current">
           <figcaption class='figure-caption orange  u-center'>no race info</figcaption>
        </figure>

        <figure class="testcenter">
           <img src="../assets/img/outdated.png" alt="iphone-current">
           <figcaption class='figure-caption orange u-center'>outdated content</figcaption>
        </figure>

      </div>

    </div>





  </div>
</section>

<div class="bg-sketches">

  <section class="container race-tri-ideation">
    <h1 class='rt-title'>Inital Ideation</h1>
    <h2 class='rt-subtitle'>Sketches</h2>

    <div class="rt-ideation-container">
    

    <!-- <img class='grow' src="../assets/img/sketch-high-level.png" alt="iphone-current">

    <img class='shrink' src="../assets/img/sketch-events-exploration.png" alt="iphone-current"> -->

    
        <figure class="grow">
           <img src="../assets/img/sketch-high-level.png" alt="iphone-current">
           <figcaption class='figure-caption u-center'>high-level exploration</figcaption>
        </figure>


        <div class="events-exploration ">

          <figure class="shrink">
             <img src="../assets/img/sketch-events-exploration.png" alt="iphone-current">
             <figcaption class='figure-caption orange u-center'>I explored data placement [date / time / race stats]</figcaption>
          </figure>

        </div>

    </div>

    
</section>

</div>






<div class="bg-exploration">
  <section class="container">
    <h1 class='rt-title'>Exploration</h1>
    <h2 class='rt-subtitle'>Sketches to high(er)-fi</h2>

    <p class="rt-description-text">After getting my thoughts out with sketches, I moved into Sketch to expand on them and then moved into higher fidelity mocks.</p>

    <div class="rt-exploration-container">

    <commit_msg>Add more explanation to sketches<commit_after>---
layout: testlayout
---


<div class="bg-home">
  <section class="container race-tri-intro">
    <h1 class='rt-title'>RaceTri</h1>
    <h2 class='rt-subtitle'>Redesign</h2>

    <div class="rt-intro-text-container">
      <h3 class="rt-description-title">problem</h3>
      <p class="rt-description-text">SCHAWEL+COLES wanted to see how I would approach redesigning a section of one of their client’s current site.</p>
    </div>

    <div class="rt-intro-text-container">
      <h3 class="rt-description-title">constraints</h3>
      <ul>
        <li class="rt-description-text">Time (1 day)</li>
        <li class="rt-description-text">No client interaction</li>
      </ul>
    </div>

    <div class="rt-intro-text-container">
      <h3 class="rt-description-title">Process Overview</h3>
      <p class="rt-description-text">I work in a ‘Lean UX’ method of Build -> Measure -> Learn, and quick iterations.</p>
    <img src="../assets/img/build-measure-learn.png" alt="build-measure-learn">
      
      <p class="rt-description-text">The time constraint of 24 hours, and not being able to interact with the client, I made some assumptions that I would have first discussed with the client and tested afterwards to verify success.</p>
    </div>
  </section>
</div>





  <section class="container rt-step0-container">

  <h1 class='rt-title--light'>Whatchu workin’ with</h1>
  <h2 class='rt-subtitle--light'>Site Audit</h2>


    <div class="rt-paper-container">
      <h3 class="rt-description-title--light">Paper</h3>
      <p class="rt-description-text--light">In order to find out what area would have the most impact from a redesign, I started with taking a general audit of the site.</p>
      <p class="rt-description-text--light">For easy annotation and the ability to have various type of media without looking terrible (i.e., g-docs), I chose to use Dropbox's Paper to take my notes.</p>
    </div>

    <div class="rt-included-container">
      <h3 class="rt-description-title--light">Included</h3>
      <ul class='cookie-container'>
        <li class='cookie'>current information architecture</li>
        <li class='cookie'>basic QA (links/buttons/forms)</li>
        <li class='cookie'>website responsiveness</li>
        <li class='cookie'>screenshots</li>
        <li class='cookie'>date of content</li>
        <li class='cookie'>pagespeed insights</li>
        <li class='cookie'>problem code snippets</li>
      </ul>
    </div>


    
  </section>





<section class="container race-tri-outcome">
  <h1 class='rt-title'>Outcome Problem Solution</h1>
  <h2 class='rt-subtitle'>Events Page</h2>

  <div class="rt-outcome-container">

    <div class="rt-outcome-container">
     <!--  <h3 class="rt-description-title--light">Paper</h3> -->
      <p class="rt-description-text">After the site audit, I decided to focus on the <strong> ‘Events’</strong> page. By focusing on an <strong>outcome</strong>, I approached the redesign with the intent to increase signups for race events.</p>
      <p class="rt-description-text">The current website had several areas that I could reasonably assume were impacting sign ups.</p>


        <div class="rt-outcome-sidenote">
          <i class="fa fa-quote-left" aria-hidden="true"></i>
          <p>Going with the outcome of 'increasing event sign ups,' I would have nailed down a meaningful percentage increase with the client.</p>
        </div>
    </div>

  
 <h3 class="rt-description-title u-center">Potential Problems</h3>
    


    <div class="rt-problem-container">
     
       
      <figure class="testcenter u-center phone">
         <img src="../assets/img/iphone-current.png" alt="iphone-current">
         <figcaption class='figure-caption'>current site on mobile (not-responsive)</figcaption>
      </figure>


      <div class="closeup-container">

        <figure class="testcenter">
           <img src="../assets/img/noinfo.png" alt="iphone-current">
           <figcaption class='figure-caption orange  u-center'>no race info</figcaption>
        </figure>

        <figure class="testcenter">
           <img src="../assets/img/outdated.png" alt="iphone-current">
           <figcaption class='figure-caption orange u-center'>outdated content</figcaption>
        </figure>

      </div>

    </div>





  </div>
</section>

<div class="bg-sketches">

  <section class="container race-tri-ideation">
    <h1 class='rt-title'>Inital Ideation</h1>
    <h2 class='rt-subtitle'>Sketches</h2>

    <div class="rt-ideation-container">
    <p class="rt-description-text">I usually start generating a few rough ideas on my iPad (paper), notebook (Rhodia’s dot-grid + Pilot vanishing point), or whiteboard before jumping into Sketch.</p>
    
    <p class="rt-description-text">This isn’t always the case, and I’ve found that depending on what I’m designing, it can be faster to start knocking out concepts in Sketch/XD.</p>
    

    <!-- <img class='grow' src="../assets/img/sketch-high-level.png" alt="iphone-current">

    <img class='shrink' src="../assets/img/sketch-events-exploration.png" alt="iphone-current"> -->

    
      <div class="events-exploration ">
        <figure class="grow">
           <img src="../assets/img/sketch-high-level.png" alt="iphone-current">
           <figcaption class='figure-caption u-center'>high-level exploration</figcaption>
        </figure>
        
        <figure class="shrink">
             <img src="../assets/img/sketch-events-exploration.png" alt="iphone-current">
             <figcaption class='figure-caption orange u-center'>I explored data placement [date / time / race stats]</figcaption>
          </figure>

        </div>

    </div>

    
</section>

</div>






<div class="bg-exploration">
  <section class="container">
    <h1 class='rt-title'>Exploration</h1>
    <h2 class='rt-subtitle'>Sketches to high(er)-fi</h2>

    <p class="rt-description-text">After getting my thoughts out with sketches, I moved into Sketch to expand on them and then moved into higher fidelity mocks.</p>

    <div class="rt-exploration-container">

    
{'fraction_non_alphanumeric': 0.15145123185960174, 'fraction_numerical': 0.00641241984475194, 'mean_word_length': 3.0759972489683634, 'pattern_counts': {'":': 0, '<': 305, '<?xml version=': 0, '>': 309, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7022033', 'n_tokens_mistral': 3728, 'n_tokens_neox': 3529, 'n_words': 943}