diff --git a/app/controllers/collection_controller.rb b/app/controllers/collection_controller.rb
index 6dc8ac6..8d01d34 100644
--- a/app/controllers/collection_controller.rb
+++ b/app/controllers/collection_controller.rb
@@ -7,10 +7,17 @@ def casestudies
   	# ]
 
   	@casestudies = CaseStudy.all
+    # test = @casestudies
+    # render :json => test
   end
   def form
   	id = params["n"] == nil ? 1 : params["n"].to_i
     # render :text => id
   	@cs = CaseStudy.where("id=?", id).first;
+    # render :json => @cs
+  end
+
+  def send_casestudy
+    render :json => params
   end
 end
diff --git a/app/helpers/collection_helper.rb b/app/helpers/collection_helper.rb
new file mode 100644
index 0000000..41053ac
--- /dev/null
+++ b/app/helpers/collection_helper.rb
@@ -0,0 +1,2 @@
+module CollectionHelper
+end
diff --git a/app/views/collection/casestudies.html.erb b/app/views/collection/casestudies.html.erb
index 0cd82f2..4048411 100644
--- a/app/views/collection/casestudies.html.erb
+++ b/app/views/collection/casestudies.html.erb
@@ -1,7 +1,25 @@
 <%= stylesheet_link_tag    "collection", :media => "all" %>
 <style>
 h3 {margin: 0;}
-h4 {margin: 0.33em 0;}
+h4 {margin: 0.33em 0; font-size: 13pt;}
+p {font-size: 12pt;}
+hr {border-top: 3px solid #eee;
+	width: 100%;
+}
+.thumbnail{
+	width: 100px;
+	height: 100px;
+}
+
+.mainPic{
+	/*width: 100%;*/
+	max-height: 200px;
+	/*height: 250px;*/
+}
+
+#attributes tr:nth-child(odd)		{ background-color:#eee; }
+#attributes tr:nth-child(even)		{ background-color:#fff; }
+
 </style>
 
 
@@ -37,12 +55,32 @@ h4 {margin: 0.33em 0;}
 	</div>	
 </div>
 
-<hr width="3000" height="100" align="left">
+<hr>
 <br>
 
 <% @casestudies.each do |cs| %>
 <div class="grid_12 omega">
-		<img src="/FedEx2.png" alt="FedEx2" width="250" height="250">
+	<div class="grid_5 omega">
+		<img src="/AMA2.png" alt="AMA2" class='mainPic'>
+	</div>
+
+	<div class="grid_2 omega">	
+	</div>
+
+	<div class="grid_5 omega">
+		<table>
+	    	<tr>
+  			<td><img src="/" alt="AMA2" class='thumbnail'></td>
+  			<td><img src="/" alt="AMA2" class='thumbnail'></td>
+  			<td><img src="/" alt="AMA2" class='thumbnail'></td>
+			</tr>
+			<tr>
+  			<td><img src="/" alt="AMA2" class='thumbnail'></td>
+  			<td><img src="/" alt="AMA2" class='thumbnail'></td>
+  			<td><img src="/" alt="AMA2" class='thumbnail'></td>
+			</tr>
+		</table>
+	</div>
 </div>	
 
 <div class="grid_12 omega">
@@ -54,64 +92,83 @@ h4 {margin: 0.33em 0;}
 <div class="grid_12">	
 	<div class="grid_5 omega">
 		<p><%=cs.description %></p>	
+
+		<br>
+		<br>
+
+		<h3>Methods</h3>
+		<br>
+  		<p>Brainstormimg</p>
+  		<p>Focus Group</p>
+		<p>Storyboarding</p>
+		<p>Wireframe</p>
+		
+		<br>
+		<br>
+
+		<h3>Resources</h3>
+		<br>
+  		<p>AMA_CaseStudy1.pdf</p>
+  		<p>AMA_CaseStudy2.pdf</p>
+		<p>AMA_CaseStudy3.pdf</p>   
 	</div>
 
 	<div class="grid_2 omega">
 	</div>
 
 	<div class="grid_5 omega">
-		<table style="width:300px">
+		<table id="attributes">
 		<tr>
   		<td>Develepment Cycle</td>	
-  		<td><%= @cs.developmentCycle %></td>
+  		<td><%= cs.developmentCycle.humanize %></td>
 		</tr>
 
 		<tr>
-  		<td bgcolor="#E0E0EB"> Design Phase</td>
-  		<td><%=@cs.designPhase%></td>		
+  		<td> Design Phase</td>
+  		<td><%=cs.designPhase.humanize%></td>		
 		</tr>
 		<td>Project Domain</td>
-  		<td><%=@cs.rojectDomain%></td>		
+  		<td><%=cs.projectDomain.humanize%></td>		
 		</tr>
 		<tr>
- 		<td bgcolor="#E0E0EB">Remote Project</td>		
-  		<td><%=@cs.remoteProject%></td>
+ 		<td>Remote Project</td>		
+  		<td><%=cs.remoteProject.humanize%></td>
 		</tr>
 		<tr>
  		<td>Customer is User</td>		
-  		<td><%=@cs.customerIsUser%></td>
+  		<td><%=cs.customerIsUser.humanize%></td>
 		</tr>
 		<tr>
- 		<td bgcolor="#E0E0EB">Customer Type</td>	
-  		<td><%=@customerType%></td>
+ 		<td>Customer Type</td>	
+  		<td><%=cs.customerType.humanize%></td>
 		</tr>
 		<tr>
  		<td>Age Group of User</td>	
-  		<td><%=userAge%></td>
+  		<td><%=cs.userAge.humanize%></td>
 		</tr>
 		<tr>
- 		<td bgcolor="#E0E0EB">Privacy Level</td>
-  		<td><%=privacyLevel%></td>		
+ 		<td>Privacy Level</td>
+  		<td><%=cs.privacyLevel.humanize%></td>		
 		</tr>
 		<tr>
  		<td>Social Setting</td>
-  		<td><%=socialSetting%></td>		
+  		<td><%=cs.socialSetting.humanize%></td>		
 		</tr>
 		<tr>
- 		<td bgcolor="#E0E0EB">Company Name</td>	
-  		<td><%=companyName%></td>
+ 		<td>Company Name</td>	
+  		<td><%=cs.companyName.humanize%></td>
 		</tr>
 		<tr>
  		<td>Author Name</td>
-  		<td><%=authorName%></td>		
+  		<td><%=cs.authorName%></td>		
 		</tr>
 		<tr>
- 		<td bgcolor="#E0E0EB">Author Email</td>
-  		<td><%=authorEmail%></td>		
+ 		<td>Author Email</td>
+  		<td><%=cs.authorEmail.humanize%></td>		
 		</tr>
 		<tr>
  		<td>Other Contact Info</td>
-  		<td><%=authorOther%></td>		
+  		<td><%=cs.authorOther.humanize%></td>		
 		</tr>
 
 
@@ -124,7 +181,7 @@ h4 {margin: 0.33em 0;}
 </div>		
 
 
-
+<br>
 <br>
 <hr width="3000" size="50" align="left">
 
diff --git a/app/views/collection/form.html.erb b/app/views/collection/form.html.erb
index 6985d4d..4be89e7 100644
--- a/app/views/collection/form.html.erb
+++ b/app/views/collection/form.html.erb
@@ -1,8 +1,57 @@
 <%= stylesheet_link_tag    "collection", :media => "all" %>
 
+<script> 
+// find the element $("form input");
+// FOR ALL THE INPUTS, GET THE VALUES $(input1).val()
+// same format .json { title: b}
+// MAIN
+$(function(){
+
+	var data = {
+	        "title": "A Case Study of Non-User-Centered Design for a Police Emergency-Response System Aaron",
+	        "mainImage":"AMA1.png",
+	        "developmentCycle":"Product Refinement",
+	        "designPhase":"Problem Assessment"
+	    }
+	$('#submit').click(function(){
+
+		// TODO
+		var allInputs = $('input');
+
+		for(var i = 0; i < allInputs.length; i++) { 
+			// console.log($(allInputs[i]).attr('data-name'),$(allInputs[i]).val() ); 
+
+		// 	//title
+		// 	// val
+			var el = allInputs[i]
+			var name = $(el).attr('data-name'); 
+			var val = $(el).val();
+
+			if(typeof name !== undefined)
+				data[name] = val;
+ 		}
+
+
+
+		///
+		$.ajax({
+		  type: "POST",
+		  url: "/collection/send_casestudy",
+		  data: data,
+		  success: function(data){
+		  		console.log(data);
+		  },
+		  dataType: "json"
+		});
 
-<h1> <%= @cs.title %>
 
+	});
+
+
+})
+</script>
+<h1> <%= @cs.title %>
+<button id='submit'> Submit </button>
 <div id="form2" class="slide">
    <div class="container">
       <div class="row">
@@ -17,25 +66,18 @@
          <div class="row">
                <p class="label full-label">Title</p>
                <p class="label"></p>
-               <input value="<%= @cs.title %>">
+               <input data-name="title" value="<%= @cs.title %>">
             <br class="clearfix">
          </div>
       </div>
 
-      <div class="multiple row">
-         <div class="row">
-               <p class="label full-label">Subtitle</p>
-               <p class="label"></p>
-               <input value="<%= @cs.subTitle %>">
-            <br class="clearfix">
-         </div>
-      </div>
+
 
         <div class="multiple row">
          <div class="row">
                <p class="label full-label">Company Name</p>
                <p class="label"></p>
-               <input value="<%= @cs.companyName %>">
+               <input data-name="companyName" value="<%= @cs.companyName %>">
             <br class="clearfix">
          </div>
       </div>
@@ -189,22 +231,6 @@
   		</div>
 
 
-      <div class="multiple row">
-         <div class="row">
-               <p class="label">Sub Methods</p>
-               <input value="<%= @cs.subMethods %>">
-            <br class="clearfix">
-         </div>
-
-
-      <div class="multiple row">
-         <div class="row">
-               <p class="label">More Details</p>
-               <input value="<%= @cs.detailMethods %>">
-            <br class="clearfix">
-         </div>
-
-
       <div class="multiple row">
          <div class="row">
                <p class="label full-label">Contact Info</p>
@@ -296,3 +322,5 @@
       </div>
    </div>
 </div>
+
+
diff --git a/config/routes.rb b/config/routes.rb
index b376d35..52a87bf 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -9,6 +9,9 @@
   get "collection/form"
 
 
+  post "collection/send_casestudy"
+
+
   get :about, to: "main_pages#about"
 
   get :contact, to: "main_pages#contact"
diff --git a/db/migrate/20140529195539_create_case_studies.rb b/db/migrate/20140529195539_create_case_studies.rb
index 58d80dc..3104f48 100644
--- a/db/migrate/20140529195539_create_case_studies.rb
+++ b/db/migrate/20140529195539_create_case_studies.rb
@@ -1,10 +1,10 @@
 class CreateCaseStudies < ActiveRecord::Migration
 
-@@cs_attributes = ["mainImage", "title", "subTitle", "companyName", "developmentCycle", "designPhase", "projectDomain", "customerIsUser", "remoteProject", "customerType", "userAge", "privacyLevel", "socialSetting", "description", "methods", "subMethods", "detailMethods", "authorName", "authorEmail", "authorOther", "permissionToUse", "imageResource", "PDFResource", "url", "timePeriod"] 	
+@@cs_attributes = ["mainImage", "title", "companyName", "developmentCycle", "designPhase", "projectDomain", "customerIsUser", "remoteProject", "customerType", "userAge", "privacyLevel", "socialSetting", "description", "methods", "authorName", "authorEmail", "authorOther", "permissionToUse", "imageResource", "PDFResource", "url", "timePeriod"] 	
   def change
     create_table :case_studies do |t|
       @@cs_attributes.each do |x|
-      	t.string x.to_sym
+      	t.string x.to_sym,  :default => ""
       end
       t.timestamps
     end
diff --git a/db/schema.rb b/db/schema.rb
index de0a2e6..9856b95 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -47,31 +47,28 @@
   add_index "admin_users", ["reset_password_token"], name: "index_admin_users_on_reset_password_token", unique: true
 
   create_table "case_studies", force: true do |t|
-    t.string   "mainImage"
-    t.string   "title"
-    t.string   "subTitle"
-    t.string   "companyName"
-    t.string   "developmentCycle"
-    t.string   "designPhase"
-    t.string   "projectDomain"
-    t.string   "customerIsUser"
-    t.string   "remoteProject"
-    t.string   "customerType"
-    t.string   "userAge"
-    t.string   "privacyLevel"
-    t.string   "socialSetting"
-    t.string   "description"
-    t.string   "methods"
-    t.string   "subMethods"
-    t.string   "detailMethods"
-    t.string   "authorName"
-    t.string   "authorEmail"
-    t.string   "authorOther"
-    t.string   "permissionToUse"
-    t.string   "imageResource"
-    t.string   "PDFResource"
-    t.string   "url"
-    t.string   "timePeriod"
+    t.string   "mainImage",        default: ""
+    t.string   "title",            default: ""
+    t.string   "companyName",      default: ""
+    t.string   "developmentCycle", default: ""
+    t.string   "designPhase",      default: ""
+    t.string   "projectDomain",    default: ""
+    t.string   "customerIsUser",   default: ""
+    t.string   "remoteProject",    default: ""
+    t.string   "customerType",     default: ""
+    t.string   "userAge",          default: ""
+    t.string   "privacyLevel",     default: ""
+    t.string   "socialSetting",    default: ""
+    t.string   "description",      default: ""
+    t.string   "methods",          default: ""
+    t.string   "authorName",       default: ""
+    t.string   "authorEmail",      default: ""
+    t.string   "authorOther",      default: ""
+    t.string   "permissionToUse",  default: ""
+    t.string   "imageResource",    default: ""
+    t.string   "PDFResource",      default: ""
+    t.string   "url",              default: ""
+    t.string   "timePeriod",       default: ""
     t.datetime "created_at"
     t.datetime "updated_at"
   end
diff --git a/public/CaseStudyImages/AMA2.png b/public/CaseStudyImages/AMA2.png
new file mode 100644
index 0000000..fef554a
Binary files /dev/null and b/public/CaseStudyImages/AMA2.png differ
diff --git a/public/FedEx2.png b/public/CaseStudyImages/FedEx2.png
similarity index 100%
rename from public/FedEx2.png
rename to public/CaseStudyImages/FedEx2.png
diff --git a/public/HIVTreatment.jpg b/public/CaseStudyImages/HIVTreatment.jpg
similarity index 100%
rename from public/HIVTreatment.jpg
rename to public/CaseStudyImages/HIVTreatment.jpg
diff --git a/public/Crowdsourced Illustrations/componentialAnalysis/componentialAnalysis_1.png b/public/Crowdsourced Illustrations/componentialAnalysis/componentialAnalysis_1.png
new file mode 100644
index 0000000..fd4df24
Binary files /dev/null and b/public/Crowdsourced Illustrations/componentialAnalysis/componentialAnalysis_1.png differ
diff --git a/public/Crowdsourced Illustrations/componentialAnalysis/componentialAnalysis_2.png b/public/Crowdsourced Illustrations/componentialAnalysis/componentialAnalysis_2.png
new file mode 100644
index 0000000..ae7dc41
Binary files /dev/null and b/public/Crowdsourced Illustrations/componentialAnalysis/componentialAnalysis_2.png differ
diff --git a/public/Crowdsourced Illustrations/componentialAnalysis/componentialAnalysis_3.png b/public/Crowdsourced Illustrations/componentialAnalysis/componentialAnalysis_3.png
new file mode 100644
index 0000000..4553ebc
Binary files /dev/null and b/public/Crowdsourced Illustrations/componentialAnalysis/componentialAnalysis_3.png differ
diff --git a/public/Crowdsourced Illustrations/customerJourneyMap/customerJourneyMap_1.png b/public/Crowdsourced Illustrations/customerJourneyMap/customerJourneyMap_1.png
new file mode 100644
index 0000000..f1c2ac2
Binary files /dev/null and b/public/Crowdsourced Illustrations/customerJourneyMap/customerJourneyMap_1.png differ
diff --git a/public/Crowdsourced Illustrations/customerJourneyMap/customerJourneyMap_2.png b/public/Crowdsourced Illustrations/customerJourneyMap/customerJourneyMap_2.png
new file mode 100644
index 0000000..c0f1aac
Binary files /dev/null and b/public/Crowdsourced Illustrations/customerJourneyMap/customerJourneyMap_2.png differ
diff --git a/public/Crowdsourced Illustrations/customerJourneyMap/customerJourneyMap_3.png b/public/Crowdsourced Illustrations/customerJourneyMap/customerJourneyMap_3.png
new file mode 100644
index 0000000..60e51dc
Binary files /dev/null and b/public/Crowdsourced Illustrations/customerJourneyMap/customerJourneyMap_3.png differ
diff --git a/public/Crowdsourced Illustrations/dotVoting/dotVoting_1.png b/public/Crowdsourced Illustrations/dotVoting/dotVoting_1.png
new file mode 100644
index 0000000..e12ef8a
Binary files /dev/null and b/public/Crowdsourced Illustrations/dotVoting/dotVoting_1.png differ
diff --git a/public/Crowdsourced Illustrations/dotVoting/dotVoting_2.png b/public/Crowdsourced Illustrations/dotVoting/dotVoting_2.png
new file mode 100644
index 0000000..7f93209
Binary files /dev/null and b/public/Crowdsourced Illustrations/dotVoting/dotVoting_2.png differ
diff --git a/public/Crowdsourced Illustrations/dotVoting/dotVoting_3.png b/public/Crowdsourced Illustrations/dotVoting/dotVoting_3.png
new file mode 100644
index 0000000..ccc1c8d
Binary files /dev/null and b/public/Crowdsourced Illustrations/dotVoting/dotVoting_3.png differ
diff --git a/public/Crowdsourced Illustrations/evidencing/evidencing_1.png b/public/Crowdsourced Illustrations/evidencing/evidencing_1.png
new file mode 100644
index 0000000..22adf13
Binary files /dev/null and b/public/Crowdsourced Illustrations/evidencing/evidencing_1.png differ
diff --git a/public/Crowdsourced Illustrations/evidencing/evidencing_2.png b/public/Crowdsourced Illustrations/evidencing/evidencing_2.png
new file mode 100644
index 0000000..fb5ec95
Binary files /dev/null and b/public/Crowdsourced Illustrations/evidencing/evidencing_2.png differ
diff --git a/public/Crowdsourced Illustrations/evidencing/evidencing_3.png b/public/Crowdsourced Illustrations/evidencing/evidencing_3.png
new file mode 100644
index 0000000..41632d1
Binary files /dev/null and b/public/Crowdsourced Illustrations/evidencing/evidencing_3.png differ
diff --git a/public/Crowdsourced Illustrations/fuseDepositionModeling/fuseDepositionModeling_1.png b/public/Crowdsourced Illustrations/fuseDepositionModeling/fuseDepositionModeling_1.png
new file mode 100644
index 0000000..c20f986
Binary files /dev/null and b/public/Crowdsourced Illustrations/fuseDepositionModeling/fuseDepositionModeling_1.png differ
diff --git a/public/Crowdsourced Illustrations/fuseDepositionModeling/fuseDepositionModeling_2.png b/public/Crowdsourced Illustrations/fuseDepositionModeling/fuseDepositionModeling_2.png
new file mode 100644
index 0000000..d86ec9d
Binary files /dev/null and b/public/Crowdsourced Illustrations/fuseDepositionModeling/fuseDepositionModeling_2.png differ
diff --git a/public/Crowdsourced Illustrations/fuseDepositionModeling/fuseDepositionModeling_3.png b/public/Crowdsourced Illustrations/fuseDepositionModeling/fuseDepositionModeling_3.png
new file mode 100644
index 0000000..3d292eb
Binary files /dev/null and b/public/Crowdsourced Illustrations/fuseDepositionModeling/fuseDepositionModeling_3.png differ
diff --git a/public/Crowdsourced Illustrations/offeringMap/offeringMap_1.png b/public/Crowdsourced Illustrations/offeringMap/offeringMap_1.png
new file mode 100644
index 0000000..012c897
Binary files /dev/null and b/public/Crowdsourced Illustrations/offeringMap/offeringMap_1.png differ
diff --git a/public/Crowdsourced Illustrations/offeringMap/offeringMap_2.png b/public/Crowdsourced Illustrations/offeringMap/offeringMap_2.png
new file mode 100644
index 0000000..cc1772e
Binary files /dev/null and b/public/Crowdsourced Illustrations/offeringMap/offeringMap_2.png differ
diff --git a/public/Crowdsourced Illustrations/offeringMap/offeringMap_3.png b/public/Crowdsourced Illustrations/offeringMap/offeringMap_3.png
new file mode 100644
index 0000000..3048017
Binary files /dev/null and b/public/Crowdsourced Illustrations/offeringMap/offeringMap_3.png differ
diff --git a/public/Crowdsourced Illustrations/oralHistory/oralHistory_1.png b/public/Crowdsourced Illustrations/oralHistory/oralHistory_1.png
new file mode 100644
index 0000000..3c95735
Binary files /dev/null and b/public/Crowdsourced Illustrations/oralHistory/oralHistory_1.png differ
diff --git a/public/Crowdsourced Illustrations/oralHistory/oralHistory_2.png b/public/Crowdsourced Illustrations/oralHistory/oralHistory_2.png
new file mode 100644
index 0000000..f6d8a21
Binary files /dev/null and b/public/Crowdsourced Illustrations/oralHistory/oralHistory_2.png differ
diff --git a/public/Crowdsourced Illustrations/oralHistory/oralHistory_3.png b/public/Crowdsourced Illustrations/oralHistory/oralHistory_3.png
new file mode 100644
index 0000000..75fa9f8
Binary files /dev/null and b/public/Crowdsourced Illustrations/oralHistory/oralHistory_3.png differ
diff --git a/public/Crowdsourced Illustrations/storyboard/storyboard_1.png b/public/Crowdsourced Illustrations/storyboard/storyboard_1.png
new file mode 100644
index 0000000..5529029
Binary files /dev/null and b/public/Crowdsourced Illustrations/storyboard/storyboard_1.png differ
diff --git a/public/Crowdsourced Illustrations/storyboard/storyboard_2.png b/public/Crowdsourced Illustrations/storyboard/storyboard_2.png
new file mode 100644
index 0000000..a288fbc
Binary files /dev/null and b/public/Crowdsourced Illustrations/storyboard/storyboard_2.png differ
diff --git a/public/Crowdsourced Illustrations/storyboard/storyboard_3.png b/public/Crowdsourced Illustrations/storyboard/storyboard_3.png
new file mode 100644
index 0000000..c0a0171
Binary files /dev/null and b/public/Crowdsourced Illustrations/storyboard/storyboard_3.png differ
diff --git a/public/Crowdsourced Illustrations/wireframes/wireframes_1.png b/public/Crowdsourced Illustrations/wireframes/wireframes_1.png
new file mode 100644
index 0000000..c3f8376
Binary files /dev/null and b/public/Crowdsourced Illustrations/wireframes/wireframes_1.png differ
diff --git a/public/Crowdsourced Illustrations/wireframes/wireframes_2.png b/public/Crowdsourced Illustrations/wireframes/wireframes_2.png
new file mode 100644
index 0000000..d6e2152
Binary files /dev/null and b/public/Crowdsourced Illustrations/wireframes/wireframes_2.png differ
diff --git a/public/Crowdsourced Illustrations/wireframes/wireframes_3.png b/public/Crowdsourced Illustrations/wireframes/wireframes_3.png
new file mode 100644
index 0000000..c96cc3e
Binary files /dev/null and b/public/Crowdsourced Illustrations/wireframes/wireframes_3.png differ
diff --git a/public/casestudies.json b/public/casestudies.json
index 5a90dd3..5921851 100644
--- a/public/casestudies.json
+++ b/public/casestudies.json
@@ -1,17 +1,23 @@
-#rake db:migrate:reset
-#rake db:seed:casestudies
+// rake db:migrate:reset
+// rake db:seed:casestudies
 
 [
     {
         "title": "A Case Study of Non-User-Centered Design for a Police Emergency-Response System Aaron",
-        "subTitle": 
+        "mainImage":"AMA1.png",
+        "developmentCycle":"Product Refinement",
+        "designPhase":"Problem Assessment",
         "projectDomain": "interaction design, research",
+        "customerIsUser":"Yes",
         "remoteProject": "No",
         "customerType":"government",
         "userAge":"middle aged",
         "privacyLevel":"public",
         "socialSetting":"professional",
         "timePeriod":"2 months",
+        "methods": "Brainstorming, Focus Group",
+        "permissionToUse":"Yes",
+        "imageResource": "AMA2.png",
         "authorName": "Aaron Marcus, Jim Gasperini",
         "url": "http://www.amanda.com/joomla_uploads/whitepapers/Intrxns.SJPD.Art.pp12ff.120906%282%29.pdf",
         "companyName": "Aaron Marcus and Associates",
@@ -19,7 +25,7 @@
         "PDFResource": "AMA1",
         "description": "Evaluate the software: The government had been spent more than $4 million  on the software, and it was performing poorly, with many usability problems.",
         "authorEmail": "aaron.marcus@amanda.com",
-        "authorOther": "jim.gasperini@amanda.com",
+        "authorOther": "jim.gasperini@amanda.com"
     },
     {
         "title": "A Behind-the-Scenes Look at Developing iWitness",
diff --git a/public/crowdsourcedIllustration.json b/public/crowdsourcedIllustration.json
new file mode 100644
index 0000000..fa7270e
--- /dev/null
+++ b/public/crowdsourcedIllustration.json
@@ -0,0 +1,310 @@
+[
+    {
+        "methodName": "Customer Journey Map",
+        "versionID":"1",
+        "designer":"Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"Customer Journey Mapping is a tool for visualizing how customers interact with people and organizations in order to make a purchase or experience a service. Customer Journey Mapping comes from the corporate sector and market research. It can be used as a form of consultation to improve a service through finding out how people use the service and how they interact with the service provider. It provides a map of the interactions and emotions that take place, and can help an organization provide its customers with the experience it wants them to have. ",
+        "methodProcess":"1. Set up: Executive director sponsor identified, Cross functional team created, Kick-off workshop with set expectations and process description. 2. Map: Identify channels and key individuals, Workshop to map touch points, Sense and check results, Create a customer Journey dashboard. 3. Size the prize: Identify drop out hot-spots, Quantify opportunity cost, explore route causes for drop out, present map and hot spots to cross functional group. 4. Design: Workshops to develop ideal touch-points and prioritize changes. 5. Act and embed: management board support for long-term programmer, Performance targets set, Identify project champions, Implement changes, review and revise.",  
+        "image":"customerJourneyMap_1.png",
+    },
+
+    {
+        "methodName": "Customer Journey Map",
+        "versionID":"2",
+        "designer":"Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"Customer Journey Mapping is a tool for visualizing how customers interact with people and organizations in order to make a purchase or experience a service. Customer Journey Mapping comes from the corporate sector and market research. It can be used as a form of consultation to improve a service through finding out how people use the service and how they interact with the service provider. It provides a map of the interactions and emotions that take place, and can help an organization provide its customers with the experience it wants them to have. ",
+        "methodProcess":"1. Set up: Executive director sponsor identified, Cross functional team created, Kick-off workshop with set expectations and process description. 2. Map: Identify channels and key individuals, Workshop to map touch points, Sense and check results, Create a customer Journey dashboard. 3. Size the prize: Identify drop out hot-spots, Quantify opportunity cost, explore route causes for drop out, present map and hot spots to cross functional group. 4. Design: Workshops to develop ideal touch-points and prioritize changes. 5. Act and embed: management board support for long-term programmer, Performance targets set, Identify project champions, Implement changes, review and revise.",      
+        "image":"customerJourneyMap_2.png",
+    },
+
+    {
+        "methodName": "Customer Journey Map",
+        "versionID":"3",
+        "designer":"Cesar Torres",
+        "evaluator": "",
+        "Date":"",
+        "methodDescription":"Customer Journey Mapping is a tool for visualizing how customers interact with people and organizations in order to make a purchase or experience a service. Customer Journey Mapping comes from the corporate sector and market research. It can be used as a form of consultation to improve a service through finding out how people use the service and how they interact with the service provider. It provides a map of the interactions and emotions that take place, and can help an organization provide its customers with the experience it wants them to have. ",
+        "methodProcess":"1. Set up: Executive director sponsor identified, Cross functional team created, Kick-off workshop with set expectations and process description. 2. Map: Identify channels and key individuals, Workshop to map touch points, Sense and check results, Create a customer Journey dashboard. 3. Size the prize: Identify drop out hot-spots, Quantify opportunity cost, explore route causes for drop out, present map and hot spots to cross functional group. 4. Design: Workshops to develop ideal touch-points and prioritize changes. 5. Act and embed: management board support for long-term programmer, Performance targets set, Identify project champions, Implement changes, review and revise.",      
+        "image":"customerJourneyMap_3.png",
+       
+    },
+
+    {
+        "methodName": "Wireframes",
+        "versionID":"1",
+        "designer":"Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.",
+        "methodProcess":"Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.",
+        "image":"wireframes_1.png",
+    },
+
+    {
+        
+        "methodName": "Wireframes",
+        "versionID":"2",
+        "designer":"Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.",
+        "methodProcess":"Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.",
+        "image":"wireframes_2.png",
+    },
+
+    {
+        "methodName": "Wireframes",
+        "versionID":"3",
+        "designer":"Cesar Torres",
+        "evaluator": "",
+        "Date":"",
+        "methodDescription":"A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.",
+        "methodProcess":"Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.",
+        "image":"wireframes_3.png",
+    },
+
+    {
+        "methodName": "Fused Deposition Models (FDM)",
+        "versionID":"1",
+        "designer": "Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"Fused Deposition Modeling is the most common 3D printing method. FDM printers use a thermoplastic filament, which is heated to its melting point and then extruded, layer by layer, to create a three dimensional object.",
+        "methodProcess":"FDM is popular with companies in a variety of industries, from automotive (BMW, Hyundai, Lamborghini) to consumer goods manufacturing (Black and Decker, Dial, Nestle). These companies use FDM throughout their product development, prototyping and manufacturing processes.",
+        "image":"fuseDepositionModeling_1.png",
+    },
+
+    {
+        "methodName": "Fused Deposition Models (FDM)",
+        "versionID":"2",
+        "designer": "Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"Fused Deposition Modeling is the most common 3D printing method. FDM printers use a thermoplastic filament, which is heated to its melting point and then extruded, layer by layer, to create a three dimensional object.",
+        "methodProcess":"FDM is popular with companies in a variety of industries, from automotive (BMW, Hyundai, Lamborghini) to consumer goods manufacturing (Black and Decker, Dial, Nestle). These companies use FDM throughout their product development, prototyping and manufacturing processes.",
+        "image":"fuseDepositionModeling_2.png",
+    },
+    
+    {
+        "methodName": "Fused Deposition Models (FDM)",
+        "versionID":"3",
+        "designer": "Cesar Torres",
+        "evaluator": "",
+        "Date":"",
+        "methodDescription":"Fused Deposition Modeling is the most common 3D printing method. FDM printers use a thermoplastic filament, which is heated to its melting point and then extruded, layer by layer, to create a three dimensional object.",
+        "methodProcess":"FDM is popular with companies in a variety of industries, from automotive (BMW, Hyundai, Lamborghini) to consumer goods manufacturing (Black and Decker, Dial, Nestle). These companies use FDM throughout their product development, prototyping and manufacturing processes.",
+        "image":"fuseDepositionModeling_3.png",
+    },
+
+
+    {
+        "methodName": "Evidencing",
+        "versionID":"1",
+        "designer": "Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"The methodology called evidencing, pioneered by the UK firm Livework, involves creating objects and images exploring the way a proposed design innovation will feel and work through its touch-points. Evidencing means taking the ideas and animating them as tangible evidence of the future.",
+        "methodProcess":"Illustrate a service’s touch-points through images or objects, in order to understand how a service will look and feel.",
+        "image":"evidencing_1.png",
+    }, 
+
+    {
+        "methodName": "Evidencing",
+        "versionID":"2",
+        "designer": "Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"The methodology called evidencing, pioneered by the UK firm Livework, involves creating objects and images exploring the way a proposed design innovation will feel and work through its touch-points. Evidencing means taking the ideas and animating them as tangible evidence of the future.",
+        "methodProcess":"Illustrate a service’s touch-points through images or objects, in order to understand how a service will look and feel.",
+        "image":"evidencing_2.png",
+   }, 
+
+    {
+        "methodName": "Evidencing",
+        "versionID":"3",
+        "designer": "Cesar Torres",
+        "evaluator": "",
+        "Date":"",
+        "methodDescription":"The methodology called evidencing, pioneered by the UK firm Livework, involves creating objects and images exploring the way a proposed design innovation will feel and work through its touch-points. Evidencing means taking the ideas and animating them as tangible evidence of the future.",
+        "methodProcess":"Illustrate a service’s touch-points through images or objects, in order to understand how a service will look and feel.",
+        "image":"evidencing_3.png",
+   }, 
+
+   {
+        "methodName": "Storyboard",
+        "versionID":"1",
+        "designer": "Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"The storyboard is a tool derived from the cinematographic tradition; it is the representation of use cases through a series of drawings or pictures, put together in a narrative sequence.The service storyboard shows the manifestation of every touch-points and the relationships between them and the user in the creation of the experience.",
+        "methodProcess":"1. Before the meeting, decide on the topic around which you want players to share stories. Set up a flat surface area where you can write and post images. Write the name of the topic in this area. 2. Participants will describe in picture what they perceive to be the values underlying the topic. Next, they'll share a work-related story that's indicative of those values. 3. Give the players 10 minutes to cut out one or more images that represent their perception of the underlying values.",
+        "image":"storyboard_1.png",
+   }, 
+
+    {
+        "methodName": "Storyboard",
+        "versionID":"2",
+        "designer": "Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"The storyboard is a tool derived from the cinematographic tradition; it is the representation of use cases through a series of drawings or pictures, put together in a narrative sequence.The service storyboard shows the manifestation of every touch-points and the relationships between them and the user in the creation of the experience.",
+        "methodProcess":"1. Before the meeting, decide on the topic around which you want players to share stories. Set up a flat surface area where you can write and post images. Write the name of the topic in this area. 2. Participants will describe in picture what they perceive to be the values underlying the topic. Next, they'll share a work-related story that's indicative of those values. 3. Give the players 10 minutes to cut out one or more images that represent their perception of the underlying values.",
+        "image":"storyboard_2.png",
+   }, 
+
+    {
+        "methodName": "Storyboard",
+        "versionID":"3",
+        "designer": "Cesar Torres",
+        "evaluator": "",
+        "Date":"",
+        "methodDescription":"The storyboard is a tool derived from the cinematographic tradition; it is the representation of use cases through a series of drawings or pictures, put together in a narrative sequence.The service storyboard shows the manifestation of every touch-points and the relationships between them and the user in the creation of the experience.",
+        "methodProcess":"1. Before the meeting, decide on the topic around which you want players to share stories. Set up a flat surface area where you can write and post images. Write the name of the topic in this area. 2. Participants will describe in picture what they perceive to be the values underlying the topic. Next, they'll share a work-related story that's indicative of those values. 3. Give the players 10 minutes to cut out one or more images that represent their perception of the underlying values.",
+        "image":"storyboard_3",
+   }, 
+
+    {
+        "methodName": "Offering Map",
+        "versionID":"1",
+        "designer": "Lyra Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"The aim of an offering map is to describe in a synthetic way what the service offers to its users.",
+        "methodProcess":"There is not a standard format for this tool: the offering could be described by words or could be illustrated by images, but most frequently it is visualized through a graph.
This instrument could support the elaboration of the service idea as well the development of some specific solutions, it could be a tool for the implementation of the concept but also for the communication of the service to the final user. In each one of these situations, the offering map will assume different configurations and languages with reference to the specific aims and receivers involved.",
+        "image":"offeringMap_1.png",
+   }, 
+
+  {
+        "methodName": "Offering Map",
+        "versionID":"2",
+        "designer": "Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"The aim of an offering map is to describe in a synthetic way what the service offers to its users.",
+        "methodProcess":"There is not a standard format for this tool: the offering could be described by words or could be illustrated by images, but most frequently it is visualized through a graph.
This instrument could support the elaboration of the service idea as well the development of some specific solutions, it could be a tool for the implementation of the concept but also for the communication of the service to the final user. In each one of these situations, the offering map will assume different configurations and languages with reference to the specific aims and receivers involved.",
+        "image":"offeringMap_2.png",
+   }, 
+
+   {
+        "methodName": "Offering Map",
+        "versionID":"3",
+        "designer": "Cesar Torres",
+        "evaluator": "",
+        "Date":"",
+        "methodDescription":"The aim of an offering map is to describe in a synthetic way what the service offers to its users.",
+        "methodProcess":"There is not a standard format for this tool: the offering could be described by words or could be illustrated by images, but most frequently it is visualized through a graph.
This instrument could support the elaboration of the service idea as well the development of some specific solutions, it could be a tool for the implementation of the concept but also for the communication of the service to the final user. In each one of these situations, the offering map will assume different configurations and languages with reference to the specific aims and receivers involved.",
+        "image":"offeringMap_3.png",
+   }, 
+
+   {
+        "methodName": "Componential Analysis",
+        "versionID":"1",
+        "designer": "Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"Componential analysis is the systematic search for the attributes (components of meaning) associated with cultural categories. Whenever an ethnographer discovers contrasts among the members of a domain, these contrasts are best thought of as attributes or components of meaning. The purpose of Componential Analysis is to organize and represent contrasts discovered through ethnographies and taxonomies. This method of organizing information should be used with ethnographic research, specifically with the methods of Participant Observation and Taxonomies.",
+        "methodProcess":"1. Select a domain for analysis. 2. Inventory all contrasts previously discovered - Possibly start  with notes complied from asking contrast questions and/or making selective observations. (e.g. Aremnian Catholics speak Armenian as a first language; Shunni speak Arabic as a first language.) 3. Prepare a paradigm worksheet - consists of an empty paradigm in which you enter the cultural categories of the domain down the lefthand column, while making notes about the relationships between the paradigm and the other domains. 4. Identify dimensions of contrast that have binary values - A dimension of contrast is an idea or concept that has at least two parts, although in this case it specifically has two parts since the values must be binary. (e.g. If you were analyzing the domain "kinds of trees," you would come up with one dimension of contrast that might be stated "characterized by the presence of leaves." This is a dimension of contrast related to trees and has two values or parts: "yes" or "no.") 5. Combine closely related dimensions of contrast into ones that have multiple values - Instead of "yes" or "no" dimensions of contrast, add more complex ones.", 
+        "image":"componentialAnalysis_1.png",
+
+   },
+
+   {
+        "methodName": "Componential Analysis",
+        "versionID":"2",
+        "designer": "Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"Componential analysis is the systematic search for the attributes (components of meaning) associated with cultural categories. Whenever an ethnographer discovers contrasts among the members of a domain, these contrasts are best thought of as attributes or components of meaning. The purpose of Componential Analysis is to organize and represent contrasts discovered through ethnographies and taxonomies. This method of organizing information should be used with ethnographic research, specifically with the methods of Participant Observation and Taxonomies.",
+        "methodProcess":"1. Select a domain for analysis. 2. Inventory all contrasts previously discovered - Possibly start  with notes complied from asking contrast questions and/or making selective observations. (e.g. Aremnian Catholics speak Armenian as a first language; Shunni speak Arabic as a first language.) 3. Prepare a paradigm worksheet - consists of an empty paradigm in which you enter the cultural categories of the domain down the lefthand column, while making notes about the relationships between the paradigm and the other domains. 4. Identify dimensions of contrast that have binary values - A dimension of contrast is an idea or concept that has at least two parts, although in this case it specifically has two parts since the values must be binary. (e.g. If you were analyzing the domain "kinds of trees," you would come up with one dimension of contrast that might be stated "characterized by the presence of leaves." This is a dimension of contrast related to trees and has two values or parts: "yes" or "no.") 5. Combine closely related dimensions of contrast into ones that have multiple values - Instead of "yes" or "no" dimensions of contrast, add more complex ones.", 
+        "image":"componentialAnalysis_2.png",
+
+   },
+
+   {
+        "methodName": "Componential Analysis",
+        "versionID":"3",
+        "designer": "Yipu Zheng",
+        "evaluator": "",
+        "Date":"",
+        "methodDescription":"Componential analysis is the systematic search for the attributes (components of meaning) associated with cultural categories. Whenever an ethnographer discovers contrasts among the members of a domain, these contrasts are best thought of as attributes or components of meaning. The purpose of Componential Analysis is to organize and represent contrasts discovered through ethnographies and taxonomies. This method of organizing information should be used with ethnographic research, specifically with the methods of Participant Observation and Taxonomies.",
+        "methodProcess":"1. Select a domain for analysis. 2. Inventory all contrasts previously discovered - Possibly start  with notes complied from asking contrast questions and/or making selective observations. (e.g. Aremnian Catholics speak Armenian as a first language; Shunni speak Arabic as a first language.) 3. Prepare a paradigm worksheet - consists of an empty paradigm in which you enter the cultural categories of the domain down the lefthand column, while making notes about the relationships between the paradigm and the other domains. 4. Identify dimensions of contrast that have binary values - A dimension of contrast is an idea or concept that has at least two parts, although in this case it specifically has two parts since the values must be binary. (e.g. If you were analyzing the domain "kinds of trees," you would come up with one dimension of contrast that might be stated "characterized by the presence of leaves." This is a dimension of contrast related to trees and has two values or parts: "yes" or "no.") 5. Combine closely related dimensions of contrast into ones that have multiple values - Instead of "yes" or "no" dimensions of contrast, add more complex ones.", 
+        "image":"componentialAnalysis_3.png",
+
+   },
+
+    {
+        "methodName": "Dot Voting",
+        "versionID":"1",
+        "designer": "Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"This process takes place when there are too many ideas developed through the brainstorming phase. Dot voting is one of the simplest ways to prioritize and converge upon an agreed solution. It could be used to hone a list of features, to agree on discussion topics, or to choose among strategies and concepts.",
+        "methodProcess":"1. The group needs to set a things to vote on. This may be something they have just developed, such as a wall of sticky notes, or it may be flip-chart list that captures the ideas in one place. Ask the group to cast their votes by placing a dot next to the items they feel strongly about. Participants have 5 votes to cast and may vote more than once for a single topic. 2. Once all votes are cast, tally them, and if necessary, make a list of the items by their new rank. 3. This prioritized list becomes the subject of discussion and decision making. in some cases, it may be useful to reflect on ideas that didn't receive votes to verify that they haven't been left behind without a cause.",
+        "image":"dotVoting_1.png",
+   },
+
+    {
+        "methodName": "Dot Voting",
+        "versionID":"2",
+        "designer": "Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"This process takes place when there are too many ideas developed through the brainstorming phase. Dot voting is one of the simplest ways to prioritize and converge upon an agreed solution. It could be used to hone a list of features, to agree on discussion topics, or to choose among strategies and concepts.",
+        "methodProcess":"1. The group needs to set a things to vote on. This may be something they have just developed, such as a wall of sticky notes, or it may be flip-chart list that captures the ideas in one place. Ask the group to cast their votes by placing a dot next to the items they feel strongly about. Participants have 5 votes to cast and may vote more than once for a single topic. 2. Once all votes are cast, tally them, and if necessary, make a list of the items by their new rank. 3. This prioritized list becomes the subject of discussion and decision making. in some cases, it may be useful to reflect on ideas that didn't receive votes to verify that they haven't been left behind without a cause.",
+        "image":"dotVoting_2.png",
+   },
+
+
+    {
+        "methodName": "Dot Voting",
+        "versionID":"3",
+        "designer": "Yipu Zheng",
+        "evaluator": "",
+        "Date":"",
+        "methodDescription":"This process takes place when there are too many ideas developed through the brainstorming phase. Dot voting is one of the simplest ways to prioritize and converge upon an agreed solution. It could be used to hone a list of features, to agree on discussion topics, or to choose among strategies and concepts.",
+        "methodProcess":"1. The group needs to set a things to vote on. This may be something they have just developed, such as a wall of sticky notes, or it may be flip-chart list that captures the ideas in one place. Ask the group to cast their votes by placing a dot next to the items they feel strongly about. Participants have 5 votes to cast and may vote more than once for a single topic. 2. Once all votes are cast, tally them, and if necessary, make a list of the items by their new rank. 3. This prioritized list becomes the subject of discussion and decision making. in some cases, it may be useful to reflect on ideas that didn't receive votes to verify that they haven't been left behind without a cause.",
+        "image":"dotVoting_3.png",
+   },
+
+ {
+        "methodName": "Oral History",
+        "versionID":"1",
+        "designer": "Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"Oral history is a field of study and a method of gathering, preserving and interpreting the voices and memories of people, communities, and participants in past events. Oral history is both the oldest type of historical inquiry, predating the written word, and one of the most modern, initiated with tape recorders in the 1940s and now using 21st-century digital technologies.",
+        "methodProcess":"An oral history interview generally consists of a well-prepared interviewer questioning an interviewee and recording their exchange in audio or video format.  Recordings of the interview are transcribed, summarized, or indexed and then placed in a library or archives. These interviews may be used for research or excerpted in a publication, radio or video documentary, museum exhibition, dramatization or other form of public presentation. Recordings, transcripts, catalogs, photographs and related documentary materials can also be posted on the Internet.",
+        "image":"oralHistory_1.png",
+   },
+
+    {
+        "methodName": "Oral History",
+        "versionID":"2",
+        "designer": "Yipu Zheng",
+        "evaluator": "Cesar Torres",
+        "Date":"",
+        "methodDescription":"Oral history is a field of study and a method of gathering, preserving and interpreting the voices and memories of people, communities, and participants in past events. Oral history is both the oldest type of historical inquiry, predating the written word, and one of the most modern, initiated with tape recorders in the 1940s and now using 21st-century digital technologies.",
+        "methodProcess":"An oral history interview generally consists of a well-prepared interviewer questioning an interviewee and recording their exchange in audio or video format.  Recordings of the interview are transcribed, summarized, or indexed and then placed in a library or archives. These interviews may be used for research or excerpted in a publication, radio or video documentary, museum exhibition, dramatization or other form of public presentation. Recordings, transcripts, catalogs, photographs and related documentary materials can also be posted on the Internet.",
+        "image":"oralHistory_2.png",
+   },
+
+    {
+        "methodName": "Oral History",
+        "versionID":"3",
+        "designer": "Yipu Zheng",
+        "evaluator": "",
+        "Date":"",
+        "methodDescription":"Oral history is a field of study and a method of gathering, preserving and interpreting the voices and memories of people, communities, and participants in past events. Oral history is both the oldest type of historical inquiry, predating the written word, and one of the most modern, initiated with tape recorders in the 1940s and now using 21st-century digital technologies.",
+        "methodProcess":"An oral history interview generally consists of a well-prepared interviewer questioning an interviewee and recording their exchange in audio or video format.  Recordings of the interview are transcribed, summarized, or indexed and then placed in a library or archives. These interviews may be used for research or excerpted in a publication, radio or video documentary, museum exhibition, dramatization or other form of public presentation. Recordings, transcripts, catalogs, photographs and related documentary materials can also be posted on the Internet.",
+        "image":"oralHistory_3.png",
+   },
+
+]
+
+
+
+
diff --git a/spec/controllers/collection_controller_spec.rb b/spec/controllers/collection_controller_spec.rb
new file mode 100644
index 0000000..b43b708
--- /dev/null
+++ b/spec/controllers/collection_controller_spec.rb
@@ -0,0 +1,12 @@
+require 'spec_helper'
+
+describe CollectionController do
+
+  describe "GET 'casestudies'" do
+    it "returns http success" do
+      get 'casestudies'
+      response.should be_success
+    end
+  end
+
+end
diff --git a/spec/helpers/collection_helper_spec.rb b/spec/helpers/collection_helper_spec.rb
new file mode 100644
index 0000000..1f6229d
--- /dev/null
+++ b/spec/helpers/collection_helper_spec.rb
@@ -0,0 +1,15 @@
+require 'spec_helper'
+
+# Specs in this file have access to a helper object that includes
+# the CollectionHelper. For example:
+#
+# describe CollectionHelper do
+#   describe "string concat" do
+#     it "concats two strings with spaces" do
+#       expect(helper.concat_strings("this","that")).to eq("this that")
+#     end
+#   end
+# end
+describe CollectionHelper do
+  pending "add some examples to (or delete) #{__FILE__}"
+end
diff --git a/spec/views/collection/casestudies.html.erb_spec.rb b/spec/views/collection/casestudies.html.erb_spec.rb
new file mode 100644
index 0000000..d7ce932
--- /dev/null
+++ b/spec/views/collection/casestudies.html.erb_spec.rb
@@ -0,0 +1,5 @@
+require 'spec_helper'
+
+describe "collection/casestudies.html.erb" do
+  pending "add some examples to (or delete) #{__FILE__}"
+end