<div class="xblock xblock-public_view xblock-public_view-vertical" data-block-type="vertical" data-runtime-class="LmsRuntime" data-usage-id="block-v1:MITx+11.155x+1T2019+type@vertical+block@b0110c2972224aa9af5f2c5e26d4ab3f" data-course-id="course-v1:MITx+11.155x+1T2019" data-has-score="False" data-graded="False" data-runtime-version="1" data-init="VerticalStudentView" data-request-token="0e917884029d11efa51f0afff417eba9">
<h2 class="hd hd-2 unit-title">Yasmine Kotturi: Visual and Physical Prototypes</h2>
<div class="vert-mod">
<div class="vert vert-0" data-id="block-v1:MITx+11.155x+1T2019+type@html+block@8e00a2131ce14f30803f27bc787d3a42">
<div class="xblock xblock-public_view xblock-public_view-html xmodule_display xmodule_HtmlBlock" data-block-type="html" data-runtime-class="LmsRuntime" data-usage-id="block-v1:MITx+11.155x+1T2019+type@html+block@8e00a2131ce14f30803f27bc787d3a42" data-course-id="course-v1:MITx+11.155x+1T2019" data-has-score="False" data-graded="False" data-runtime-version="1" data-init="XBlockToXModuleShim" data-request-token="0e917884029d11efa51f0afff417eba9">
<script type="json/xblock-args" class="xblock-json-init-args">
{"xmodule-type": "HTMLModule"}
</script>
<p>Former Research Fellow at MIT's Teaching Systems Lab Yasmine Kotturi defines various types of prototypes: sketches (2:09), storyboarding (2:41), paper prototyping (2:52), wireframing (3:13), and physical prototyping (3:31). She then shows us an example of storyboarding and paper prototyping from her work in the TSL (4:07). </p>
<p>Have you had the opportunity to interact with a prototype for a product or experience? Perhaps you saw an early version of software or maybe you tried one version of a service. (Example: Perhaps your supermarket piloted a new home delivery service.) What did you learn from the prototyping experience as a whole?</p>
<p></p>
</div>
</div>
<div class="vert vert-1" data-id="block-v1:MITx+11.155x+1T2019+type@video+block@33d40f6634d148d6919f971fb2969c5e">
<div class="xblock xblock-public_view xblock-public_view-video xmodule_display xmodule_VideoBlock" data-block-type="video" data-runtime-class="LmsRuntime" data-usage-id="block-v1:MITx+11.155x+1T2019+type@video+block@33d40f6634d148d6919f971fb2969c5e" data-course-id="course-v1:MITx+11.155x+1T2019" data-has-score="False" data-graded="False" data-runtime-version="1" data-init="XBlockToXModuleShim" data-request-token="0e917884029d11efa51f0afff417eba9">
<script type="json/xblock-args" class="xblock-json-init-args">
{"xmodule-type": "Video"}
</script>
<h3 class="hd hd-2">Yasmine Kotturi: Visual and Physical Prototypes</h3>
<div
id="video_33d40f6634d148d6919f971fb2969c5e"
class="video closed"
data-metadata='{"transcriptLanguages": {"en": "English"}, "captionDataDir": null, "autoAdvance": false, "poster": null, "publishCompletionUrl": "/courses/course-v1:MITx+11.155x+1T2019/xblock/block-v1:MITx+11.155x+1T2019+type@video+block@33d40f6634d148d6919f971fb2969c5e/handler/publish_completion", "transcriptLanguage": "en", "showCaptions": "true", "completionEnabled": false, "prioritizeHls": false, "sources": ["https://d2f1egay8yehza.cloudfront.net/MITx11.155x-V001800_DTH.mp4", "https://d2f1egay8yehza.cloudfront.net/MITx11.155x-V001800/MITx11.155x-V001800.m3u8"], "transcriptAvailableTranslationsUrl": "/courses/course-v1:MITx+11.155x+1T2019/xblock/block-v1:MITx+11.155x+1T2019+type@video+block@33d40f6634d148d6919f971fb2969c5e/handler/transcript/available_translations", "ytApiUrl": "https://www.youtube.com/iframe_api", "autohideHtml5": false, "start": 0.0, "generalSpeed": 1.0, "recordedYoutubeIsAvailable": true, "speed": null, "end": 0.0, "ytMetadataEndpoint": "", "savedVideoPosition": 0.0, "ytTestTimeout": 1500, "autoplay": false, "saveStateUrl": "/courses/course-v1:MITx+11.155x+1T2019/xblock/block-v1:MITx+11.155x+1T2019+type@video+block@33d40f6634d148d6919f971fb2969c5e/handler/xmodule_handler/save_user_state", "saveStateEnabled": false, "transcriptTranslationUrl": "/courses/course-v1:MITx+11.155x+1T2019/xblock/block-v1:MITx+11.155x+1T2019+type@video+block@33d40f6634d148d6919f971fb2969c5e/handler/transcript/translation/__lang__", "streams": "1.00:WCmHgY6pl1k", "completionPercentage": 0.95, "duration": 470.94, "lmsRootURL": "https://openlearninglibrary.mit.edu"}'
data-bumper-metadata='null'
data-autoadvance-enabled="False"
data-poster='null'
tabindex="-1"
>
<div class="focus_grabber first"></div>
<div class="tc-wrapper">
<div class="video-wrapper">
<span tabindex="0" class="spinner" aria-hidden="false" aria-label="Loading video player"></span>
<span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="Play video"></span>
<div class="video-player-pre"></div>
<div class="video-player">
<div id="33d40f6634d148d6919f971fb2969c5e"></div>
<h4 class="hd hd-4 video-error is-hidden">No playable video sources found.</h4>
<h4 class="hd hd-4 video-hls-error is-hidden">
Your browser does not support this video format. Try using a different browser.
</h4>
</div>
<div class="video-player-post"></div>
<div class="closed-captions"></div>
<div class="video-controls is-hidden">
<div>
<div class="vcr"><div class="vidtime">0:00 / 0:00</div></div>
<div class="secondary-controls"></div>
</div>
</div>
</div>
</div>
<div class="focus_grabber last"></div>
<h3 class="hd hd-4 downloads-heading sr" id="video-download-transcripts_33d40f6634d148d6919f971fb2969c5e">Downloads and transcripts</h3>
<div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts_33d40f6634d148d6919f971fb2969c5e">
<div class="wrapper-download-transcripts">
<h4 class="hd hd-5">Transcripts</h4>
<ul class="list-download-transcripts">
<li class="transcript-option">
<a class="btn btn-link" href="/courses/course-v1:MITx+11.155x+1T2019/xblock/block-v1:MITx+11.155x+1T2019+type@video+block@33d40f6634d148d6919f971fb2969c5e/handler/transcript/download" data-value="srt">Download SubRip (.srt) file</a>
</li>
<li class="transcript-option">
<a class="btn btn-link" href="/courses/course-v1:MITx+11.155x+1T2019/xblock/block-v1:MITx+11.155x+1T2019+type@video+block@33d40f6634d148d6919f971fb2969c5e/handler/transcript/download" data-value="txt">Download Text (.txt) file</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="vert vert-2" data-id="block-v1:MITx+11.155x+1T2019+type@html+block@578517da7e6b4fafb9def102f046452a">
<div class="xblock xblock-public_view xblock-public_view-html xmodule_display xmodule_HtmlBlock" data-block-type="html" data-runtime-class="LmsRuntime" data-usage-id="block-v1:MITx+11.155x+1T2019+type@html+block@578517da7e6b4fafb9def102f046452a" data-course-id="course-v1:MITx+11.155x+1T2019" data-has-score="False" data-graded="False" data-runtime-version="1" data-init="XBlockToXModuleShim" data-request-token="0e917884029d11efa51f0afff417eba9">
<script type="json/xblock-args" class="xblock-json-init-args">
{"xmodule-type": "HTMLModule"}
</script>
<h6>Credits<br />- Image,"<a href="https://www.flickr.com/photos/interactivemark/15468146770/in/photostream/" target="[object Object]">Time Bank Wireframe - pre feedback</a>" By Mark Congiusta (<a href="https://creativecommons.org/licenses/by/2.0/" target="[object Object]">CC BY 2.0</a>) via Flickr</h6>
<h6>- Image, "<a href="https://commons.wikimedia.org/wiki/File:Douglas_Engelbart's_prototype_mouse,_angled_-_Computer_History_Museum.jpg" target="[object Object]" style="font-size: 1em;">Douglas Engelbart's prototype mouse, angled</a><span style="font-size: 1em;">" By Michael Hicks from Saint Paul, MN, USA </span>(<a href="https://creativecommons.org/licenses/by/2.0/" target="[object Object]">CC BY 2.0</a>) via Wikimedia Commons</h6>
<p></p>
</div>
</div>
</div>
</div>
<div class="xblock xblock-public_view xblock-public_view-vertical" data-block-type="vertical" data-runtime-class="LmsRuntime" data-usage-id="block-v1:MITx+11.155x+1T2019+type@vertical+block@019e17db18984a77b244f26383fbf188" data-course-id="course-v1:MITx+11.155x+1T2019" data-has-score="False" data-graded="False" data-runtime-version="1" data-init="VerticalStudentView" data-request-token="0e917884029d11efa51f0afff417eba9">
<h2 class="hd hd-2 unit-title">Yasmine Kotturi: Advice on Prototyping</h2>
<div class="vert-mod">
<div class="vert vert-0" data-id="block-v1:MITx+11.155x+1T2019+type@html+block@35c959b97fba4dcb8e9d15b8d650a4b6">
<div class="xblock xblock-public_view xblock-public_view-html xmodule_display xmodule_HtmlBlock" data-block-type="html" data-runtime-class="LmsRuntime" data-usage-id="block-v1:MITx+11.155x+1T2019+type@html+block@35c959b97fba4dcb8e9d15b8d650a4b6" data-course-id="course-v1:MITx+11.155x+1T2019" data-has-score="False" data-graded="False" data-runtime-version="1" data-init="XBlockToXModuleShim" data-request-token="0e917884029d11efa51f0afff417eba9">
<script type="json/xblock-args" class="xblock-json-init-args">
{"xmodule-type": "HTMLModule"}
</script>
<h3>Key Takeaways</h3>
<ul>
<li>Even low-fidelity, unpolished prototypes can communicate ideas to your user and help you get good feedback.</li>
<li>Restrict yourself from adding too much detail during early prototypes so that you think more high-level.</li>
<li>Have fun!</li>
</ul>
</div>
</div>
<div class="vert vert-1" data-id="block-v1:MITx+11.155x+1T2019+type@video+block@3361011bf70b4d9ea20d6c7b784b6edd">
<div class="xblock xblock-public_view xblock-public_view-video xmodule_display xmodule_VideoBlock" data-block-type="video" data-runtime-class="LmsRuntime" data-usage-id="block-v1:MITx+11.155x+1T2019+type@video+block@3361011bf70b4d9ea20d6c7b784b6edd" data-course-id="course-v1:MITx+11.155x+1T2019" data-has-score="False" data-graded="False" data-runtime-version="1" data-init="XBlockToXModuleShim" data-request-token="0e917884029d11efa51f0afff417eba9">
<script type="json/xblock-args" class="xblock-json-init-args">
{"xmodule-type": "Video"}
</script>
<h3 class="hd hd-2">Yasmine Kotturi: Advice for Prototyping</h3>
<div
id="video_3361011bf70b4d9ea20d6c7b784b6edd"
class="video closed"
data-metadata='{"transcriptLanguages": {"en": "English"}, "captionDataDir": null, "autoAdvance": false, "poster": null, "publishCompletionUrl": "/courses/course-v1:MITx+11.155x+1T2019/xblock/block-v1:MITx+11.155x+1T2019+type@video+block@3361011bf70b4d9ea20d6c7b784b6edd/handler/publish_completion", "transcriptLanguage": "en", "showCaptions": "true", "completionEnabled": false, "prioritizeHls": false, "sources": ["https://d2f1egay8yehza.cloudfront.net/MITx11.155x-V001900_DTH.mp4", "https://d2f1egay8yehza.cloudfront.net/MITx11.155x-V001900/MITx11.155x-V001900.m3u8"], "transcriptAvailableTranslationsUrl": "/courses/course-v1:MITx+11.155x+1T2019/xblock/block-v1:MITx+11.155x+1T2019+type@video+block@3361011bf70b4d9ea20d6c7b784b6edd/handler/transcript/available_translations", "ytApiUrl": "https://www.youtube.com/iframe_api", "autohideHtml5": false, "start": 0.0, "generalSpeed": 1.0, "recordedYoutubeIsAvailable": true, "speed": null, "end": 0.0, "ytMetadataEndpoint": "", "savedVideoPosition": 0.0, "ytTestTimeout": 1500, "autoplay": false, "saveStateUrl": "/courses/course-v1:MITx+11.155x+1T2019/xblock/block-v1:MITx+11.155x+1T2019+type@video+block@3361011bf70b4d9ea20d6c7b784b6edd/handler/xmodule_handler/save_user_state", "saveStateEnabled": false, "transcriptTranslationUrl": "/courses/course-v1:MITx+11.155x+1T2019/xblock/block-v1:MITx+11.155x+1T2019+type@video+block@3361011bf70b4d9ea20d6c7b784b6edd/handler/transcript/translation/__lang__", "streams": "1.00:y9bJNk0qp5I", "completionPercentage": 0.95, "duration": 206.54, "lmsRootURL": "https://openlearninglibrary.mit.edu"}'
data-bumper-metadata='null'
data-autoadvance-enabled="False"
data-poster='null'
tabindex="-1"
>
<div class="focus_grabber first"></div>
<div class="tc-wrapper">
<div class="video-wrapper">
<span tabindex="0" class="spinner" aria-hidden="false" aria-label="Loading video player"></span>
<span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="Play video"></span>
<div class="video-player-pre"></div>
<div class="video-player">
<div id="3361011bf70b4d9ea20d6c7b784b6edd"></div>
<h4 class="hd hd-4 video-error is-hidden">No playable video sources found.</h4>
<h4 class="hd hd-4 video-hls-error is-hidden">
Your browser does not support this video format. Try using a different browser.
</h4>
</div>
<div class="video-player-post"></div>
<div class="closed-captions"></div>
<div class="video-controls is-hidden">
<div>
<div class="vcr"><div class="vidtime">0:00 / 0:00</div></div>
<div class="secondary-controls"></div>
</div>
</div>
</div>
</div>
<div class="focus_grabber last"></div>
<h3 class="hd hd-4 downloads-heading sr" id="video-download-transcripts_3361011bf70b4d9ea20d6c7b784b6edd">Downloads and transcripts</h3>
<div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts_3361011bf70b4d9ea20d6c7b784b6edd">
<div class="wrapper-download-transcripts">
<h4 class="hd hd-5">Transcripts</h4>
<ul class="list-download-transcripts">
<li class="transcript-option">
<a class="btn btn-link" href="/courses/course-v1:MITx+11.155x+1T2019/xblock/block-v1:MITx+11.155x+1T2019+type@video+block@3361011bf70b4d9ea20d6c7b784b6edd/handler/transcript/download" data-value="srt">Download SubRip (.srt) file</a>
</li>
<li class="transcript-option">
<a class="btn btn-link" href="/courses/course-v1:MITx+11.155x+1T2019/xblock/block-v1:MITx+11.155x+1T2019+type@video+block@3361011bf70b4d9ea20d6c7b784b6edd/handler/transcript/download" data-value="txt">Download Text (.txt) file</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="xblock xblock-public_view xblock-public_view-vertical" data-block-type="vertical" data-runtime-class="LmsRuntime" data-usage-id="block-v1:MITx+11.155x+1T2019+type@vertical+block@ae4f9de588f54996997fd98c520dce8d" data-course-id="course-v1:MITx+11.155x+1T2019" data-has-score="False" data-graded="False" data-runtime-version="1" data-init="VerticalStudentView" data-request-token="0e917884029d11efa51f0afff417eba9">
<h2 class="hd hd-2 unit-title">Step 5: Prototype Your Solution (Prototype)</h2>
<div class="vert-mod">
<div class="vert vert-0" data-id="block-v1:MITx+11.155x+1T2019+type@html+block@7293399196bf4fd39476c7205975a80d">
<div class="xblock xblock-public_view xblock-public_view-html xmodule_display xmodule_HtmlBlock" data-block-type="html" data-runtime-class="LmsRuntime" data-usage-id="block-v1:MITx+11.155x+1T2019+type@html+block@7293399196bf4fd39476c7205975a80d" data-course-id="course-v1:MITx+11.155x+1T2019" data-has-score="False" data-graded="False" data-runtime-version="1" data-init="XBlockToXModuleShim" data-request-token="0e917884029d11efa51f0afff417eba9">
<script type="json/xblock-args" class="xblock-json-init-args">
{"xmodule-type": "HTMLModule"}
</script>
<h3 style="background-color: #2c2256; font-size: 20px; color: #2c2256; height: 35px; text-indent: 10px; padding-top: 10px; border-radius: 3px;"><strong><span style="color: #ffffff;">Goal</span></strong></h3>
<p>Build a model of your solution to effectively communicate your idea to your user. <strong>Duration: </strong>15 minutes</p>
<h3 style="background-color: #2c2256; font-size: 20px; color: #2c2256; height: 35px; text-indent: 10px; padding-top: 10px; border-radius: 3px;"><strong><span style="color: #ffffff;">Instructions</span></strong></h3>
<p>Your prototype should give your user enough information about your solution idea or a specific element of your solution idea so that they can provide feedback for further iteration. This feedback is vital to ensuring that your solution idea truly addresses the problem you’ve identified. <strong>You will share your prototype with your user in Step 6 (Try). </strong></p>
<p>There are many types of prototypes and you should consider which format best communicates your solution idea to your user. We recommend using a sketch, a storyboard, or a simple physical prototype. Remember, these early prototypes are low-fidelity and should be done simply and quickly. Designers often go through dozens of iteration cycles (going back and forth between prototype and trying with users) as they develop their solutions. </p>
<p><strong>For this assignment, we hope you have the opportunity to go through at least one iteration cycle: build a prototype, try the prototype with your user in Step 6, and then make some improvements based on user feedback.</strong></p>
<p>To build a prototype of your solution idea, consider the following: </p>
<ul>
<li><strong>What part of your solution idea is most important to share and try with your user?</strong> You can prototype one important feature of your solution or the whole thing. <span style="font-size: 1em;">You’ll share your prototypes with your user in the next stage.</span></li>
<li><strong>What is the best way to communicate your idea to your user in order to get feedback?</strong> Consider <span style="color: #333333;">sketches (see <a href="/assets/courseware/v1/0699d0f40b682e1301a5208aa0ec8f2f/asset-v1:MITx+11.155x+1T2019+type@asset+block/sketchexample.pdf" target="[object Object]">example</a>), storyboards (see <a href="/assets/courseware/v1/66c53dd3a59f9f1507099591f944b7fb/asset-v1:MITx+11.155x+1T2019+type@asset+block/storyboardexample.pdf" target="[object Object]">example</a>), wireframes</span>, simple physical prototypes (if you have relevant materials around, as well as the time and inclination). </li>
<li>A prototype is a draft of your idea and it will change over time. <strong>Don’t spend a lot of time on your first prototype (5-10 min max!)</strong> or worry about making perfect. <span style="font-size: 1em;"><strong>Create something that your user can provide feedback on</strong> to help you determine your next step in developing the solution.</span></li>
</ul>
<p><strong style="text-rendering: optimizeLegibility; margin: 0px; padding: 0px; border: 0px; outline: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: 1.4em; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; vertical-align: baseline; color: #313131;">Optional: </strong>Take a picture (or screen capture) of your prototype and share it in the gallery below (you can also share in the forums if you'd like feedback). Use the caption to provide context for other participants, and l<span style="font-size: 1em; color: #313131; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;">ook at your classmates’ creative ideas! In the forums, if there is something specific you'd like to engage with others on, make it the subject of your post, and </span>consider replying to others to foster discussion. </p>
<p><strong>Note</strong>: The technology we're using for the gallery is experimental. If you experience technical issues, please email us at <a href="mailto: dtllmooc@gmail.com" target="_blank">dtllmooc@gmail.com</a>. </p>
<p></p>
</div>
</div>
</div>
</div>