index.html

---
layout: default
---

<div class="row">
  <section class="columns small-12 medium-9 medium-centered">
    <p>"You put water into a cup it becomes the cup. You put water into a bottle it becomes the bottle. You put it in a teapot, it becomes the teapot." </p>
    <p class="quote-author">-Bruce Lee</p>
  </section>
</div>

<section class="row">
  <div class="columns small-12 medium-9 medium-centered">
    <p>How can we expand on responsive design to account for non-screen based interfaces such as voice, and how do we design for all of them?</p>
    <p>I propose a new design tool that looks to aid designers in creating the overall experience over designing for a platform.</p>
  </div>
</section>

<section class="row">
  <div class="columns small-12 medium-9 medium-centered">
    <h1>Background</h1>
    <h2>History of Responsive Design</h2>
    <p>“Developing fixed-size Web pages is a fundamentally flawed practice. Not only does it result in Web pages that remain at a constant size regardless of the user’s browser size, but it fails to take advantage of the medium’s flexibility.”</p>
    <p>James Kalback wrote in 2002</p>
    <div class="small-6 medium-3 columns">
      <img src="img/historyflipphone.svg" alt="Flipphone">
    </div>
    <div class="small-6 medium-3 columns">
      <img src="img/historydesktop.svg" alt="Desktop">
    </div>
    <div class="small-6 medium-3 columns">
      <img src="img/historygame.svg" alt="Game Controller">
    </div>
    <div class="small-6 medium-3 columns">
      <img src="img/historysmartphone.svg" alt="Smartphone">
    </div>
    <p>The need for responsive design came out of the growing number of devices, where mobile browsing would overtake desktop browsing. Input devices were changing from T9 keypads and mouse and keyboard to touch or game controllers and many more devices were connected to the internet.</p>
  </div>
  <div class="columns small-12 medium-9 medium-centered">
    <div class="image-container">
      <!-- Gif Sourced from: http://blog.froont.com/9-basic-principles-of-responsive-web-design/ -->
      <img src="img/responsivedesign.gif" alt="Responsive Design Gif">
    </div>
  </div>
  <div class="small-12 columns empty"></div>
</section>


<div class="row">
  <section class="columns small-12 medium-9 medium-centered">
    <h2>World Mimicry</h2>
    <p>Mimicking parts of the physical world in digital experiences aids the users understanding. This is the idea of Skeuomorphism.</p>
  </section>
  {% include switches.html %}
  <div class="image-container"><img src="img/wordicons.png" alt="Skeuomorphism Icons from Microsoft Word"/></div>
</div>

<section class="row">
  <div class="columns small-12 medium-9 medium-centered">
    <h2>Collaboration</h2>
    <p>Many current tools allow for some form of collaboration. Fluid Design needs to acknowledge these collaboration functions and address it.</p>
  </div>
  <div class="row">
    <div class="small-12 medium-9 medium-centered columns">
      <div class="small-6 medium-3 columns">
        <div class="image-container"><img src="img/sketchlogo.svg" alt="Sketch Logo"></div>
        <p class="application-name">Sketch</p>
      </div>
      <div class="small-6 medium-3 columns">
        <div class="image-container"><img src="img/adobexdlogo.svg" alt="Adobe XD Logo"></div>
        <p class="application-name">Adobe XD</p>
      </div>
      <div class="small-6 medium-3 columns">
        <div class="image-container"><img src="img/invisionstudiologo.svg" alt="inVision Studio Logo"></div>
        <p class="application-name">inVision Studio</p>
      </div>
      <div class="small-6 medium-3 columns">
        <div class="image-container"><img src="img/figmalogo.svg" alt="Figma Logo"></div>
        <p class="application-name">Figma</p>
      </div>
    </div>
  </div>
  <div class="small-12 columns">
    <div class="image-container" style="margin-top:50px; margin-bottom: 70px;"><img src="img/toolsites.png" alt="Tool Sites"></div>
  </div>
  <div class="small-12 medium-9 medium-centered columns">
    <p>Why is real-time collaboration so important?</p>
    <p>“We use Google Drawings to create wireframes because it allows us all to work in the same file at the same time and to instantly see changes made.” (“Collaboration on Same Document.”)</p>
  </div>
  <div class="small-12 columns empty"></div>
</section>


<section class="row">
  <div class="small-12 medium-9 medium-centered columns">
    <h2>Voice Tools</h2>
    <div class="small-6 medium-4 columns">
      <div class="image-container"><img src="img/sirilogo.png" alt="Siri Logo"></div>
      <p class="application-name">Apple's Siri</p>
    </div>
    <div class="small-6 medium-4 columns">
      <div class="image-container"><img src="img/alexalogo.svg" alt="Alexa Logo"></div>
      <p class="application-name">Amazon's Alexa</p>
    </div>
    <div class="small-6 medium-4 columns">
      <div class="image-container"><img src="img/googleassitant.svg" alt="Assitant Logo"></div>
      <p class="application-name">Google's Assistant</p>
    </div>
  </div>
  <div class="small-12 medium-9 medium-centered">
    <div class="small-6 medium-6 columns">
      <div class="image-container"><img src="img/dialogflowlogo.svg" alt="Dialogflow Logo"></div>
      <p class="application-name">Dialogflow</p>
    </div>
    <div class="small-6 medium-6 columns">
      <div class="image-container"><img src="img/sayspring.svg" alt="Sayspring Logo"></div>
      <p class="application-name">Sayspring</p>
    </div>
  </div>
  <div class="small-12 columns" style="margin-top:80px; margin-bottom: 50px;">
    <div class="image-container"><img src="img/voicetools.png" alt="Dialogflow and Sayspring Screenshots"></div>
  </div>
  <div class="small-12 medium-9 medium-centered columns">
    <p>Voice frameworks set several rules to address within a voice context. Such as what voice is allowed to do on each of the platforms. </p><p>The voice tools start to break down these rules. Allowing the designer to address specific user requests and the scope of the voice application.</p>
<!--    <p>Voice frameworks set, at high level, several rules to address within a voice context. Such as what voice is allowed to do on each of the platforms, “greetings and goodbyes” as well as error handling for unexpected responses. </p><p>The voice tools start to break down many of the same rules. Allowing the designer to address specific user requests and the scope of the voice application.</p>-->
  </div>
  <div class="small-12 columns empty"></div>
</section>

<section class="row">
  <div class="columns small-12 medium-9 medium-centered">
    <h2>Flexibility (Material)</h2>
    <p>“I have an old climbing rope that could be labeled as 'broken'. It’s not suitable as a safety device while climbing anymore but I have woven it into a door mat” (Maestri)</p>
  </div>
  <div class="image-container"><img src="img/rope.png" alt="Flexible Rope in Different Context"></div>
  <div class="columns small-12 medium-9 medium-centered">
    <p>Which got me thinking…</p>
    <p>What would be the digital equalvalent of the rope, a digital flexible material?</p>
  </div>
  <div class="image-container"><img src="img/marioresolution.png" alt="Mario at 2 different resolutions"></div>
  <div class="columns small-12 medium-9 medium-centered">
    <p>And what is the scale of this material for appropicate modularization?</p>
  </div>
  <div class="small-12 columns empty"></div>
</section>

<section class="row">
  <div class="columns small-12 medium-9 medium-centered">
    <h1>Process & Methodology</h1>
    <h2>Definition</h2>
    <p>Most defintions for responsive design address one consistent aspect “an interface that responds to the changing screen size”</p>
  </div>
  <div class="small-12 columns">
    <div class="right-message message-bubble small-11 small-offset-1 medium-8 medium-offset-4">
      <img src="../img/sent-message-hook-right.svg" class="sent-message-hook-right"/>
      <p>"A responsive design is made to fit all types of screens depending on size, rotation and way of use (touchscreen vs mouse or keyboard)"</p>
    </div>
  </div>
  <div class="small-12 columns">
    <div class="left-message message-bubble small-11 medium-8 left-message">
      <img src="../img/sent-message-hook-left.svg" class="sent-message-hook-left"/>
      <p>"Responds to a different environment, so if there is different lighting condition it may change, responsive design for Waze so when it’s night it changes to a black background"</p>
    </div>
  </div>
  <div class="small-12 columns">
    <div class="right-message message-bubble small-11 small-offset-1 medium-8 medium-offset-4">
      <img src="../img/sent-message-hook-right.svg" class="sent-message-hook-right"/>
      <p>"An interface that responds to the changing hardware or software that’s being used whether that’s screen size or operating system, seamless transition"</p>
    </div>
  </div>
  <div class="small-12 medium-9 medium-centered columns">
    <img src="img/phonemic.svg" alt="smartphone and microphone">
    <p>I wanted to choose two distinct and existing platforms to use for benchmarking. I decided to use mobile and voice, leveraging a screen based interface and a voice based interface.</p>
  </div>
  <div class="small-12 medium-9 medium-centered columns">
    <h2>Chatbot</h2>
  </div>
  <img class="zoomable-image" src="img/jasperflow.png" alt="Chatbot Conversation Flow">
</section>

<section class="row">
  <div class="small-12 medium-9 medium-centered columns">
    <h2>Prototypes</h2>
    <p>“[Responsive design is] always going to be a problem when we’re designing using static pixel tools instead of declaring relationships between things”.</p>
    <p>Shouldn’t our design tools be as flexible as the platforms and environments they are deployed in?</p>
    <p style="margin-bottom: 80px;">I think so!</p>
  </div>
  <div class="small-12 columns">
    <div class="small-12 medium-5 columns">
      <img class="zoomable-image" src="img/breakpointcallout.svg" alt="Breakpoint Bar Prototype Callout">
    </div>
    <div class="small-12 medium-7 columns">
      <img class="zoomable-image" src="img/breakpointbar.png" alt="Breakpoint Bar Prototype Callout">
    </div>
  </div>
  <div style="margin-bottom: 100px;" class="small-12 columns">
    <div class="small-12 medium-5 columns">
      <img class="zoomable-image" src="img/autosizecallout.svg" alt="Autosize Callout">
    </div>
    <div class="small-12 medium-7 columns">
      <img class="zoomable-image" src="img/autosize.png" alt="Autosize Prototype Callout">
    </div>
  </div>
  <div class="small-12 columns">
    <div style="margin-bottom: 30px;" class="small-6 medium-2 columns small-centered">
      <div class="image-container" style="padding: 15px;"><img src="img/axurelogo.png" alt="Axure Logo"></div>
      <p class="application-name">Axure RP</p>
    </div>
    <div class="small-12 medium-9 medium-centered columns">
      <img class="zoomable-image" src="img/axureadaptive.png" alt="Axure Adaptive View">
      <p>The issue with both of my prototypes is that they only take into consideration screen based interfaces and only screen size rather than more environmental considerations such as touch vs mouse and keyboard.</p>
      <!-- As these prototypes do not take into consideration non-screen based interfaces such as voice, I went back to the drawing board and revisited a typical design process to guide my next steps. Interaction flows as being a good place to start as they are clear in terms of what the user should be doing but are still abstract because they leave out the platform they work on.-->
    </div>
    <div class="small-12 columns empty"></div>
  </div>
</section>

<section class="row">
  <div class="small-12 medium-9 columns medium-centered">
    <h1>Evaluation</h1>
    <h2>Workshop</h2>
    <div class="small-6 medium-3 columns">
      <div class="workshop workshop1">
        <img src="img/workshop1.svg" alt="Setting the Stage Icon">
      </div>
      <p class="workshop-title"><span class="workshop-numbers">1</span>Setting the stage</p>
    </div>
    <div class="small-6 medium-3 columns">
      <div class="workshop workshop2">
        <img src="img/workshop2.svg" alt="Mobile Post-it Flow Icon">
      </div>
      <p class="workshop-title"><span class="workshop-numbers">2</span>Mobile Post-it Flow</p>
    </div>
    <div class="small-6 medium-3 columns">
      <div class="workshop workshop3">
        <img src="img/workshop3.svg" alt="Voice Post-it Flow Icon">
      </div>
      <p class="workshop-title"><span class="workshop-numbers">3</span>Voice Post-it Flow</p>
    </div>
    <div class="small-6 medium-3 columns">
      <div class="workshop workshop4">
        <img src="img/workshop4.svg" alt="Fluid Post-it Flow Icon">
      </div>
      <p class="workshop-title"><span class="workshop-numbers">4</span>Fluid Post-it Flow</p>
    </div>
    <div class="small-6 medium-3 columns">
      <div class="workshop workshop5">
        <img src="img/workshop5.svg" alt="Fluid Wireframe">
      </div>
      <p class="workshop-title"><span class="workshop-numbers">5</span>Fluid Wireframe</p>
    </div>
      <div class="small-6 medium-3 columns">
      <div class="workshop workshop6">
        <img src="img/workshop6.svg" alt="Wireframe Test">
      </div>
      <p class="workshop-title"><span class="workshop-numbers">6</span> Wireframe Test</p>
    </div>
    <div class="small-6 medium-3 columns">
      <div class="workshop workshop7">
        <img src="img/workshop7.svg" alt="Group Discussion">
      </div>
      <p class="workshop-title"><span class="workshop-numbers">7</span>Group Discussion</p>
    </div>
    <div class="small-6 medium-3 columns">
      <div class="workshop workshop8">
        <img src="img/workshop8.svg" alt="Fluid Material?">
      </div>
      <p class="workshop-title"><span class="workshop-numbers">8</span>Fluid Material?</p>
    </div>
    <div style="margin-top: 50px; margin-bottom: 50px;" class="small-12 columns">
      <p>The goal of the workshop was to test how designers worked in a platform agnostic way through several exercises and to see what their takeaways were from this process.</p>
    </div>
  </div>
  <div style="margin-bottom: 50px;" class="image-container">
    <img class="zoomable-image" src="img/postitflows.png" alt="Post-it Flows">
  </div>
    
  <div class="small-12 columns">
    <div class="left-message message-bubble small-11 medium-8">
      <img src="../img/sent-message-hook-left.svg" class="sent-message-hook-left"/>
      <p>"I am more likely to buy when using voice and browse on my phone."</p>
    </div>
  </div>
  <div class="small-12 columns">
    <div class="right-message message-bubble small-11 small-offset-1 medium-8 medium-offset-4">
      <p>"Payment on voice would be strange for a first time [purchase]"</p>
      <img src="../img/sent-message-hook-right.svg" class="sent-message-hook-right"/>
    </div>
  </div>
  <div class="small-12 columns">
    <div class="left-message message-bubble small-11 medium-8" style="margin-bottom: 10px;">
      <p>"Why don’t I use both platforms together?"</p>
    </div>
  </div>
  <div class="small-12 columns">
    <div class="left-message message-bubble small-11 medium-8">
      <p>"voice and mobile [used together] could be a great experience?"</p>
      <img src="../img/sent-message-hook-left.svg" class="sent-message-hook-left"/>
    </div>
  </div>
  <img style="margin-bottom: 50px;" class="zoomable-image" src="img/workshoppeople.png" alt="Workshop Process Photos">

  <div class="small-12 medium-9 medium-centered columns">
    <h3>Fluid Material</h3>
    <p style="margin-bottom: 50px;">The workshop concluded with the group addressing what they thought the Fluid Material should be; a core action, an action that must exist on each platform in order to complete the experience.</p>
    <div style="margin-bottom: 50px;" class="small-6 columns">
      <div class="image-container"><img src="img/coreactionblock.svg" alt="Core Action Block"></div>
      <p class="application-name">Core Action</p>
    </div>
    <div class="small-6 columns">
      <div class="image-container"><img src="img/actionstack.svg" alt="Action Stack"></div>
      <p class="application-name">Action Stack</p>
    </div>
    <div>
      <div class="image-container"><img src="img/actionstackequation.svg" alt="Action Stack Equation"></div>
    </div>
  </div>
  <div class="small-12 medium-9 medium-centered columns">
    <h2>Designed Scenarios</h2>
    <p>The next step was to implement the Fluid Material and the process of designing an interaction flow that is propagated to several platforms, in this case a mobile and voice platform.</p>
    <div class="row designed-experience">
      <div class="small-4 columns">
        <div class="workshop rideshare">
          <div class="image-container"><img src="img/rideshareicon.svg" alt="Rideshare Icon"></div>
        </div>
        <p class="application-name">Rideshare</p>
      </div>
      <div class="small-4 columns">
        <div class="workshop movie">
          <div class="image-container"><img src="img/movieicon.svg" alt="Movie Icon"></div>
        </div>
        <p class="application-name">Movie Purchase</p>
      </div>
      <div class="small-4 columns">
        <div class="workshop pizza">
          <div class="image-container"><img src="img/pizzaicon.svg" alt="Pizza Icon"></div>
        </div>
        <p class="application-name">Pizza Order</p>
      </div>
    </div>
  </div>
  <div class="small-12 medium-9 medium-centered columns">
    <h3>Rideshare Experience</h3>
  </div>
  <div class="small-12 columns">
    <img class="image-spacing zoomable-image" src="img/rideshareinteractionflow1.svg" alt="Rideshare Interaction Flow First Pass">
    <img class="image-spacing zoomable-image" src="img/rideshareinteractionflow2.svg" alt="Rideshare Interaction Flow Final Pass">
    <img class="image-spacing zoomable-image" src="img/ridesharescreens.png" alt="Rideshare Propagation to Screen">
    <img class="image-spacing zoomable-image" src="img/ridesharevoice.svg" alt="Rideshare Propagation to Voice">
  </div>
  
  <div class="small-12 medium-9 medium-centered columns">
    <h3>Movie Purchase Experience</h3>
  </div>
  <div class="small-12 columns">
    <img class="image-spacing" src="img/movieinteractionflow.svg" alt="Movie Interaction Flow">
    <img class="image-spacing zoomable-image" src="img/moviescreens.png" alt="Movie Propagation to Screen">
    <img class="image-spacing zoomable-image" src="img/movievoice.svg" alt="Movie Propagation to Voice">
  </div>
  
  <div class="small-12 medium-9 medium-centered columns">
    <h3>Pizza Order Experience</h3>
  </div>
  <div class="small-12 columns">
    <img class="image-spacing zoomable-image" src="img/pizzainteractionflow.svg" alt="Pizza Interaction Flow">
    <img class="image-spacing zoomable-image" src="img/pizzascreens.png" alt="Pizza Propagation to Screen">
    <img style="margin-bottom: 50px;" class="zoomable-image image-spacing" src="img/pizzavoice.svg" alt="Pizza Propagation to Voice">
  </div>
  <div class="small-12 medium-9 medium-centered columns">
    <h3 style="margin-bottom: 50px;">User Feedback</h3>
  </div>
  <div class="small-12 columns">
    <div class="left-message message-bubble small-11 medium-8">
      <img src="../img/sent-message-hook-left.svg" class="sent-message-hook-left"/>
      <p>"The application functions in a logical order and provides good feedback"</p>
    </div>
  </div>
  
  <div class="small-12 columns">
    <div class="right-message message-bubble small-11 small-offset-1 medium-8 medium-offset-4">
      <img src="../img/sent-message-hook-right.svg" class="sent-message-hook-right"/>
      <p>“speaking is far more natural”</p>
    </div>
  </div>
  <div class="small-12 columns">
    <div class="left-message message-bubble small-11 medium-8">
      <img src="../img/sent-message-hook-left.svg" class="sent-message-hook-left"/>
      <p>"An exit or escape once the ride has been ordered needs to be added"</p>
    </div>
  </div>
  <div class="small-12 columns">
    <div class="right-message message-bubble small-11 small-offset-1 medium-8 medium-offset-4">
      <img src="../img/sent-message-hook-right.svg" class="sent-message-hook-right"/>
      <p>“[Voice is] much slower than on the phone unless it was to repeat order, the process was too long”</p>
    </div>
  </div>
  <div style="margin-bottom: 50px;" class="small-12 columns">
    <div class="left-message message-bubble small-11 medium-8">
      <img src="../img/sent-message-hook-left.svg" class="sent-message-hook-left"/>
      <p>"Can I check the status on my phone after the request from voice?"</p>
    </div>
  </div>
  
  <div class="small-12 medium-9 medium-centered columns">
    <h3>Recap</h3>
    <p>I propose a new design tool that looks to aid designers in creating the overall experience over designing for a platform. Allowing designers to consider non-screen based interfaces</p>
  </div>
  <div class="small-12 columns empty"></div>
</section>

<section class="row">
  <div class="small-12 medium-9 medium-centered columns">
    <h2>Fluid Design Tool</h2>
    <div class="image-container fluid-app-icon"><img src="img/fluidappicon.png" alt="Fluid Design Application Icon"></div>
  </div>
</section>
<section class="row">
  <div class="small-12 medium-4 columns">
    <div class="image-container"><img src="img/fluidaction.svg" alt="Fluid Design Action Icon"></div>
    <p class="app-phase">Action</p>
    <p class="app-phase-text">Lights! Camera! Action! No movies here, but lots of actions. Actions make up the main interactions of your experiences.</p>
  </div>
  <div class="small-12 medium-4 columns">
    <div class="image-container"><img src="img/fluidplatform.svg" alt="Fluid Design Platform Icon"></div>
    <p class="app-phase">Platform</p>
    <p class="app-phase-text">Design for any and every platform out there. Fully connected to all the other propagations all linked to the core actions.</p>
  </div>
  <div class="small-12 medium-4 columns">
    <div class="image-container"><img src="img/fluidui.svg" alt="Fluid Design UI Icon"></div>
    <p class="app-phase">UI</p>
    <p class="app-phase-text">Give all your experiences a fresh coat of paint! Whether colors and drop shadows or accents and tones.</p>
  </div>
  <div class="small-12 columns">
    <img class="zoomable-image fluid-hero" src="img/fluidhero.png" alt="Fluid Design Application Hero Image">
    <p class="hero-text">Your Design Experience Elevated.</p>
  </div>
  <div class="small-12 columns">
    
    <div class="small-12 columns feature-container">
      <div class="feature-tile columns">
        <div class="small-12 medium-6 columns">
          <div class="small-12 columns">
            <div class="image-container feature-image"><img src="img/actionstackmodule.svg" alt="Action Stack Image"></div>
          </div>
        </div>
        <div class="small-12 medium-6 columns">
          <div class="small-12 columns">
            <div class="feature-icon"><img src="img/coreactionblock.svg" alt="Core Action Block Icon"></div>
          </div>
          <div class="small-12 columns">
            <p class="feature-title">Actions Start your Experience.</p>
          </div>
          <div class="small-12 columns">
            <p class="feature-text">Actions build the base of your experience and help to keep functions crisp and clear.</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="small-12 columns feature-container">
      <div class="feature-tile columns">
        <div class="small-12 medium-6 columns">
          <div class="small-12 columns">
            <div class="image-container feature-image"><img src="img/addplatform.svg" alt="Add Platform Modal"></div>
          </div>
        </div>
        <div class="small-12 medium-6 columns">
          <div class="small-12 columns">
            <div class="feature-icon"><img src="img/platform.svg" alt="Platform Icon"></div>
          </div>
          <div class="small-12 columns">
            <p class="feature-title">Multi-platform Support</p>
          </div>
          <div class="small-12 columns">
            <p class="feature-text">Propagate all your actions to any platform. Create beautiful multi-platform experiences.</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="small-12 columns feature-container">
      <div class="feature-tile columns">
        <div class="small-12 medium-6 columns">
          <div class="small-12 columns">
            <div class="image-container feature-image"><img src="img/screendesigntools.png" alt="Screen Design Tools"></div>
          </div>
        </div>
        <div class="small-12 medium-6 columns">
          <div class="small-12 columns">
            <div class="feature-icon"><img src="img/phoneicon.svg" alt="Screen Design Icon"></div>
          </div>
          <div class="small-12 columns">
            <p class="feature-title">Screen Design Tools</p>
          </div>
          <div class="small-12 columns">
            <p class="feature-text">All the tools you need to craft the best application on screen. Everything to create a great visual language.</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="small-12 columns feature-container">
      <div class="feature-tile columns">
        <div class="small-12 medium-6 columns">
          <div class="small-12 columns">
            <div class="image-container feature-image"><img src="img/screenproperties.png" alt="Screen Design Properties"></div>
          </div>
        </div>
        <div class="small-12 medium-6 columns">
          <div class="small-12 columns">
            <div class="feature-icon"><img src="img/phoneicon.svg" alt="Phone Icon"></div>
          </div>
          <div class="small-12 columns">
            <p class="feature-title">Screen Design Properties</p>
          </div>
          <div class="small-12 columns">
            <p class="feature-text">Adjust until your hearts content with all the expected properties for any screen interface element.</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="small-12 columns feature-container">
      <div class="feature-tile columns">
        <div class="small-12 medium-6 columns">
          <div class="small-12 columns">
            <div class="image-container feature-image"><img src="img/voicetools.svg" alt="Voice Design Tools"></div>
          </div>
        </div>
        <div class="small-12 medium-6 columns">
          <div class="small-12 columns">
            <div class="feature-icon"><img src="img/voiceicon.svg" alt="Voice Icon"></div>
          </div>
          <div class="small-12 columns">
            <p class="feature-title">Voice Design Tools</p>
          </div>
          <div class="small-12 columns">
            <p class="feature-text">All the elements in one place to assemble the perfect voice flow. From system responses to variables to the user requests.</p>
            <p class="feature-text">
              Want to get started with voice design in Sketch? Check out my <a href="img/voice-flow-builder.sketch">voice design template.</a>
            </p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="small-12 columns feature-container">
      <div class="feature-tile columns">
        <div class="small-12 medium-6 columns">
          <div class="small-12 columns">
            <div class="image-container feature-image"><img src="img/voiceproperties.png" alt="Voice Design Properties"></div>
          </div>
        </div>
        <div class="small-12 medium-6 columns">
          <div class="small-12 columns">
            <div class="feature-icon"><img src="img/voiceicon.svg" alt="Voice Icon"></div>
          </div>
          <div class="small-12 columns">
            <p class="feature-title">Voice Design Properties</p>
          </div>
          <div class="small-12 columns">
            <p class="feature-text">With the voice design properties you are able to create just the right character for your application. Specify an accent or a tone really matching the mood of your users.</p>
          </div>
        </div>
      </div>
    </div>
    
  </div>
  <div class="small-12 columns">
    <div class="small-12 columns feature-container">
      <div class="feature-tile columns">
        <div class="small-12 columns">
          <div class="feature-icon-2"><img src="img/linkicon.svg" alt="Link Feature Icon"></div>
        </div>
        <div class="small-12 medium-8 medium-centered columns">
          <p class="feature-title-2">Form Links Between Your Designs</p>
        </div>
        <div class="small-12 medium-8 medium-centered columns">
          <p class="feature-text-2">With the Link feature connect all your actions to their respective interations. Helping you keep track of every action on every device.</p>
        </div>
        <div class="small-12 columns">
          <div class="image-container feature-image"><img src="img/linkedinterface.png" alt="Linked Interface" class="zoomable-image"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="small-12 columns">
    <div class="small-12 columns feature-container">
      <div class="feature-tile columns">
        <div class="small-12 columns">
          <div class="feature-icon-2"><img src="img/handofficon.svg" alt="Handoff Feature Icon"></div>
        </div>
        <div class="small-12 medium-8 medium-centered columns">
          <p class="feature-title-2">Create Seamless Experiences Regardless of Platform</p>
        </div>
        <div class="small-12 medium-8 medium-centered columns">
          <p class="feature-text-2">With Handoff you can create experiences that bridge platforms. Helping you design for the way we live everyday. Whether on our phones, or talking to our voice assitants.</p>
        </div>
        <div class="small-12 columns">
          <div class="image-container feature-image"><img src="img/fluidhandoffinterface.png" alt="Handoff Interface" class="zoomable-image"></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="row">
  <div class="small-12 medium-9 medium-centered columns">
    <h3>Walkthrough</h3>
    <div class="image-container">
      <img src="img/welcomescreen.png" alt="Welcome Screen" class="zoomable-image">
    </div>
    <div class="image-container">
      <img src="img/interactionflowempty.png" alt="Interaction Flow Interface Empty" class="zoomable-image">
    </div>
    <div class="image-container">
      <img src="img/interactionflowpoulated.png" alt="Interaction Flow Interface Populated" class="zoomable-image">
    </div>
    <div class="image-container">
      <img src="img/mainviewempty.png" alt="Main Interface Empty" class="zoomable-image">
    </div>
    <div class="image-container">
      <img src="img/mainviewpopulated.png" alt="Main View Populated" class="zoomable-image">
    </div>
  </div>
</section>

<section class="row">
  <div class="small-12 medium-8 medium-centered columns">
    <h1>Conclusion</h1>
<!--    <p>Fluid Design, through its dedicated interaction flow tool, screen design tools and voice design tools, is helpful in designing across different platforms, but showed the limitations when designing in a platform agnostic fashion. User and designer feedback indicated that not all experiences should be propagated to their fullest extent on all platforms.</p>-->
    <p>Fluid Design is helpful in designing across different platforms, but showed the limitations when designing in a platform agnostic fashion. </p><p>Not all experiences should be propagated to their fullest extent on all platforms.</p>
    <p>It also exposes a process of updating and propagating design decisions from one level of abstraction to another and back again. </p><p>Fluid Design helps to address what the future of our design tools may look like.</p>
  </div>
</section>
<div class="row">
    {% include fluid.html %}
</div>
<section class="row">
  <div class="small-12 medium-8 medium-centered columns">
    <h1>Future Works</h1>
    <p style="margin-bottom: 100px;">Fluid Design addresses some of the questions around designing platform-agnostic experience, but could afford further study with more details and nuances for designers and their users.</p>
  </div>
    <div class="small-12 medium-6 columns feature-container">
      <div class="feature-tile columns">
        <div class="small-12 columns">
          <div class="image-container feature-image"><img src="img/futuredaynight.svg" alt="Future Works: Context Aware Icon"></div>
        </div>
<!--
        <div class="small-12 columns">
          <div class="feature-icon"><img src="img/voiceicon.svg" alt="Voice Icon"></div>
        </div>
-->
        <div class="small-12 columns">
          <p class="feature-title future-title">Content Aware</p>
        </div>
        <div class="small-12 columns">
          <p class="feature-text">Explore what a content aware design space would look like. Allowing designers to handle user environmental cases such as day or night modes.</p>
        </div>
      </div>
    </div>
    
    <div class="small-12 medium-6 columns feature-container">
      <div class="feature-tile columns">
        <div class="small-12 columns">
          <div class="image-container feature-image"><img src="img/futuremotion.svg" alt="Future Works: Motion Design Icon"></div>
        </div>
<!--
        <div class="small-12 columns">
          <div class="feature-icon"><img src="img/voiceicon.svg" alt="Voice Icon"></div>
        </div>
-->
        <div class="small-12 columns">
          <p class="feature-title future-title">Motion Design</p>
        </div>
        <div class="small-12 columns">
          <p class="feature-text">Give designers the tools they need to animate at the object level. Allowing for high fidelity prototyping of all your screen designs.</p>
        </div>
      </div>
    </div>
    
    <div class="small-12 medium-6 columns feature-container">
      <div class="feature-tile columns">
        <div class="small-12 columns">
          <div class="image-container feature-image"><img src="img/futuresound.svg" alt="Future Works: Sound Design Icon"></div>
        </div>
<!--
        <div class="small-12 columns">
          <div class="feature-icon"><img src="img/voiceicon.svg" alt="Voice Icon"></div>
        </div>
-->
        <div class="small-12 columns">
          <p class="feature-title future-title">Sound Design</p>
        </div>
        <div class="small-12 columns">
          <p class="feature-text">Share the love of sound with your users. Sound design tools give you the power to share all kinds of sounds with your voice experiences.</p>
        </div>
      </div>
    </div>
    
    <div class="small-12 medium-6 columns feature-container">
      <div class="feature-tile columns">
        <div class="small-12 columns">
          <div class="image-container feature-image"><img src="img/futuredev.svg" alt="Future Works: Development Handoff Icon"></div>
        </div>
<!--
        <div class="small-12 columns">
          <div class="feature-icon"><img src="img/voiceicon.svg" alt="Voice Icon"></div>
        </div>
-->
        <div class="small-12 columns">
          <p class="feature-title future-title">Dev Handoff</p>
        </div>
        <div class="small-12 columns">
          <p class="feature-text">Create a clean and smooth process to handoff your design to developers. Share screen and voice specifications and from wireframes to fully rendered applications.</p>
        </div>
      </div>
    </div>
    
    <div class="small-12 medium-6 columns feature-container">
      <div class="feature-tile columns">
        <div class="small-12 columns">
          <div class="image-container feature-image"><img src="img/futureplatform.svg" alt="Future Works: Future Platforms Icon"></div>
        </div>
<!--
        <div class="small-12 columns">
          <div class="feature-icon"><img src="img/voiceicon.svg" alt="Voice Icon"></div>
        </div>
-->
        <div class="small-12 columns">
          <p class="feature-title future-title">Future Platform Test</p>
        </div>
        <div class="small-12 columns">
          <p class="feature-text">Test out future platforms with Fluid Design. Ensuring that all the necessary tools are in place for the designing the best possible experiences.</p>
        </div>
      </div>
    </div>
</section>