Finish case study for project BAT UK Homepage Product Carousel

assets/scss/01-config/_mixins.scss

@@ -5,6 +5,7 @@
 
   &::-webkit-scrollbar-track {
     background-color: #e4e4e4;
+    background-color: transparent;
     border-radius: 100px;
   }
 

assets/scss/02-base/_global.scss

@@ -12,10 +12,10 @@ html {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
 
-  @media (min-width: 1024px) {
-    width: 100vw;
-    overflow-x: hidden;
-  }
+  // @media (min-width: 1024px) {
+  //   width: 100vw;
+  //   overflow-x: hidden;
+  // }
 }
 
 body {

assets/scss/02-base/_layouts.scss

@@ -20,6 +20,12 @@
     }
   }
 
+  &--700 {
+    @media (min-width: 732px) {
+      width: rem(700px);
+    }
+  }
+
   &--1200 {
     @media (min-width: 1232px) {
       width: rem(1200px);

assets/scss/03-components/_nuxt-content.scss

@@ -139,7 +139,7 @@
       display: block;
     }
 
-    .page-single-work & {
+    .l-main--work-slug & {
       display: none;
     }
   }

assets/scss/04-utilities/_spacing.scss

@@ -2,11 +2,23 @@
 margin
 ============================================*/
 
+.u-m-0 {
+  margin: 0;
+}
+
 .u-mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
+.u-ml-auto {
+  margin-left: auto;
+}
+
+.u-mr-auto {
+  margin-right: auto;
+}
+
 .u-my-16 {
   margin: rem(16px) 0;
 }
@@ -94,6 +106,10 @@ margin-right
 margin-bottom
 ============================================*/
 
+.u-mb-8 {
+  margin-bottom: rem(8px);
+}
+
 .u-mb-16 {
   margin-bottom: rem(16px);
 }

assets/scss/04-utilities/utilities.scss

@@ -44,6 +44,31 @@ text helpers
 flex helpers
 ============================================*/
 
+.u-d-flex,
+.u-d-f {
+  display: flex;
+}
+
+.u-fg-1 {
+  flex-grow: 1;
+}
+
+.u-fd-column {
+  flex-direction: column;
+}
+
+.u-ai-center {
+  align-items: center;
+}
+
+.u-jc-center {
+  justify-content: center;
+}
+
+/*============================================
+flex components
+============================================*/
+
 .u-space-between {
   display: flex;
   flex-wrap: wrap;
@@ -56,6 +81,26 @@ flex helpers
   }
 }
 
+/*============================================
+grid helpers
+============================================*/
+
+.u-d-grid {
+  display: grid;
+}
+
+.u-grid-2-columns {
+  grid-template-columns: 1fr 1fr;
+}
+
+.u-gap-16 {
+  gap: rem(16px);
+}
+
+.u-gap-32 {
+  gap: rem(32px);
+}
+
 /*============================================
 width
 ============================================*/
@@ -64,19 +109,16 @@ width
   width: 100%;
 }
 
-.u-mw-700 {
+.u-maxw-700 {
   max-width: rem(700px);
-  margin: 0 auto;
 }
 
-.u-mw-800 {
+.u-maxw-800 {
   max-width: rem(800px);
-  margin: 0 auto;
 }
 
-.u-mw-960 {
+.u-maxw-960 {
   max-width: rem(960px);
-  margin: 0 auto;
 }
 
 /*============================================

changelog.md

@@ -0,0 +1,9 @@
+# 02-May-24
+
+- Added .yarn.rc file and set it's ignore-engines field true
+
+It was necessary in order to get rid of GitHub actions error of fetching package mime.
+
+The error:
+
+error mime@4.0.3: The engine "node" is incompatible with this module. Expected version ">=16". Got "14.21.3"

components/global/MarkdownImg.vue

@@ -0,0 +1,24 @@
+<!--
+  Read more about how to create components and use in markdown file in here -> https://jamesdonnelly.dev/blog/adding-images-with-nuxt-content/
+-->
+
+<template>
+  <img :src="require(`~/assets/images/${this.src}`)" :alt="alt" />
+</template>
+
+<script>
+export default {
+  props: {
+    src: {
+      type: String,
+      required: true,
+    },
+    alt: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

content/work/aperfectspace.md

@@ -4,7 +4,7 @@ title: A Perfect Space
 highlight: A PSD to HTML conversion project.
 description: A Perfect Space is a digital locations platform based in Melbourne, Australia. I got invited via Upwork to build the HTML pages of the platform for both admin facing and user facing area. Later I also built some of the public facing pages including about-us, how-it-works, contact-us, team, and privacy policy page.
 type: Contract
-coverImg: aperfectspace-cover
+imgFolderName: aperfectspace
 featured: true
 url: https://aperfectspace-html.netlify.app/
 category:

content/work/bat-uk-homepage-product-carousel.md

@@ -0,0 +1,68 @@
+---
+createdAt: 22/09/2023
+title: BAT UK Homepage Product Carousel
+highlight: An A/B test hypothesis to perform on BAT UK site
+description:
+type: A/B Testing
+imgFolderName: bat-uk-homepage-product-carousel
+featured: true
+pagination: false
+url: https://www.vuse.com/gb/en/
+category:
+  - Site Templates
+  - Landing Page
+  - ab-testing
+tools:
+  - HTML
+  - SCSS
+  - JavaScript
+  - Adobe Target
+---
+
+<!-- Start Problem Section -->
+<div class="l-wrap">
+  <div class="u-my-48">
+  <div class="u-maxw-700">
+
+## The Problem
+
+The current website structure presents a discoverability challenge for users seeking best-selling products. While most traffic lands on the homepage, finding these products requires an additional step of navigating to a dedicated "collection" page. This extra step can lead to user frustration and abandonment, as some visitors may not be willing to invest the additional effort.
+
+## The Solutions
+
+To address the discoverability challenge and improve user experience, we implemented a strategic product carousel on the homepage. This carousel showcases a curated selection of best-selling products, allowing users to browse and interact with these high-performing items directly from the landing page.
+
+## The Results
+
+The final winning design resulted in:
+
+- 35% increase in add to basket
+- 12.3% uplift in product page views
+- 18% increase in checkout page visits
+- 11.6% increase in transactions
+- 5.2% increase in average order value
+
+  </div>
+  </div>
+</div>
+<!-- End Problem Section -->
+
+<!-- Start Control | Variation Section -->
+<div class="l-wrap l-wrap--fluid">
+  <div class="u-d-grid u-grid-2-columns u-gap-32">
+  <div class="c-control">
+    <h2>Control<h2>
+
+<MarkdownImg src="work/bat-uk-homepage-product-carousel/Control.png" alt="BAT UK Homepage Product Carousel Control"></MarkdownImg>
+
+  </div>
+
+  <div class="c-variation">
+    <h2>Variation<h2>
+
+<MarkdownImg src="work/bat-uk-homepage-product-carousel/Variation.png" alt="BAT UK Homepage Product Carousel Variation"></MarkdownImg>
+
+  </div>
+  </div>
+</div>
+<!-- End Control | Variation Section -->

content/work/cesppa-prototype.md

@@ -4,7 +4,7 @@ title: CESPPA Prototype
 highlight: First version of CESPPA homepage
 description: CESPPA prototype was the initial version of the cesppa.com website, designed and built by me.
 type: Contract
-coverImg: cesppa-prototype-cover
+imgFolderName: cesppa-prototype
 featured: true
 url: https://cesppa-prototype.netlify.app/
 category:

content/work/cesppa-redesign-v2.md

@@ -4,7 +4,7 @@ title: CESPPA Redesign
 highlight: Second version of CESPPA homepage
 description: After completion the first version of cesppa.com landing page, I've hired by CESPPA for long term to recreate the landing page again with provided design.
 type: Contract
-coverImg: cesppa-redesign-v2-cover
+imgFolderName: cesppa-redesign-v2
 featured: true
 url: https://cesppa-redesign-v2.netlify.app/
 category:

content/work/jump-work-html.md

@@ -4,7 +4,7 @@ title: Jump Work
 highlight: An Invision to HTML project.
 description: I had the opportunity to create the first version of jump.work website back in 2017.
 type: Contract
-coverImg: jump-work-cover
+imgFolderName: jump-work
 featured: true
 url: https://jump-work-html.netlify.app/
 category:

content/work/personx-html.md

@@ -4,7 +4,7 @@ title: PersonX Portfolio Template
 highlight: A ThemeForest item.
 description: PersonX is a modern looking personal template created using Bootstrap to sell on ThemeForest back in 2017 when I worked at CoderPixel.
 type: Job
-coverImg: personx-cover
+imgFolderName: personx
 featured: true
 url: https://saabbir.gitlab.io/personx-themeforest-live/
 category:

content/work/pragmaticworks-redesign.md

@@ -3,7 +3,7 @@ createdAt: 01/09/2021
 title: Pragmaticworks Redesign
 highlight: A complete redesign of pragmaticworks.com
 type: Contract
-coverImg: pragmaticworks-redesign-cover
+imgFolderName: pragmaticworks-redesign
 featured: true
 url: https://pragmaticworks-redesign.netlify.app/
 category:

pages/work/_slug.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="l-main page-single-work">
+  <div class="l-main l-main--work-slug">
     <div class="u-py-32">
+      <!-- Portfolio header and stats -->
       <div class="l-wrap">
         <div class="c-portfolio">
           <div class="c-portfolio__header">
@@ -35,7 +36,9 @@
         </div>
       </div>
       <!-- /.l-wrap -->
-      <div class="l-wrap l-wrap--1200 l-wrap--1600">
+
+      <!-- Portfolio cover image -->
+      <div v-if="work.coverImg" class="l-wrap l-wrap--1200 l-wrap--1600">
         <div class="c-portfolio__cover-image">
           <picture>
             <source
@@ -54,13 +57,19 @@
         </div>
       </div>
       <!-- /.l-wrap--1600 -->
+
+      <!-- Nuxt content -->
       <div class="nuxt-content-wrapper">
         <nuxt-content :document="work"></nuxt-content>
       </div>
-      <div class="u-my-32">
+
+      <!-- Horizontal line -->
+      <div v-if="work.pagination" class="u-my-32">
         <hr />
       </div>
-      <div class="">
+
+      <!-- Pagination -->
+      <div v-if="work.pagination" class="">
         <div class="l-wrap">
           <Pagination
             routeName="work-slug"