Team:Wellesley Desyne/Methodology
From 2013.igem.org
(18 intermediate revisions not shown) | |||
Line 12: | Line 12: | ||
<!-- Title Area --> | <!-- Title Area --> | ||
<li class="name"> | <li class="name"> | ||
- | <h1><a href=" | + | <h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1> |
</li> | </li> | ||
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> | <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> | ||
Line 65: | Line 65: | ||
<div class="row"> | <div class="row"> | ||
<div class="large-12 columns"> | <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> | </div> | ||
Line 92: | Line 92: | ||
<h4>OVERVIEW</h4> | <h4>OVERVIEW</h4> | ||
<p> | <p> | ||
- | + | 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. | |
</p> | </p> | ||
Line 99: | Line 99: | ||
<h4>Analysis </h4> | <h4>Analysis </h4> | ||
<p> | <p> | ||
- | 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 | + | 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> | </p> | ||
- | <div style = "float: left; margin: 10px | + | <div class="panel" style = "float: left; margin: 10px; padding: 10px"> |
- | <img src = "https://static.igem.org/mediawiki/2013/9/92/Wellesley_methedology_3.jpg" alt = "MIT Lab" width = "200px" | + | <img src = "https://static.igem.org/mediawiki/2013/9/92/Wellesley_methedology_3.jpg" alt = "MIT Lab" width = "200px" > |
- | <figcaption width="200" | + | <figcaption width="200" class="caption">The lab engages in wet lab<br> practices</figcaption> |
</div> | </div> | ||
+ | <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. | ||
- | <p> | + | <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> |
- | + | ||
- | + | ||
- | Before designing our software, we | + | |
<h4>Design </h4> | <h4>Design </h4> | ||
<p> | <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, Bac to the Future, we created a mock-up which served a similar purpose. | + | 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. |
- | + | <br> | |
<div style = "margin-left:auto; | <div style = "margin-left:auto; | ||
margin-right:auto; width:560px;"> | margin-right:auto; width:560px;"> | ||
<iframe width="560" height="315" src="//www.youtube.com/embed/CQeCT17AWlc?rel=0" frameborder="0" allowfullscreen></iframe> | <iframe width="560" height="315" src="//www.youtube.com/embed/CQeCT17AWlc?rel=0" frameborder="0" allowfullscreen></iframe> | ||
</div> | </div> | ||
- | + | <p class="caption"> An example of a paper prototype we created during the early development stage. </p> | |
- | <p> An example of a paper prototype we created during the early development stage. </p> | + | |
- | < | + | <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. |
- | 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> | </p> | ||
<h4>Implementation </h4> | <h4>Implementation </h4> | ||
- | + | <div class="panel" style = "margin: 10px; float:right;"> | |
- | <div style = "margin | + | <img src= "https://static.igem.org/mediawiki/2013/4/4b/Methodology_2_wellesleyv3.jpg"> |
- | <img src= "https://static.igem.org/mediawiki/2013/ | + | <figcaption width="200" class="caption">Wellesley community<br>members trying zSpace </figcaption> |
- | + | </div> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
<p> | <p> | ||
- | After conducting our user studies, we | + | 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> | </p> | ||
<h4> Evaluation</h4> | <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> | ||
<p> | <p> | ||
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. | 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 <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> | + | <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> |
+ | <div class="row"> | ||
+ | <hr> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png"> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
Line 163: | Line 161: | ||
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script> | <script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script> | ||
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script> | <script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script> | ||
- | |||
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script> | <script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script> | ||
- | |||
- | |||
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script> | <script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script> | ||
<script> | <script> |
Latest revision as of 18:08, 27 September 2013
Methodology
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.
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.
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
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
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.