UX Writing Hub - BagMyBum e-commerce screens

Task: Create an e-commerce site

Skills:

User Interviews
Personas
Feature List
Journey Mapping
Conversation Mining
Competitor Analysis
Figma
User Testing Ideas
BagMyBum - Mission Statement

BagMyBum is where anyone with access to the internet can go to purchase a sturdy and reliable bum bag that keeps their valuables safe and secure for an affordable price.
Research Report

11-Star Experience

Feature List

User Interview Questions

</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

<section
  data-test="page-section"
  
  data-section-theme=""
  class='page-section 
    
      layout-engine-section
    
    background-width--full-bleed
    
      section-height--medium
    
      content-width--wide
    
    horizontal-alignment--center
    vertical-alignment--middle
    
    '
  
  data-section-id="6234b88f955e7c2945491268"
  
  data-controller="SectionWrapperController"
  data-current-styles="{
&quot;imageOverlayOpacity&quot;: 0.15,
&quot;backgroundWidth&quot;: &quot;background-width--full-bleed&quot;,
&quot;sectionHeight&quot;: &quot;section-height--medium&quot;,
&quot;customSectionHeight&quot;: 10,
&quot;horizontalAlignment&quot;: &quot;horizontal-alignment--center&quot;,
&quot;verticalAlignment&quot;: &quot;vertical-alignment--middle&quot;,
&quot;contentWidth&quot;: &quot;content-width--wide&quot;,
&quot;customContentWidth&quot;: 90,
&quot;backgroundColor&quot;: &quot;&quot;,
&quot;sectionTheme&quot;: &quot;&quot;,
&quot;sectionAnimation&quot;: &quot;none&quot;,
&quot;backgroundMode&quot;: &quot;image&quot;
}"
  data-current-context="{
&quot;video&quot;: {
&quot;playbackSpeed&quot;: 0.5,
&quot;filter&quot;: 1,
&quot;filterStrength&quot;: 0,
&quot;zoom&quot;: 0,
&quot;videoSourceProvider&quot;: &quot;none&quot;
},
&quot;backgroundImageId&quot;: null,
&quot;backgroundMediaEffect&quot;: null,
&quot;divider&quot;: null,
&quot;typeName&quot;: &quot;portfolio-grid-basic&quot;
}"
  data-animation="none"
  
>
  <div
    class="section-border"
    
  >
    <div class="section-background">
    
    </div>
  </div>
  <div
    class='content-wrapper'
    style='
      
    '
  >
    <div
      class="content"
      
    >
      
      <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-6234b88f955e7c2945491268"><div class="row sqs-row"><div class="col sqs-col-12 span-12"><div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-8052f48040b91da25163"><div class="sqs-block-content">

<div class="sqs-html-content">
  <h2 style="white-space:pre-wrap;">Personas</h2><p class="" style="white-space:pre-wrap;">It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.</p>
</div>

</div></div><div class="row sqs-row"><div class="col sqs-col-12 span-12"><div class="sqs-block image-block sqs-block-image" data-block-type="5" id="block-yui_3_17_2_1_1647621505134_8361"><div class="sqs-block-content">

    <div
        class="
          image-block-outer-wrapper
          layout-caption-below
          design-layout-inline
          combination-animation-site-default
          individual-animation-site-default
          individual-text-animation-site-default
        "
        data-test="image-block-inline-outer-wrapper"
    >

        <figure
            class="
              sqs-block-image-figure
              intrinsic
            "
            style="max-width:1416px;"
        >
          
          <div
              
              class="image-block-wrapper"
              data-animation-role="image"
              
          >
            <div class="sqs-image-shape-container-element
              
              has-aspect-ratio
            " style="
                position: relative;
                
                  padding-bottom:35.59321975708008%;
                
                overflow: hidden;-webkit-mask-image: -webkit-radial-gradient(white, black);
              "
              >
                
                <img data-stretch="false" data-src="https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622239088-PQUP4CJY05ZFGGKOP3H2/2022March18163438.png" data-image="https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622239088-PQUP4CJY05ZFGGKOP3H2/2022March18163438.png" data-image-dimensions="1416x504" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622239088-PQUP4CJY05ZFGGKOP3H2/2022March18163438.png" width="1416" height="504" alt="" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" style="display:block;object-fit: cover; width: 100%; height: 100%; object-position: 50% 50%" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622239088-PQUP4CJY05ZFGGKOP3H2/2022March18163438.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622239088-PQUP4CJY05ZFGGKOP3H2/2022March18163438.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622239088-PQUP4CJY05ZFGGKOP3H2/2022March18163438.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622239088-PQUP4CJY05ZFGGKOP3H2/2022March18163438.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622239088-PQUP4CJY05ZFGGKOP3H2/2022March18163438.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622239088-PQUP4CJY05ZFGGKOP3H2/2022March18163438.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622239088-PQUP4CJY05ZFGGKOP3H2/2022March18163438.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            </div>
          </div>
        
        </figure>
      
    </div>
  
</div></div></div><div class="col sqs-col-0 span-0"></div></div></div></div><div class="row sqs-row"><div class="col sqs-col-12 span-12"><div class="sqs-block image-block sqs-block-image" data-block-type="5" id="block-yui_3_17_2_1_1647621505134_7413"><div class="sqs-block-content">

    <div
        class="
          image-block-outer-wrapper
          layout-caption-below
          design-layout-inline
          combination-animation-site-default
          individual-animation-site-default
          individual-text-animation-site-default
        "
        data-test="image-block-inline-outer-wrapper"
    >

        <figure
            class="
              sqs-block-image-figure
              intrinsic
            "
            style="max-width:1245px;"
        >
          
          <div
              
              class="image-block-wrapper"
              data-animation-role="image"
              
          >
            <div class="sqs-image-shape-container-element
              
              has-aspect-ratio
            " style="
                position: relative;
                
                  padding-bottom:39.919677734375%;
                
                overflow: hidden;-webkit-mask-image: -webkit-radial-gradient(white, black);
              "
              >
                
                <img data-stretch="false" data-src="https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622221727-PS211NRD0N98XW7FYED8/2022March18163424.png" data-image="https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622221727-PS211NRD0N98XW7FYED8/2022March18163424.png" data-image-dimensions="1245x497" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622221727-PS211NRD0N98XW7FYED8/2022March18163424.png" width="1245" height="497" alt="" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" style="display:block;object-fit: cover; width: 100%; height: 100%; object-position: 50% 50%" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622221727-PS211NRD0N98XW7FYED8/2022March18163424.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622221727-PS211NRD0N98XW7FYED8/2022March18163424.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622221727-PS211NRD0N98XW7FYED8/2022March18163424.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622221727-PS211NRD0N98XW7FYED8/2022March18163424.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622221727-PS211NRD0N98XW7FYED8/2022March18163424.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622221727-PS211NRD0N98XW7FYED8/2022March18163424.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647622221727-PS211NRD0N98XW7FYED8/2022March18163424.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            </div>
          </div>
        
        </figure>
      
    </div>
  
</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

<section
  data-test="page-section"
  
  data-section-theme=""
  class='page-section 
    
      layout-engine-section
    
    background-width--full-bleed
    
      section-height--medium
    
      content-width--medium
    
    horizontal-alignment--center
    vertical-alignment--middle
    
    '
  
  data-section-id="6234bc6edef5ba4f05ca4508"
  
  data-controller="SectionWrapperController"
  data-current-styles="{
&quot;imageOverlayOpacity&quot;: 0.15,
&quot;backgroundWidth&quot;: &quot;background-width--full-bleed&quot;,
&quot;sectionHeight&quot;: &quot;section-height--medium&quot;,
&quot;horizontalAlignment&quot;: &quot;horizontal-alignment--center&quot;,
&quot;verticalAlignment&quot;: &quot;vertical-alignment--middle&quot;,
&quot;contentWidth&quot;: &quot;content-width--medium&quot;,
&quot;sectionAnimation&quot;: &quot;none&quot;,
&quot;backgroundMode&quot;: &quot;image&quot;
}"
  data-current-context="{
&quot;video&quot;: {
&quot;playbackSpeed&quot;: 0.5,
&quot;filter&quot;: 1,
&quot;filterStrength&quot;: 0,
&quot;zoom&quot;: 0,
&quot;videoSourceProvider&quot;: &quot;none&quot;
},
&quot;backgroundImageId&quot;: null,
&quot;backgroundMediaEffect&quot;: null,
&quot;divider&quot;: null,
&quot;typeName&quot;: &quot;portfolio-grid-basic&quot;
}"
  data-animation="none"
  
>
  <div
    class="section-border"
    
  >
    <div class="section-background">
    
    </div>
  </div>
  <div
    class='content-wrapper'
    style='
      
    '
  >
    <div
      class="content"
      
    >
      
      <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-6234bc6edef5ba4f05ca4508"><div class="row sqs-row"><div class="col sqs-col-12 span-12"><div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-e956ba75e71fa9d12e04"><div class="sqs-block-content">

<div class="sqs-html-content">
  <h2 style="white-space:pre-wrap;">Mini Content Style Guide</h2>
</div>

</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

<section
  data-test="page-section"
  
  data-section-theme=""
  class='page-section 
    
      layout-engine-section
    
    background-width--full-bleed
    
      section-height--medium
    
      content-width--medium
    
    horizontal-alignment--center
    vertical-alignment--middle
    
    '
  
  data-section-id="6234baccdef5ba4f05ca1532"
  
  data-controller="SectionWrapperController"
  data-current-styles="{
&quot;imageOverlayOpacity&quot;: 0.15,
&quot;backgroundWidth&quot;: &quot;background-width--full-bleed&quot;,
&quot;sectionHeight&quot;: &quot;section-height--medium&quot;,
&quot;horizontalAlignment&quot;: &quot;horizontal-alignment--center&quot;,
&quot;verticalAlignment&quot;: &quot;vertical-alignment--middle&quot;,
&quot;contentWidth&quot;: &quot;content-width--medium&quot;,
&quot;sectionAnimation&quot;: &quot;none&quot;,
&quot;backgroundMode&quot;: &quot;image&quot;
}"
  data-current-context="{
&quot;video&quot;: {
&quot;playbackSpeed&quot;: 0.5,
&quot;filter&quot;: 1,
&quot;filterStrength&quot;: 0,
&quot;zoom&quot;: 0,
&quot;videoSourceProvider&quot;: &quot;none&quot;
},
&quot;backgroundImageId&quot;: null,
&quot;backgroundMediaEffect&quot;: null,
&quot;divider&quot;: null,
&quot;typeName&quot;: &quot;portfolio-grid-basic&quot;
}"
  data-animation="none"
  
>
  <div
    class="section-border"
    
  >
    <div class="section-background">
    
    </div>
  </div>
  <div
    class='content-wrapper'
    style='
      
    '
  >
    <div
      class="content"
      
    >
      
      <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-6234baccdef5ba4f05ca1532"><div class="row sqs-row"><div class="col sqs-col-12 span-12"><div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-e1700c49358d821569e6"><div class="sqs-block-content">

<div class="sqs-html-content">
  <h2 style="white-space:pre-wrap;">User Journey</h2>
</div>

</div></div><div class="sqs-block image-block sqs-block-image" data-block-type="5" id="block-yui_3_17_2_1_1647621505134_76774"><div class="sqs-block-content">

    <div
        class="
          image-block-outer-wrapper
          layout-caption-below
          design-layout-inline
          combination-animation-site-default
          individual-animation-site-default
          individual-text-animation-site-default
        "
        data-test="image-block-inline-outer-wrapper"
    >

        <figure
            class="
              sqs-block-image-figure
              intrinsic
            "
            style="max-width:1473px;"
        >
          
          <div
              
              class="image-block-wrapper"
              data-animation-role="image"
              
          >
            <div class="sqs-image-shape-container-element
              
              has-aspect-ratio
            " style="
                position: relative;
                
                  padding-bottom:44.670738220214844%;
                
                overflow: hidden;-webkit-mask-image: -webkit-radial-gradient(white, black);
              "
              >
                
                <img data-stretch="false" data-src="https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647623002174-BFPLC8M1IPS0T2R19J59/2022March18170305.png" data-image="https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647623002174-BFPLC8M1IPS0T2R19J59/2022March18170305.png" data-image-dimensions="1473x658" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647623002174-BFPLC8M1IPS0T2R19J59/2022March18170305.png" width="1473" height="658" alt="" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" style="display:block;object-fit: cover; width: 100%; height: 100%; object-position: 50% 50%" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647623002174-BFPLC8M1IPS0T2R19J59/2022March18170305.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647623002174-BFPLC8M1IPS0T2R19J59/2022March18170305.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647623002174-BFPLC8M1IPS0T2R19J59/2022March18170305.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647623002174-BFPLC8M1IPS0T2R19J59/2022March18170305.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647623002174-BFPLC8M1IPS0T2R19J59/2022March18170305.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647623002174-BFPLC8M1IPS0T2R19J59/2022March18170305.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/609bfac2d315c53237e65bd3/1647623002174-BFPLC8M1IPS0T2R19J59/2022March18170305.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            </div>
          </div>
        
        </figure>
      
    </div>
  
</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

<section
  data-test="page-section"
  
  data-section-theme=""
  class='page-section 
    
      layout-engine-section
    
    background-width--full-bleed
    
      section-height--medium
    
      content-width--wide
    
    horizontal-alignment--center
    vertical-alignment--middle
    
    '
  
  data-section-id="6234b946363e0274e2fae222"
  
  data-controller="SectionWrapperController"
  data-current-styles="{
&quot;imageOverlayOpacity&quot;: 0.15,
&quot;backgroundWidth&quot;: &quot;background-width--full-bleed&quot;,
&quot;sectionHeight&quot;: &quot;section-height--medium&quot;,
&quot;customSectionHeight&quot;: 10,
&quot;horizontalAlignment&quot;: &quot;horizontal-alignment--center&quot;,
&quot;verticalAlignment&quot;: &quot;vertical-alignment--middle&quot;,
&quot;contentWidth&quot;: &quot;content-width--wide&quot;,
&quot;customContentWidth&quot;: 90,
&quot;backgroundColor&quot;: &quot;&quot;,
&quot;sectionTheme&quot;: &quot;&quot;,
&quot;sectionAnimation&quot;: &quot;none&quot;,
&quot;backgroundMode&quot;: &quot;image&quot;
}"
  data-current-context="{
&quot;video&quot;: {
&quot;playbackSpeed&quot;: 0.5,
&quot;filter&quot;: 1,
&quot;filterStrength&quot;: 0,
&quot;zoom&quot;: 0,
&quot;videoSourceProvider&quot;: &quot;none&quot;
},
&quot;backgroundImageId&quot;: null,
&quot;backgroundMediaEffect&quot;: null,
&quot;divider&quot;: null,
&quot;typeName&quot;: &quot;portfolio-grid-basic&quot;
}"
  data-animation="none"
  
>
  <div
    class="section-border"
    
  >
    <div class="section-background">
    
    </div>
  </div>
  <div
    class='content-wrapper'
    style='
      
    '
  >
    <div
      class="content"
      
    >
      
      <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-6234b946363e0274e2fae222"><div class="row sqs-row"><div class="col sqs-col-12 span-12"><div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-45883c8127ad3d709e8f"><div class="sqs-block-content">

<div class="sqs-html-content">
  <h2 style="white-space:pre-wrap;">Screens</h2><p class="" style="white-space:pre-wrap;">It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.</p>
</div>

</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

<section
  data-test="page-section"
  
  data-section-theme=""
  class='page-section 
    
      layout-engine-section
    
    background-width--full-bleed
    
      section-height--medium
    
      content-width--medium
    
    horizontal-alignment--center
    vertical-alignment--middle
    
    '
  
  data-section-id="6234b997eb50c07299e7ff09"
  
  data-controller="SectionWrapperController"
  data-current-styles="{
&quot;imageOverlayOpacity&quot;: 0.15,
&quot;backgroundWidth&quot;: &quot;background-width--full-bleed&quot;,
&quot;sectionHeight&quot;: &quot;section-height--medium&quot;,
&quot;horizontalAlignment&quot;: &quot;horizontal-alignment--center&quot;,
&quot;verticalAlignment&quot;: &quot;vertical-alignment--middle&quot;,
&quot;contentWidth&quot;: &quot;content-width--medium&quot;,
&quot;sectionAnimation&quot;: &quot;none&quot;,
&quot;backgroundMode&quot;: &quot;image&quot;
}"
  data-current-context="{
&quot;video&quot;: {
&quot;playbackSpeed&quot;: 0.5,
&quot;filter&quot;: 1,
&quot;filterStrength&quot;: 0,
&quot;zoom&quot;: 0,
&quot;videoSourceProvider&quot;: &quot;none&quot;
},
&quot;backgroundImageId&quot;: null,
&quot;backgroundMediaEffect&quot;: null,
&quot;divider&quot;: null,
&quot;typeName&quot;: &quot;portfolio-grid-basic&quot;
}"
  data-animation="none"
  
>
  <div
    class="section-border"
    
  >
    <div class="section-background">
    
    </div>
  </div>
  <div
    class='content-wrapper'
    style='
      
    '
  >
    <div
      class="content"
      
    >
      
      <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-6234b997eb50c07299e7ff09"><div class="row sqs-row"><div class="col sqs-col-12 span-12"><div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-faa6a418c98dd30e17ad"><div class="sqs-block-content">

<div class="sqs-html-content">
  <h2 style="white-space:pre-wrap;">User Testing</h2>
</div>

</div></div><div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-0b18e4962769db44b3f5"><div class="sqs-block-content"><iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="1050" height="600" src="https://docs.google.com/document/d/e/2PACX-1vRHl5D7nFBRPOxaNRbvCLpKJpRWIG2ChzZze0Cl-jmUsJKG9dbdta7PynIb8-tvUdeB__zUIh6TNMS5/pub?embedded=true"
Task: Create an e-commerce site

Skills:

BagMyBum - Mission Statement

Research Report

11-Star Experience

Feature List

User Interview Questions

Dynamic Voucher Codes @ Awin

Fiverr - UX Copy test
