diff --git a/cms/djangoapps/contentstore/tests/test_import_export.py b/cms/djangoapps/contentstore/tests/test_import_export.py
index e26e6930a3..a1239a6c81 100644
--- a/cms/djangoapps/contentstore/tests/test_import_export.py
+++ b/cms/djangoapps/contentstore/tests/test_import_export.py
@@ -219,7 +219,7 @@ class ExportTestCase(CourseTestCase):
         """
         resp = self.client.get_html(self.url)
         self.assertEquals(resp.status_code, 200)
-        self.assertContains(resp, "Download Files")
+        self.assertContains(resp, "Export a Copy of My Course Data")
 
     def test_export_json_unsupported(self):
         """
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index eb7bf55b30..219b9bf187 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -417,70 +417,6 @@ p, ul, ol, dl {
   > section {
     margin: 0 0 $baseline 0;
   }
-
-  .bit {
-    @extend %t-copy-sub1;
-    margin: 0 0 $baseline 0;
-    border-bottom: 1px solid $gray-l4;
-    padding: 0 0 $baseline 0;
-    color: $gray-l1;
-
-    &:last-child {
-      margin-bottom: 0;
-      border: none;
-      padding-bottom: 0;
-    }
-
-    h3 {
-      @extend %t-title7;
-      margin: 0 0 ($baseline/4) 0;
-      color: $gray-d2;
-      font-weight: 600;
-    }
-
-    p {
-      margin: 0 0 $baseline 0;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    // actions
-    .list-actions {
-      @extend %cont-no-list;
-
-      .action-item {
-        margin-bottom: ($baseline/4);
-        border-bottom: 1px dotted $gray-l4;
-        padding-bottom: ($baseline/4);
-
-
-        &:last-child {
-          margin-bottom: 0;
-          border: none;
-          padding-bottom: 0;
-        }
-      }
-    }
-
-    // navigation
-    .nav-related, .nav-page {
-
-      .nav-item {
-        margin-bottom: ($baseline/4);
-        border-bottom: 1px dotted $gray-l4;
-        padding-bottom: ($baseline/4);
-
-
-        &:last-child {
-          margin-bottom: 0;
-          border: none;
-          padding-bottom: 0;
-        }
-      }
-    }
-  }
 }
 
 // ====================
diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss
index 121518b187..b9e351e435 100644
--- a/cms/static/sass/elements/_system-help.scss
+++ b/cms/static/sass/elements/_system-help.scss
@@ -211,3 +211,71 @@
     color: $gray;
   }
 }
+
+// ====================
+
+// informational bits (rename once UI pattern is further defined)
+.bit {
+  @extend %t-copy-sub1;
+  margin: 0 0 $baseline 0;
+  border-bottom: 1px solid $gray-l4;
+  padding: 0 0 $baseline 0;
+  color: $gray-l1;
+
+  &:last-child {
+    margin-bottom: 0;
+    border: none;
+    padding-bottom: 0;
+  }
+
+  h3, .title {
+    @extend %t-title7;
+    margin: 0 0 ($baseline/4) 0;
+    color: $gray-d2;
+    font-weight: 600;
+  }
+
+  p, .copy {
+    margin: 0 0 $baseline 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // actions
+  .list-actions {
+    @extend %cont-no-list;
+
+    .action-item {
+      @extend %wipe-last-child;
+      margin-bottom: ($baseline/4);
+      border-bottom: 1px dotted $gray-l4;
+      padding-bottom: ($baseline/4);
+    }
+  }
+
+  // details
+  .list-details {
+    @extend %cont-no-list;
+
+    .item-detail {
+      @extend %wipe-last-child;
+      margin-bottom: ($baseline/4);
+      border-bottom: 1px dotted $gray-l4;
+      padding-bottom: ($baseline/4);
+    }
+  }
+
+  // navigation
+  .nav-related, .nav-page {
+    @extend %cont-no-list;
+
+    .nav-item {
+      @extend %wipe-last-child;
+      margin-bottom: ($baseline/4);
+      border-bottom: 1px dotted $gray-l4;
+      padding-bottom: ($baseline/4);
+    }
+  }
+}
diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss
index 3cb93bb686..145778f0a5 100644
--- a/cms/static/sass/views/_export.scss
+++ b/cms/static/sass/views/_export.scss
@@ -3,12 +3,92 @@
 
 .view-export {
 
-  .export-overview {
-    @extend %ui-window;
-    @include clearfix;
-    padding: 30px 40px;
+  // UI: basic layout
+  .content-primary, .content-supplementary {
+    @include box-sizing(border-box);
+    float: left;
   }
 
+  .content-primary {
+    width: flex-grid(9,12);
+    margin-right: flex-gutter();
+  }
+
+  .content-supplementary {
+    width: flex-grid(3,12);
+  }
+
+
+  // UI: introduction
+  .introduction {
+
+    .title {
+      @extend %cont-text-sr;
+    }
+  }
+
+  // UI: export controls
+  .export-controls {
+    @include box-sizing(border-box);
+    @extend %ui-window;
+    padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
+
+    .title {
+      @extend %t-title4;
+    }
+
+    .action-export {
+      @extend %btn-primary-blue;
+      @extend %t-action1;
+      display: block;
+      margin: $baseline 0;
+      padding: ($baseline*0.75) $baseline;
+    }
+
+    .action {
+
+      [class^="icon"] {
+        @extend %t-icon2;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: ($baseline/4);
+      }
+
+      .copy {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+  }
+
+
+  // UI: export rules
+  .export-contents {
+    @include clearfix();
+    margin: ($baseline*2) 0;
+
+    .export-includes, .export-excludes {
+      width: flex-grid(4,9);
+
+      .item-detail {
+        @extend %t-copy-sub1;
+        @extend %wipe-last-child;
+        padding-bottom: ($baseline/4);
+        border-bottom: 1px solid $gray-l4;
+        margin-bottom: ($baseline/4);
+      }
+    }
+
+    .export-includes {
+      float: left;
+    }
+
+    .export-excludes {
+      float: right;
+    }
+  }
+
+  // OLD
   .description {
     float: left;
     width: 62%;
diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss
index b77987263b..38bd624eea 100644
--- a/cms/static/sass/views/_import.scss
+++ b/cms/static/sass/views/_import.scss
@@ -17,6 +17,13 @@
     width: flex-grid(3,12);
   }
 
+  // UI: export controls
+  .export-controls {
+    @extend %ui-window;
+    @include clearfix;
+    padding: 30px 40px;
+  }
+
   // UI: import form
   .import-form {
     @include box-sizing(border-box);
@@ -46,11 +53,23 @@
 
   // UI: default
   .action-choose-file {
-    @extend %btn-primary-blue;
+    @extend %btn-primary-green;
     @extend %t-action1;
     display: block;
     margin: $baseline 0;
     padding: ($baseline*0.75) $baseline;
+
+    [class^="icon"] {
+      @extend %t-icon2;
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: ($baseline/4);
+    }
+
+    .copy {
+      display: inline-block;
+      vertical-align: middle;
+    }
   }
 
   // ====================
diff --git a/cms/templates/export.html b/cms/templates/export.html
index bc09f24b61..2f620a0cb3 100644
--- a/cms/templates/export.html
+++ b/cms/templates/export.html
@@ -86,36 +86,81 @@ require(["domReady!", "gettext", "js/views/feedback_prompt"], function(doc, gett
   </header>
 </div>
 
-<div class="main-wrapper">
-  <div class="inner-wrapper">
+<div class="wrapper-content wrapper">
+  <section class="content">
+    <article class="content-primary" role="main">
 
-    <article class="export-overview">
-      <div class="description">
-        <h2>${_("About Exporting Courses")}</h2>
-        ## Translators: ".tar.gz" is a file extension, and should not be translated
-        <p>${_("When exporting your course, you will receive a .tar.gz formatted file that contains the following course data:")}</p>
+      <div class="introduction">
+        <h2 class="title">${_("About Exporting Courses")}</h2>
+        <div class="copy">
+          ## Translators: ".tar.gz" is a file extension, and should not be translated
 
-        <ul>
-          <li>${_("Course Structure (Sections and sub-section ordering)")}</li>
-          <li>${_("Individual Units")}</li>
-          <li>${_("Individual Problems")}</li>
-          <li>${_("Static Pages")}</li>
-          <li>${_("Course Assets")}</li>
+          <p>${_("You can export this course to edit it outside of Studio. Select the Export Course Content button below to download a .{em_start}tar.gz{em_end} file that contains the course content.").format(em_start='<strong>', em_end="</strong>")}</p>
+        </div>
+      </div>
+
+      <div class="export-controls">
+        <h2 class="title">${_("Export a Copy of My Course Data")}</h2>
+
+        <ul class="list-actions">
+          <li class="item-action">
+            <a class="action action-export action-primary" href="${export_url}">
+              <i class="icon-download"></i>
+              <span class="copy">${_("Export Course Content")}</span>
+            </a>
+          </li>
         </ul>
-
-        <p>${_("Your course export <strong>will not include</strong>: student data, forum/discussion data, course settings, certificates, grading information, or user data.")}</p>
       </div>
 
-      <!-- default state -->
-      <div class="export-form-wrapper">
-        <form method="post" enctype="multipart/form-data" class="export-form">
-            <h2>${_("Export Course:")}</h2>
+      <div class="export-contents">
+        <div class="export-includes">
+          <h3 class="title-3">${_("Data {em_start}exported with{em_end} your course:").format(em_start='<strong>', em_end="</strong>")}</h3>
+          <ul class="list-details list-export-includes">
+            <li class="item-detail">${_("Course Content (all Sections, Sub-sections, and Units)")}</li>
+            <li class="item-detail">${_("Course Structure")}</li>
+            <li class="item-detail">${_("Individual Problems")}</li>
+            <li class="item-detail">${_("Static Pages")}</li>
+            <li class="item-detail">${_("Course Assets")}</li>
+            <li class="item-detail">${_("Course Settings")}</li>
+          </ul>
+        </div>
 
-          <a href="${export_url}" class="button-export">${_("Download Files")}</a>
-        </form>
+        <div class="export-excludes">
+          <h3 class="title-3">${_("Data {em_start}not exported{em_end} with your course:").format(em_start='<strong>', em_end="</strong>")}</h3>
+          <ul class="list-details list-export-excludes">
+            <li class="item-detail">${_("User Data")}</li>
+            <li class="item-detail">${_("Course Team Data")}</li>
+            <li class="item-detail">${_("Forum/discussion Data")}</li>
+            <li class="item-detail">${_("Certificates")}</li>
+          </ul>
+        </div>
       </div>
-
     </article>
-  </div>
+
+    <aside class="content-supplementary" role="complimentary">
+      <div class="bit">
+        <h3 class="title-3">${_("Why export my course?")}</h3>
+
+        <ul class="list-details">
+          <li class="item-detail">${_("Edit the course XML directly, then import the modified course.")}</li>
+          <li class="item-detail">${_("Store a backup of your course in its current state.")}</li>
+          <li class="item-detail">${_("Import the course into another course instance, to create a customized version of your course.")}</li>
+        </ul>
+      </div>
+
+      <div class="bit">
+        <h3 class="title-3">${_("Opening the downloaded file")}</h3>
+
+        <p>${_("Extract the .tar.gz with an archive program on your computer.  Extracted data includes the course.xml file, as well as subfolders containing course content.")}</p>
+      </div>
+
+      <div class="bit">
+        ## Translators: ".tar.gz" is a file extension, and should not be translated
+        <h3 class="title-3">${_("Course Team Data")}</h3>
+
+        <p>${_("Note that course team data is not exported, and that course team data is not changed when importing a course.")}</p>
+      </div>
+    </aside>
+  </section>
 </div>
 </%block>
diff --git a/cms/templates/import.html b/cms/templates/import.html
index 99f2b4d40e..d455bc1d52 100644
--- a/cms/templates/import.html
+++ b/cms/templates/import.html
@@ -34,7 +34,10 @@
 
         <p class="error-block"></p>
 
-        <a href="#" class="action action-choose-file choose-file-button">${_("Choose File")}</a>
+        <a href="#" class="action action-choose-file choose-file-button">
+          <i class="icon-upload"></i>
+          <span class="copy">${_("Choose a File to Import")}</span>
+        </a>
 
         <div class="wrapper wrapper-file-name file-name-block">
             <h3 class="title">
@@ -132,6 +135,13 @@
         ## Translators: ".tar.gz" is a file extension, and files with that extension are called "gzipped tar files": these terms should not be translated
         <p>${_("Please note that if your course has any problems with auto-generated {nodename} nodes, re-importing your course could cause the loss of student data associated with those problems.").format(nodename='<code>url_name</code>')}</p>
       </div>
+
+      <div class="bit">
+        ## Translators: ".tar.gz" is a file extension, and should not be translated
+        <h3 class="title-3">${_("Course Team Info and Exporting/Importing")}</h3>
+
+        <p>${_("Please note that when importing course content, your course team info will not be changed by the imported course's information.")}</p>
+      </div>
     </aside>
   </section>
 </div>
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 3c53f0f4cf..71ce36a43a 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -80,6 +80,26 @@
 %ui-depth5 { z-index: 100000; }
 
 
+// extends - UI - utility - nth-type style clearing
+%wipe-first-child {
+
+  &:first-child {
+    margin-top: 0;
+    border-top: none;
+    padding-top: 0;
+  }
+}
+
+// extends - UI - utility - nth-type style clearing
+%wipe-last-child {
+
+  &:last-child {
+    margin-bottom: 0;
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+}
+
 // extends - UI - buttons
 %ui-btn {
   @include box-sizing(border-box);