Team:Wellesley Desyne/Methodology

From 2013.igem.org

(Difference between revisions)
 
(95 intermediate revisions not shown)
Line 1: Line 1:
 +
{{Team:Wellesley_Desyne/css/wp_app.css}}
<html>
<html>
<head>
<head>
-
<title>Wellesley HCI iGEM Team: Welcome</title>  
+
<title>Wellesley HCI iGEM Team: Welcome</title>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
+
<meta charset="utf-8">
-
<style type="text/css">
+
<meta name="viewport" content="width=device-width">
 +
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 +
<body>
 +
<nav class="top-bar">
 +
<ul class="title-area">
 +
<!-- Title Area -->
 +
<li class="name">
 +
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1>
 +
</li>
 +
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
 +
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
 +
</ul>
 +
<section class="top-bar-section">
 +
<!-- Left Nav Section -->
 +
<ul class="left">
 +
<li class="divider"></li>
 +
<li class="has-dropdown"><a href="#">TEAM</a>
 +
<ul class="dropdown">
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li>
 +
</ul>
 +
</li>
 +
<li class="divider"></li>
 +
<li class="has-dropdown"><a href="#">PROJECT</a>
 +
<ul class="dropdown">
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li>
 +
</ul>
 +
</li>
 +
<li class="divider"></li>
 +
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a>
 +
<ul class="dropdown">
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li>
 +
</ul>
 +
</li>
 +
<li class="divider"></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li>
 +
</ul>
 +
<!-- Right Nav Section -->
 +
<ul class="right">
 +
<li class="divider hide-for-small"></li>
 +
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a>
 +
</li>
 +
<li class="divider"></li>
 +
</ul>
 +
</section>
 +
</nav>
 +
<header>
 +
<div id="header-container">
 +
<div class="row">
 +
<div class="large-12 columns">
 +
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a>
 +
</div>
 +
</div>
 +
</div>
 +
</header>
-
/*hide default igem banner and reformat style into blank slate*/
+
<!--End NavBar-->
-
#globalWrapper {width: 100%;}
+
-
#top-section {width: 100%; height:30px; border:none;}
+
-
#p-logo {display:none;}
+
-
#search-controls {display:none;}
+
-
#menubar a {color:#000000; background-color:transparent;}
+
-
#menubar a:hover{text-decoration:none; color:#0090FF; background-color:transparent;}
+
-
.left-menu a:hover{background-color:transparent; margin:5px 0px 0px 0px; padding:0; background: transparent;}
+
-
.left-menu li a:hover{background-color:transparent; margin:0; padding:0; background: transparent;}
+
-
.right-menu ul li a {background-color:transparent; background: transparent;}
+
-
.printfooter {display:none; background-color:transparent;}
+
-
#footer-box {border:none; background-color:transparent;}
+
-
#catlinks {display:none; background-color:transparent;}
+
-
.firstHeading {display:none; background-color:transparent;}
+
-
#content {width: 100%; border:none; background-color:transparent;}
+
-
#bodyContent {border:none;}
+
-
/*actual content styles*/
+
<!--End NavBar--> 
-
body {width: 900px; margin:auto;}
+
<div class="row">
 +
<div class="large-12 columns">
 +
<div class="main-container">
 +
<div id="text-container">
-
#bu-wellesley_wiki_content {height:auto; line-height:100%;}
+
<!--Start content-->
-
/*#bu-wellesley_wiki_content a {color:#69d01d;}*/
+
-
#bu-wellesley_wiki_content a:hover {text-decoration:none; color:#3d3f3c;}
+
-
.navbar li {color: #transparent;}
+
<h3>Methodology</h3>
-
.navbar li a {color: #ffffff;}
+
-
.navbar li a:hover {background:#0090FF; color: #ffffff;}
+
-
/*only use for current page content header (i.e. Team, G-nomeSurferPro, etc)*/
+
<div style = "margin-left:auto;
-
H6 {
+
margin-right:auto; width:615px;">
-
      font-family: Helvetica;
+
<img src= "https://static.igem.org/mediawiki/2013/1/11/Wellesley_ucd.PNG" alt = "user-center design">
-
      font-size:32pt;
+
-
      text-transform: uppercase;
+
-
      text-decoration: none;
+
-
      /*text-align: center;*/
+
-
      color: #272829;
+
-
      margin:0 !important;
+
-
      padding-top:5px !important;
+
-
    }
+
-
H3 {
+
<p style = "text-align:center;">The User-centered design process.</p>
-
      font-family: Helvetica;
+
</div>
-
      text-decoration: none;
+
-
      text-align: left;
+
-
          line-height:120%;
+
-
      /*color: #870203;*/
+
-
      font-size: 10pt;
+
-
      font-weight:normal;
+
-
    }
+
-
/*Page content styles (e.g. welcome, project images)*/
+
<h4>OVERVIEW</h4>
-
#comp {
+
<p>
-
    float:left;
+
We applied a user-centered design process (UCD) to create an intuitive and useful software tool. What distinguishes UCD from other approaches is that user input is elicited throughout all stages of the design process. Through ethnographies, we obtain valuable information about users’ behaviors and practices that allow us to create software that is more intuitive and useful. User input allows us to enhance the users’ intuitions instead of forcing them to adapt their behavior to our software. Each iteration of our design involves consultation with the opinions of our users to better address concerns and issues with our software. The user-centered design process we followed this year can be divided into four different steps: analysis, design, implementation, and evaluation. Following, we describe the key activities we employed in each stage.
-
    width:400px;
+
</p>
-
    height:275px;
+
-
}
+
-
#compimg {
+
-
    float:left;
+
-
    width:470px;
+
-
    margin:0 30px 0 0;
+
-
    background-color:#ebebeb;
+
-
}
+
-
/*Project images with rollover*/
+
<h4>DESIGN PROCESS</h4>
-
.project {
+
-
background-color:#e5e3e7;
+
-
width:290px; height:180px;
+
-
overflow:hidden;
+
-
float:left;
+
-
margin:20px 15px 0 0;
+
-
position:relative;
+
-
}
+
-
.projectBar { width:100%; height:60px; position:absolute; color:white; overflow:hidden;}
+
-
.projectName { text-align:right; padding:15px 20px; }
+
-
.projectName img { width:auto; height:16px; display:inline-block; }
+
-
.projectAbout {
+
-
background-image:url('http://cs.wellesley.edu/~hcilab/iGEM2012/images/arrow.png');
+
-
background-repeat:no-repeat;
+
-
background-position:left center;
+
-
background-color:rgba(0,0,0,0.5);
+
-
background-clip:border-box;
+
-
font-size:12px;
+
-
height:auto;
+
-
margin-top:-50px;
+
-
padding:5px 5px 5px 50px; /*50px padding makes room for arrow on left*/
+
-
-webkit-transition-duration:0.5s; -moz-transition-duration:0.5s;
+
-
}
+
-
.project:hover .projectAbout { margin-top:10px; }
+
-
.projectBar > a:link, .projectBar > a:visited, .projectBar > a:hover { color:inherit; }
+
-
/*<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+
<h4>Analysis </h4>
-
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
<p>
-
<html xmlns="http://www.w3.org/1999/xhtml">*/
+
In this phase of our project, we observed groups of users who could potentially use our software. Making sure our software was effective and practical, required us to understand users’ needs and the features they would like to see based on their current methodologies. Our analysis aimed to envision scenarios in which our software would be useful for our potential users and to create a test scenario after a basic version of our product was complete. Observed user testers included: the <a href="https://2013.igem.org/Team:MIT">MIT iGEM team</a>, the <a href="https://2013.igem.org/Team:BostonU">BU iGEM team</a>, introductory biology and neuroscience Wellesley College students, and the MIT-Wellesley Upward Bound Program high school participants.
 +
</p>
-
/* NON-WEBSAFE FONTS */
+
<div class="panel" style = "float: left; margin: 10px; padding: 10px">
-
/*@font-face {
+
<img src = "https://static.igem.org/mediawiki/2013/9/92/Wellesley_methedology_3.jpg" alt = "MIT Lab" width = "200px" >
-
font-family: 'Caviar Dreams';
+
<figcaption width="200" class="caption">The lab engages in wet lab<br> practices</figcaption>
-
src: url('../fonts/CaviarDreams.ttf') format('truetype');
+
</div>
-
}*/
+
-
/* MAIN STYLE DEFINITIONS */
+
<p>We consulted with Natalie Kuldell, founder of <a href="http://www.biobuilder.org/">BioBuilder</a>, to understand the lab practices of synthetic biologists. Our team also participated in a first-hand experience in which we were able to perform an experiment to better familiarize ourselves with wet-lab environment techniques. We especially took note of the gestures we were using throughout the experiment. The experience was also crucial to understand biological safety protocol.  
-
a{
+
-
color:#870203;
+
-
-webkit-transition-duration:0.3s;
+
-
-moz-transition-duration:0.3s;
+
-
-o-transition-duration:0.3s;
+
-
}
+
-
a:hover {
+
<p>Before designing our software, we looked at existing applications for the MS Surface and online applications that visualized programming languages and organized queries in unique ways. These applications included MoClo Planner, Scratch, and Blockly; among others. While working on <a href"https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a> we looked through some photos of other 3D Tree structures and chose one that seemed appealing, usable, and interactive with the zSpace. With <a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a>, we looked at animation and social media to create a more interactive and engaging environment</p>
-
color:#0090FF;
+
-
}
+
-
a:visited{
+
<h4>Design </h4>
-
color:#870203;
+
-
}
+
-
td
+
<p>
-
{
+
The next step in our user-centered design process was the Design phase, where we created low-fidelity prototypes of the software we envisioned developing while collaborating with our users. We brainstormed ideas together, and went through several iterations of mock-ups before we started developing and testing a high-fidelity prototype of our software. During the first few weeks of our summer research, we had a lengthy brainstorming discussion with our collaborators from BU and Agilent Technologies. We presented our ideas for Eugene software, our outreach program, and z-space software. Throughout the brainstorming session, users pointed out the practicality of our designs and where we could improve. After incorporating their feedback into our design, we then created a low-fidelity paper prototype for Eugenie which stepped through each step of our software. For our web application, <a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a>, we created a mock-up which served a similar purpose.
-
font-family: Helvetica;
+
-
font-size: 10pt;
+
-
vertical-align: top;
+
-
text-align: left;
+
-
padding-right: 10px;
+
-
}
+
-
 
+
-
tr
+
-
{
+
-
vertical-align: top;
+
-
}
+
-
 
+
-
H1 {
+
-
    font-family: Helvetica;
+
-
    text-transform: uppercase;
+
-
    color: #3d3f3c;
+
-
    text-align: left;
+
-
    }
+
-
 
+
-
 
+
-
H4 {
+
-
    font-family: Helvetica;
+
-
    text-transform: uppercase;
+
-
    color: #3d3f3c;
+
-
    text-align: left;
+
-
    }
+
-
 
+
-
/* CONTENT HEADING STYLES - overrides some main.css styling */
+
-
 
+
-
H6 {
+
-
font-family:'Caviar Dreams';
+
-
font-size:30px;
+
-
font-weight:500;
+
-
text-align:left;
+
-
text-transform:uppercase;
+
-
color: #3d3f3c;
+
-
border-bottom:1px solid #0090FF;
+
-
padding-bottom:10px;
+
-
margin:15px 0;
+
-
}
+
-
 
+
-
H1, H3 {
+
-
font-family:'Source Sans Pro';
+
-
font-weight:600;
+
-
text-transform:uppercase;
+
-
}
+
-
 
+
-
H1 {
+
-
font-size:20px;
+
-
border:none;
+
-
}
+
-
 
+
-
img.headshot {
+
-
width: 100px;
+
-
height: auto;
+
-
vertical-align: text-top;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
body {
+
-
background:#F1F4F7;
+
-
font-family: Helvetica;
+
-
}
+
-
 
+
-
content {
+
-
background: transparent;
+
-
}
+
-
 
+
-
#tracking_nav
+
-
{
+
-
margin: 0px 0px 0px 950px;
+
-
position: fixed;
+
-
color:#bababa;
+
-
border: 1px solid #3d3f3c;
+
-
background:#3d3f3c;
+
-
font-size: 16pt;
+
-
padding: 5px;
+
-
line-height: 120%;
+
-
}
+
-
 
+
-
#tracking_nav a { color:#ffffff; text-transform: lowercase;font-size: 16pt;}
+
-
#tracking_nav a:hover {background:#bababa;}
+
-
 
+
-
#parts_table
+
-
{
+
-
border: 1px solid #870203;
+
-
border-collapse: collapse;
+
-
width: 70%;
+
-
margin: auto;
+
-
}
+
-
 
+
-
#parts_table td
+
-
{
+
-
text-align: center;
+
-
margin: 5px;
+
-
border: 1px solid #870203;
+
-
+
-
}
+
-
 
+
-
#parts_table th
+
-
{
+
-
background-color: #bababa;
+
-
border: 1px solid #870203;
+
-
color: #ffffff;
+
-
}
+
-
 
+
-
.table_part
+
-
{
+
-
vertical-align: middle;
+
-
}
+
-
 
+
-
/* HEADER STYLES: banner, navbar, etc. */
+
-
#banner { width:300px; display:block; float:left; }
+
-
#banner img { width:100%; }
+
-
 
+
-
ul#nav {
+
-
width:675px;
+
-
margin:0 0 0 325px;
+
-
position:relative;
+
-
}
+
-
 
+
-
#nav li {
+
-
color: #bbb;
+
-
background-color:none;
+
-
margin: 0 50px 0 0;
+
-
float: left;
+
-
position: relative;
+
-
list-style: none;
+
-
text-transform:uppercase;
+
-
}
+
-
#nav li:last-child { margin:0; }
+
-
 
+
-
/* main level link */
+
-
#nav a {
+
-
font-family:'Source Sans Pro', sans-serif;
+
-
font-size:10pt;
+
-
font-weight:500;
+
-
line-height:110%;
+
-
color: inherit;
+
-
text-decoration: none;
+
-
display: block;
+
-
padding: 0 0 0 5px;
+
-
margin: 0;
+
-
}
+
-
 
+
-
ul#nav > li > a {
+
-
line-height:12px;
+
-
border-left:solid 2px #0090FF;
+
-
padding:0 0 0 3px;
+
-
}
+
-
 
+
-
#nav a:hover {
+
-
/*background-color: #0090FF;
+
-
color: #ffffff;*/
+
-
}
+
-
 
+
-
/* main level link hover */
+
-
#nav .current a, #nav li:hover > a {
+
-
color: #000;
+
-
border-color:#0090FF;
+
-
}
+
-
 
+
-
/* sub levels link hover */
+
-
#nav ul li:hover a, #nav li:hover li a {
+
-
border: none;
+
-
/*background-color: #FA9D1C;*/
+
-
color:#000;
+
-
}
+
-
 
+
-
#nav ul a:hover {
+
-
color: #0090FF !important;
+
-
/*background: #fff url(img/gradient.png) repeat-x 0 -100px !important;
+
-
text-shadow: 0 1px 1px rgba(0,0,0, .1);*/
+
-
}
+
-
 
+
-
 
+
-
/* dropdown */
+
-
#nav li:hover > ul {
+
-
/*display: block;*/
+
-
opacity:1;
+
-
margin:0;
+
-
background-color: none;
+
-
z-index:0;
+
-
}
+
-
 
+
-
/* level 2 list */
+
-
#nav ul {
+
-
/*display: none;*/
+
-
opacity:0;
+
-
margin: 20px 0 0 0;
+
-
padding: 7px 0 0 0;
+
-
width: 205px;
+
-
position: absolute;
+
-
left: 0;
+
-
z-index:-1;
+
-
-webkit-transition-duration:0.5s;
+
-
-moz-transition-duration:0.5s;
+
-
-o-transition-duration:0.5s;
+
-
}
+
-
#nav ul li {
+
-
float: none;
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
 
+
-
#nav ul a {
+
-
font-weight: normal;
+
-
/*text-shadow: 0 1px 0 #fff;*/
+
-
}
+
-
 
+
-
/* clearfix */
+
-
#nav:after {
+
-
content: ".";
+
-
display: block;
+
-
clear: both;
+
-
visibility: hidden;
+
-
line-height: 0;
+
-
height: 0;
+
-
}
+
-
#nav {
+
-
display: inline-block;
+
-
}
+
-
html[xmlns] #nav {
+
-
display: block;
+
-
}
+
-
+
-
* html #nav {
+
-
height: 1%;
+
-
}
+
-
 
+
-
/* pinterest like photo grid for social page*/
+
-
 
+
-
/*
+
-
body {
+
-
background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
+
-
}
+
-
*/
+
-
 
+
-
#wrapper {
+
-
width: 90%;
+
-
max-width: 1100px;
+
-
min-width: 800px;
+
-
margin: 50px auto;
+
-
}
+
-
 
+
-
#columns {
+
-
-webkit-column-count: 3;
+
-
-webkit-column-gap: 10px;
+
-
-webkit-column-fill: auto;
+
-
-moz-column-count: 3;
+
-
-moz-column-gap: 10px;
+
-
-moz-column-fill: auto;
+
-
column-count: 3;
+
-
column-gap: 15px;
+
-
column-fill: auto;
+
-
}
+
-
 
+
-
.pin {
+
-
display: inline-block;
+
-
background: #FEFEFE;
+
-
border: 2px solid #FAFAFA;
+
-
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
+
-
margin: 0 2px 15px;
+
-
-webkit-column-break-inside: avoid;
+
-
-moz-column-break-inside: avoid;
+
-
column-break-inside: avoid;
+
-
padding: 15px;
+
-
padding-bottom: 5px;
+
-
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
+
-
opacity: 1;
+
-
+
-
-webkit-transition: all .2s ease;
+
-
-moz-transition: all .2s ease;
+
-
-o-transition: all .2s ease;
+
-
transition: all .2s ease;
+
-
}
+
-
 
+
-
.pin img {
+
-
width: 100%;
+
-
border-bottom: 1px solid #ccc;
+
-
padding-bottom: 15px;
+
-
margin-bottom: 5px;
+
-
}
+
-
 
+
-
.pin p {
+
-
font: 12px/18px Arial, sans-serif;
+
-
color: #333;
+
-
margin: 0;
+
-
}
+
-
 
+
-
@media (min-width: 960px) {
+
-
#columns {
+
-
-webkit-column-count: 4;
+
-
-moz-column-count: 4;
+
-
column-count: 4;
+
-
}
+
-
}
+
-
 
+
-
@media (min-width: 1100px) {
+
-
#columns {
+
-
-webkit-column-count: 5;
+
-
-moz-column-count: 5;
+
-
column-count: 5;
+
-
}
+
-
}
+
-
 
+
-
#columns:hover .pin:not(:hover) {
+
-
opacity: 0.4;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
</style>
+
-
 
+
-
 
+
-
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
+
-
 
+
-
<style type="text/css">@import "http://cs.wellesley.edu/~hcilab/iGEM_wiki/css/videobox.css";</style>
+
-
 
+
-
</head>
+
-
<body class="basiclayout">
+
-
<div id="bu-wellesley_wiki_content">
+
-
 
+
-
 
+
-
<a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2012/5/50/2013iGEM_logo.png" width="75px" style="display:block; float:left;"></a>
+
-
 
+
-
<a href="https://2013.igem.org/Team:Wellesley_Desyne"><img src="https://static.igem.org/mediawiki/igem.org/4/49/Titleimage.png" width="200px" style="display:block; float:left;"></a>
+
-
 
+
-
 
+
-
<!--Start NavBar-->
+
-
<ul id="nav">
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team</a>
+
-
        <ul>
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li>
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li>
+
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li>
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips & Tricks</a></li>
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li>
+
-
</ul>
+
-
    </li>
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Project</a>
+
-
        <ul>
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Project Overview</a></li>
+
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li>
+
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree">zMol_zTree</a></li>
+
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">BAC to the Future</a></li>
+
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li>
+
-
        </ul>
+
-
    </li>
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">Human Practices</a>
+
-
<ul>
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li>
+
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li>
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li>
+
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li>
+
-
</ul>
+
-
    </li>
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">Medal Fulfillment</a></li>
+
-
</ul>
+
-
 
+
-
<!--End NavBar--> 
+
-
 
+
-
 
+
-
<br><br>
+
-
 
+
-
<!--Actual content-->
+
-
<h6>Methodology </h6>
+
-
<br>
+
-
 
+
-
<h1>OVERVIEW</h1>
+
-
 
+
-
As a human computer interaction lab, we applied a user-centered design (UCD) approach throughout all our projects, whether they were web-based, MS surface, or z-space applications. What distinguishes UCD from other approaches is user input throughout all stages of the design process. Through user studies, we obtain valuable information about users’ behaviors and practices that allow us to create software that is more intuitive and useful. User input allow us to enhance the users’ intuitions instead of forcing them to adapt their behavior to our software. Each iteration of our design involves consultation with the opinions of our users - in this case, synthetic biologists - to better address concerns and issues with our software.
+
-
<br>
+
<br>
<br>
 +
<div style = "margin-left:auto;
 +
margin-right:auto; width:560px;">
 +
<iframe width="560" height="315" src="//www.youtube.com/embed/CQeCT17AWlc?rel=0" frameborder="0" allowfullscreen></iframe>
 +
</div>
 +
<p class="caption"> An example of a paper prototype we created during the early development stage. </p>
-
<h1>DESIGN PROCESS</h1>
+
<p>During the design phase, we tested the usability of our software. Our first user studies for Eugenie occurred with introductory science students from Wellesley College.
 +
</p>
-
The user-centered design process we followed this year can be divided into four different steps: analysis, design, implementation, and evaluation. Following, we describe the key activities we employed in each stage.
+
<h4>Implementation </h4>
-
<br>
+
-
<br>
+
-
<h1>Analysis </h1>
+
<div class="panel" style = "margin: 10px; float:right;">
 +
<img src= "https://static.igem.org/mediawiki/2013/4/4b/Methodology_2_wellesleyv3.jpg">
 +
<figcaption width="200" class="caption">Wellesley community<br>members trying zSpace </figcaption>
 +
</div>
-
In this phase of our project, we observed groups of users who could potentially use our software. Making sure our software was effective and practical involved us getting to know users’ needs and what features they would like to see based on their current methodologies. Our analysis aimed to envision scenarios in which our software would be useful for our potential users and to create a test scenario after a basic version of our product was complete.  
+
<p>
-
<br><br>
+
After conducting our user studies, we started the implementation stage of our design process, which includes additional testing with synthetic biologists and refining our software past the basic functionality to improve design and efficiency. During this phase, we conducted additional user studies with the BU and MIT iGEM teams. We iterated on the visual design of Eugenie as well as adding small improvements which increased the usability of our software. With Bac to the Future, we conducted initial user studies with the MIT/Wellesley Upward Bound Program high school students to gauge the effectiveness of our application in communicating core synthetic biology concepts, as well as the level of engagement and fun our users experienced.
 +
</p>
-
<i>Observed users:</i>
 
-
<ul>
 
-
<li> MIT iGEM team </li>
 
-
<li> BU iGEM team</li>
 
-
<li> Introductory science students from Wellesley College who were mostly biologists and neuroscientists </li>
 
-
<li> MIT-Wellesley Upward Bound Program high school participants.</li>
 
-
</ul>
 
-
<br>
 
-
<p>We consulted with Natalie Kuldell, founder of BioBuilder, to understand the lab practices of synthetic biologists. Our team also participated in a first-hand experience in which we got to perform an experiment to better familiarize ourselves with wet-lab environment and techniques. We especially took note of the gestures we were using throughout the experiment. The experience was also valuable to understand biological safety protocol.
 
-
<br>
 
-
Before designing our applications, we looking at existing applications for the MS Surface and online applications that visualized programming languages and organized queries in unique ways. These applications included MoClo Planner, Scratch, and Blockly, among others. While working on zMol we looked at <a href="http://www.meta-synthesis.com/webbook/35_pt/pt_database.php?Button=3D+Formulations">various representations</a> of the periodic table in 3D and chose one that seemed most interesting and practical with the zSpace. With zTree we looked through some photos of other 3D Tree structures and chose one that seemed appealing, usable, and interactive with the zSpace.
 
-
<br>
 
-
<br>
 
-
<h1>Design </h1>
+
<h4> Evaluation</h4>
 +
<div class="panel" style = "margin-right: 10px; float:left; width: 250px;">
 +
<img src= "https://static.igem.org/mediawiki/2013/9/90/Wellesley_presents.jpg" width = "200px">
 +
<figcaption width="200" class="caption">Presenting a high-fidelity <br> prototype to Natalie Kuldell (MIT) and a high school teacher. </figcaption>
 +
</div>
-
The next step in our user-centered design process was the Design phase, where we created low-fidelity prototypes of the software we envisioned developing while collaborating with our users. We brainstormed ideas together, and went through several iterations of prototypes before we started developing and testing a high-fidelity prototype of our software. During the first few weeks of our summer research, we had a lengthy brainstorming discussion with collaborators from BU and Agilent Technologies. We presented our ideas for Eugene software, our outreach program and the z-space software. Afterwards, users pointed out the practicality of our designs and where we could improve. After incorporating their feedback into our design, we then created a low-fidelity paper prototype for Eugenie which stepped through each step of our software.  For our web application, Bac to the Future, we created a mockup which served a similar purpose.
+
<p>
-
<br>
+
Finally, in the evaluation stage we deployed our refined software tools for use in the wet-lab and evaluated overall user satisfaction regarding the software tools created.
-
During the design phase, we tested the usability of our software. Our first user studies for Eugenie occurred with introductory science students from Wellesley College. The Bac to the Future team was also able to iterate on their design with middle school students from MIT-Wellesley’s Upward Bound program.
+
-
<br>
+
-
<br>
+
-
<h1>Implementation </h1>
+
<p>Usability and usefulness: we conducted testing with the BU and MIT iGEM teams as well as with Wellesley College biology students and the MIT/Wellesley Upward Bound Program. We used various quantitative measures (e.g. time on task, subjective satisfaction) and qualitative indicators (e.g. user collaboration and problem solving styles). See results from the evaluation of <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a>, <a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a>, and <a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a>. </p>
-
After conducting our user studies, we then started the implementation stage of our design process, which includes additional user studies with synthetic biologists and refining our software past the basic functionality to improve design and efficiency. During this phase, we conducted additional user studies with BU and MIT’s iGEM teams. We iterated on the visual design of Eugenie as well as adding small improvements which increased the usability of our software.
 
-
<br>
 
-
<br>
 
-
<h1> Evaluation</h1>
 
-
 
-
Finally, in the evaluation stage we deployed our refined software tools for use in the wet-lab and evaluated overall user satisfaction regarding the software tools created.
 
-
Usability and usefulness: we conducted testing with the BU and MIT teams as well as with Wellesley biology students. We used various quantitative measures (e.g. time on task, subjective satisfaction) and qualitative indicators (e.g. user collaboration and problem solving styles). See results from the evaluation of Eugenie, Bac to the Future, and zTree.
 
 +
<div class="row">
 +
<hr>
 +
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png">
 +
</div>
</div>
</div>
-
<!--END Actual content-->
+
</div>
-
<br><br><br><br><br>
+
<!--End content-->
-
</div><!--end wellesley_wiki_content div-->
+
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script>
-
</div>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script>
-
</body>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script>
 +
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script>
 +
<script>
 +
$(document).foundation();
 +
</script>
</html>
</html>

Latest revision as of 18:08, 27 September 2013

Wellesley HCI iGEM Team: Welcome

Methodology

user-center design

The User-centered design process.

OVERVIEW

We applied a user-centered design process (UCD) to create an intuitive and useful software tool. What distinguishes UCD from other approaches is that user input is elicited throughout all stages of the design process. Through ethnographies, we obtain valuable information about users’ behaviors and practices that allow us to create software that is more intuitive and useful. User input allows us to enhance the users’ intuitions instead of forcing them to adapt their behavior to our software. Each iteration of our design involves consultation with the opinions of our users to better address concerns and issues with our software. The user-centered design process we followed this year can be divided into four different steps: analysis, design, implementation, and evaluation. Following, we describe the key activities we employed in each stage.

DESIGN PROCESS

Analysis

In this phase of our project, we observed groups of users who could potentially use our software. Making sure our software was effective and practical, required us to understand users’ needs and the features they would like to see based on their current methodologies. Our analysis aimed to envision scenarios in which our software would be useful for our potential users and to create a test scenario after a basic version of our product was complete. Observed user testers included: the MIT iGEM team, the BU iGEM team, introductory biology and neuroscience Wellesley College students, and the MIT-Wellesley Upward Bound Program high school participants.

MIT Lab
The lab engages in wet lab
practices

We consulted with Natalie Kuldell, founder of BioBuilder, to understand the lab practices of synthetic biologists. Our team also participated in a first-hand experience in which we were able to perform an experiment to better familiarize ourselves with wet-lab environment techniques. We especially took note of the gestures we were using throughout the experiment. The experience was also crucial to understand biological safety protocol.

Before designing our software, we looked at existing applications for the MS Surface and online applications that visualized programming languages and organized queries in unique ways. These applications included MoClo Planner, Scratch, and Blockly; among others. While working on zTree we looked through some photos of other 3D Tree structures and chose one that seemed appealing, usable, and interactive with the zSpace. With Bac to the Future, we looked at animation and social media to create a more interactive and engaging environment

Design

The next step in our user-centered design process was the Design phase, where we created low-fidelity prototypes of the software we envisioned developing while collaborating with our users. We brainstormed ideas together, and went through several iterations of mock-ups before we started developing and testing a high-fidelity prototype of our software. During the first few weeks of our summer research, we had a lengthy brainstorming discussion with our collaborators from BU and Agilent Technologies. We presented our ideas for Eugene software, our outreach program, and z-space software. Throughout the brainstorming session, users pointed out the practicality of our designs and where we could improve. After incorporating their feedback into our design, we then created a low-fidelity paper prototype for Eugenie which stepped through each step of our software. For our web application, Bac to the Future, we created a mock-up which served a similar purpose.

An example of a paper prototype we created during the early development stage.

During the design phase, we tested the usability of our software. Our first user studies for Eugenie occurred with introductory science students from Wellesley College.

Implementation

Wellesley community
members trying zSpace

After conducting our user studies, we started the implementation stage of our design process, which includes additional testing with synthetic biologists and refining our software past the basic functionality to improve design and efficiency. During this phase, we conducted additional user studies with the BU and MIT iGEM teams. We iterated on the visual design of Eugenie as well as adding small improvements which increased the usability of our software. With Bac to the Future, we conducted initial user studies with the MIT/Wellesley Upward Bound Program high school students to gauge the effectiveness of our application in communicating core synthetic biology concepts, as well as the level of engagement and fun our users experienced.

Evaluation

Presenting a high-fidelity
prototype to Natalie Kuldell (MIT) and a high school teacher.

Finally, in the evaluation stage we deployed our refined software tools for use in the wet-lab and evaluated overall user satisfaction regarding the software tools created.

Usability and usefulness: we conducted testing with the BU and MIT iGEM teams as well as with Wellesley College biology students and the MIT/Wellesley Upward Bound Program. We used various quantitative measures (e.g. time on task, subjective satisfaction) and qualitative indicators (e.g. user collaboration and problem solving styles). See results from the evaluation of Eugenie, Bac to the Future, and zTree.

Retrieved from "http://2013.igem.org/Team:Wellesley_Desyne/Methodology"