[{"data":1,"prerenderedAt":462},["ShallowReactive",2],{"work-list":3},[4,179],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"createdAt":11,"highlight":12,"type":13,"imgFolderName":14,"featured":15,"pagination":7,"publish":15,"url":16,"category":17,"tools":21,"body":26,"_type":173,"_id":174,"_source":175,"_file":176,"_stem":177,"_extension":178},"/work/bat-uk-homepage-product-carousel","work",false,"","Homepage Product Carousel",null,"22/09/2023","An A/B test hypothesis to perform on BAT UK site","A/B Testing","bat-uk-homepage-product-carousel",true,"https://www.vuse.com/gb/en/",[18,19,20],"Site Templates","Landing Page","ab-testing",[22,23,24,25],"HTML","SCSS","JavaScript","Adobe Target",{"type":27,"children":28,"toc":170},"root",[29,116],{"type":30,"tag":31,"props":32,"children":35},"element","div",{"className":33},[34],"l-wrap",[36,39],{"type":37,"value":38},"text","\n  ",{"type":30,"tag":31,"props":40,"children":43},{"className":41},[42],"u-my-64",[44,45],{"type":37,"value":38},{"type":30,"tag":31,"props":46,"children":50},{"className":47},[48,49],"u-maxw-700","u-mx-auto",[51,58,64,70,75,81,86],{"type":30,"tag":52,"props":53,"children":55},"h2",{"id":54},"the-problem",[56],{"type":37,"value":57},"The Problem",{"type":30,"tag":59,"props":60,"children":61},"p",{},[62],{"type":37,"value":63},"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.",{"type":30,"tag":52,"props":65,"children":67},{"id":66},"the-solution",[68],{"type":37,"value":69},"The Solution",{"type":30,"tag":59,"props":71,"children":72},{},[73],{"type":37,"value":74},"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.",{"type":30,"tag":52,"props":76,"children":78},{"id":77},"the-results",[79],{"type":37,"value":80},"The Results",{"type":30,"tag":59,"props":82,"children":83},{},[84],{"type":37,"value":85},"The final winning design resulted in:",{"type":30,"tag":87,"props":88,"children":89},"ul",{},[90,96,101,106,111],{"type":30,"tag":91,"props":92,"children":93},"li",{},[94],{"type":37,"value":95},"35% increase in add to basket",{"type":30,"tag":91,"props":97,"children":98},{},[99],{"type":37,"value":100},"12.3% uplift in product page views",{"type":30,"tag":91,"props":102,"children":103},{},[104],{"type":37,"value":105},"18% increase in checkout page visits",{"type":30,"tag":91,"props":107,"children":108},{},[109],{"type":37,"value":110},"11.6% increase in transactions",{"type":30,"tag":91,"props":112,"children":113},{},[114],{"type":37,"value":115},"5.2% increase in average order value",{"type":30,"tag":31,"props":117,"children":120},{"className":118},[34,119],"l-wrap--fluid",[121,122],{"type":37,"value":38},{"type":30,"tag":31,"props":123,"children":128},{"className":124},[125,126,127],"u-d-grid","u-grid-2-columns-from-500","u-gap-48-16",[129,130,150,151,169],{"type":37,"value":38},{"type":30,"tag":31,"props":131,"children":134},{"className":132},[133],"c-control",[135,137,143,149],{"type":37,"value":136},"\n    ",{"type":30,"tag":52,"props":138,"children":140},{"id":139},"control",[141],{"type":37,"value":142},"Control",{"type":30,"tag":144,"props":145,"children":148},"markdown-img",{"src":146,"alt":147},"work/bat-uk-homepage-product-carousel/Control.png","BAT UK Homepage Product Carousel Control",[],{"type":37,"value":38},{"type":37,"value":38},{"type":30,"tag":31,"props":152,"children":155},{"className":153},[154],"c-variation",[156,157,163,168],{"type":37,"value":136},{"type":30,"tag":52,"props":158,"children":160},{"id":159},"variation",[161],{"type":37,"value":162},"Variation",{"type":30,"tag":144,"props":164,"children":167},{"src":165,"alt":166},"work/bat-uk-homepage-product-carousel/Variation.png","BAT UK Homepage Product Carousel Variation",[],{"type":37,"value":38},{"type":37,"value":38},{"title":8,"searchDepth":171,"depth":171,"links":172},2,[],"markdown","content:work:bat-uk-homepage-product-carousel.md","content","work/bat-uk-homepage-product-carousel.md","work/bat-uk-homepage-product-carousel","md",{"_path":180,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":181,"description":182,"createdAt":183,"highlight":184,"type":185,"imgFolderName":186,"featured":15,"publish":15,"url":187,"category":188,"tools":189,"body":193,"_type":173,"_id":459,"_source":175,"_file":460,"_stem":461,"_extension":178},"/work/aperfectspace","A Perfect Space","A Perfect Space, a digital locations platform based in Melbourne, Australia, invited me via Upwork to build the HTML pages for both their admin and user interfaces. I subsequently built several public-facing pages, including About Us, How It Works, Contact Us, Team, and Privacy Policy.","01/09/2021","A PSD to HTML conversion project.","Contract","aperfectspace","https://aperfectspace-html.netlify.app/",[18],[22,190,23,24,191,192],"CSS","Bootstrap","Gulp",{"type":27,"children":194,"toc":457},[195,229,233,394],{"type":30,"tag":31,"props":196,"children":198},{"className":197},[34],[199],{"type":30,"tag":31,"props":200,"children":203},{"className":201},[202],"u-my-48",[204,211],{"type":30,"tag":205,"props":206,"children":208},"h3",{"id":207},"features",[209],{"type":37,"value":210},"Features",{"type":30,"tag":87,"props":212,"children":213},{},[214,219,224],{"type":30,"tag":91,"props":215,"children":216},{},[217],{"type":37,"value":218},"100% responsive and mobile-friendly",{"type":30,"tag":91,"props":220,"children":221},{},[222],{"type":37,"value":223},"All modern browsers and devices compatible",{"type":30,"tag":91,"props":225,"children":226},{},[227],{"type":37,"value":228},"Load time under 3s",{"type":30,"tag":230,"props":231,"children":232},"hr",{},[],{"type":30,"tag":234,"props":235,"children":238},"section",{"className":236},[237],"u-py-64",[239],{"type":30,"tag":31,"props":240,"children":243},{"className":241},[34,242],"l-wrap--700",[244,253],{"type":30,"tag":52,"props":245,"children":250},{"className":246,"id":249},[247,248],"t-display-2","u-mt-64","what-i-did",[251],{"type":37,"value":252},"What I did",{"type":30,"tag":31,"props":254,"children":257},{"className":255},[256],"c-feature-figure-container",[258,295,330,359],{"type":30,"tag":259,"props":260,"children":263},"work-feature",{"src":261,"alt":262},"svg/html5.svg","HTML5 Logo",[264,265,272,273],{"type":37,"value":38},{"type":30,"tag":266,"props":267,"children":269},"h4",{"id":268},"semantic-markup",[270],{"type":37,"value":271},"Semantic markup",{"type":37,"value":38},{"type":30,"tag":87,"props":274,"children":275},{},[276,277,282,283,288,289,294],{"type":37,"value":136},{"type":30,"tag":91,"props":278,"children":279},{},[280],{"type":37,"value":281},"Used HTML5 sectioning elements to give the markup meaning.",{"type":37,"value":136},{"type":30,"tag":91,"props":284,"children":285},{},[286],{"type":37,"value":287},"Validated the code using W3C HTML validator.",{"type":37,"value":136},{"type":30,"tag":91,"props":290,"children":291},{},[292],{"type":37,"value":293},"Coded with readability in mind by proper commenting and consistent indentation, spacing.",{"type":37,"value":38},{"type":30,"tag":259,"props":296,"children":299},{"src":297,"alt":298},"svg/sass.svg","Sass Logo",[300,301,307,308],{"type":37,"value":38},{"type":30,"tag":266,"props":302,"children":304},{"id":303},"css-architechture",[305],{"type":37,"value":306},"CSS architechture",{"type":37,"value":38},{"type":30,"tag":87,"props":309,"children":310},{},[311,312,317,318,323,324,329],{"type":37,"value":136},{"type":30,"tag":91,"props":313,"children":314},{},[315],{"type":37,"value":316},"Created a SCSS architecture by providing namespaces to CSS classes for better maintaiability.",{"type":37,"value":136},{"type":30,"tag":91,"props":319,"children":320},{},[321],{"type":37,"value":322},"Followed BEM naming conventions principles.",{"type":37,"value":136},{"type":30,"tag":91,"props":325,"children":326},{},[327],{"type":37,"value":328},"Organized SCSS partials in multiple directories and files for better modularity.",{"type":37,"value":38},{"type":30,"tag":259,"props":331,"children":334},{"src":332,"alt":333},"svg/javascript.svg","CSS3 Logo",[335,336,342,343],{"type":37,"value":38},{"type":30,"tag":266,"props":337,"children":339},{"id":338},"vanilla-javascript",[340],{"type":37,"value":341},"Vanilla JavaScript",{"type":37,"value":38},{"type":30,"tag":87,"props":344,"children":345},{},[346,347,352,353,358],{"type":37,"value":136},{"type":30,"tag":91,"props":348,"children":349},{},[350],{"type":37,"value":351},"Wrote vanilla JavaScript to manipulate the DOM.",{"type":37,"value":136},{"type":30,"tag":91,"props":354,"children":355},{},[356],{"type":37,"value":357},"Integrated couple of jQuery plugins including jquery-date-range-picker, jquery-time-picker.",{"type":37,"value":38},{"type":30,"tag":259,"props":360,"children":363},{"src":361,"alt":362},"svg/gulp.svg","Gulp Logo",[364,365,371,372],{"type":37,"value":38},{"type":30,"tag":266,"props":366,"children":368},{"id":367},"gulp-automation",[369],{"type":37,"value":370},"Gulp automation",{"type":37,"value":38},{"type":30,"tag":87,"props":373,"children":374},{},[375,376,381,382,387,388,393],{"type":37,"value":136},{"type":30,"tag":91,"props":377,"children":378},{},[379],{"type":37,"value":380},"Automated development tasks using Gulp.",{"type":37,"value":136},{"type":30,"tag":91,"props":383,"children":384},{},[385],{"type":37,"value":386},"Created tasks to minify HTML, CSS, and JavaScript.",{"type":37,"value":136},{"type":30,"tag":91,"props":389,"children":390},{},[391],{"type":37,"value":392},"Also, created task to optimize images and build production-ready files.",{"type":37,"value":38},{"type":30,"tag":234,"props":395,"children":396},{},[397],{"type":30,"tag":31,"props":398,"children":400},{"className":399},[34,242],[401,404],{"type":30,"tag":230,"props":402,"children":403},{},[],{"type":30,"tag":31,"props":405,"children":407},{"className":406},[202],[408],{"type":30,"tag":31,"props":409,"children":412},{"className":410},[411],"u-space-between",[413,437],{"type":30,"tag":31,"props":414,"children":415},{},[416,422],{"type":30,"tag":266,"props":417,"children":419},{"id":418},"client",[420],{"type":37,"value":421},"Client",{"type":30,"tag":59,"props":423,"children":424},{},[425],{"type":30,"tag":426,"props":427,"children":431},"a",{"href":428,"rel":429},"https://aperfectspace.com/",[430],"nofollow",[432],{"type":30,"tag":433,"props":434,"children":436},"markdown-image",{"src":435,"alt":181},"clients/aperfectspace.png",[],{"type":30,"tag":31,"props":438,"children":439},{},[440,446],{"type":30,"tag":266,"props":441,"children":443},{"id":442},"live-demo",[444],{"type":37,"value":445},"Live Demo",{"type":30,"tag":59,"props":447,"children":448},{},[449],{"type":30,"tag":426,"props":450,"children":454},{"href":187,"className":451,"target":453},[452],"c-button","_blank",[455],{"type":37,"value":456},"Check Live Demo",{"title":8,"searchDepth":171,"depth":171,"links":458},[],"content:work:aperfectspace.md","work/aperfectspace.md","work/aperfectspace",1788788972197]