{"id":25,"date":"2019-03-26T08:41:31","date_gmt":"2019-03-26T08:41:31","guid":{"rendered":"https:\/\/demo.cocobasic.com\/pekko-wp\/?post_type=portfolio&#038;p=25"},"modified":"2025-05-17T15:05:59","modified_gmt":"2025-05-17T15:05:59","slug":"session-item","status":"publish","type":"portfolio","link":"https:\/\/pattarawitg.com\/?portfolio=session-item","title":{"rendered":"E-commerce Redesign"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"25\" class=\"elementor elementor-25\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-40dcf27 e-flex e-con-boxed e-con e-parent\" data-id=\"40dcf27\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2101f42 elementor-widget elementor-widget-text-editor\" data-id=\"2101f42\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 08-12-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p><span style=\"color: #666666; font-size: 22px; background-color: #000000;\">The project involved redesigning the client&#8217;s German e-commerce platform, which operates both online and across 100+ physical stores. The redesign was guided by the Shopware framework, a platform for modern commerce solutions. The challenge lay in understanding how the existing site functions while working within the constraints of the Shopware theme, which has technical limitations but offers robust e-commerce capabilities<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-12f23b2 e-flex e-con-boxed e-con e-parent\" data-id=\"12f23b2\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4cf2620 elementor-widget elementor-widget-spacer\" data-id=\"4cf2620\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 08-12-2023 *\/\n.elementor-column .elementor-spacer-inner{height:var(--spacer-size)}.e-con{--container-widget-width:100%}.e-con-inner>.elementor-widget-spacer,.e-con>.elementor-widget-spacer{width:var(--container-widget-width,var(--spacer-size));--align-self:var(--container-widget-align-self,initial);--flex-shrink:0}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container,.e-con>.elementor-widget-spacer>.elementor-widget-container{height:100%;width:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer{height:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner{height:var(--container-widget-height,var(--spacer-size))}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty,.e-con>.elementor-widget-spacer.elementor-widget-empty{position:relative;min-height:22px;min-width:22px}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon,.e-con>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;padding:0;width:22px;height:22px}<\/style>\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-25a4384 e-flex e-con-boxed e-con e-parent\" data-id=\"25a4384\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b17e097 elementor-widget elementor-widget-image\" data-id=\"b17e097\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 08-12-2023 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-4-1024x768.png\" class=\"attachment-large size-large wp-image-449\" alt=\"\" srcset=\"https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-4-1024x768.png 1024w, https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-4-300x225.png 300w, https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-4-768x576.png 768w, https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-4-1536x1152.png 1536w, https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-4.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-06afa30 e-flex e-con-boxed e-con e-parent\" data-id=\"06afa30\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-86447fa elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"86447fa\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 08-12-2023 *\/\n.elementor-widget-divider{--divider-border-style:none;--divider-border-width:1px;--divider-color:#0c0d0e;--divider-icon-size:20px;--divider-element-spacing:10px;--divider-pattern-height:24px;--divider-pattern-size:20px;--divider-pattern-url:none;--divider-pattern-repeat:repeat-x}.elementor-widget-divider .elementor-divider{display:flex}.elementor-widget-divider .elementor-divider__text{font-size:15px;line-height:1;max-width:95%}.elementor-widget-divider .elementor-divider__element{margin:0 var(--divider-element-spacing);flex-shrink:0}.elementor-widget-divider .elementor-icon{font-size:var(--divider-icon-size)}.elementor-widget-divider .elementor-divider-separator{display:flex;margin:0;direction:ltr}.elementor-widget-divider--view-line_icon .elementor-divider-separator,.elementor-widget-divider--view-line_text .elementor-divider-separator{align-items:center}.elementor-widget-divider--view-line_icon .elementor-divider-separator:after,.elementor-widget-divider--view-line_icon .elementor-divider-separator:before,.elementor-widget-divider--view-line_text .elementor-divider-separator:after,.elementor-widget-divider--view-line_text .elementor-divider-separator:before{display:block;content:\"\";border-bottom:0;flex-grow:1;border-top:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--element-align-left .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-left .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-left .elementor-divider__element{margin-left:0}.elementor-widget-divider--element-align-right .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-right .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-right .elementor-divider__element{margin-right:0}.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator{border-top:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--separator-type-pattern{--divider-border-style:none}.elementor-widget-divider--separator-type-pattern.elementor-widget-divider--view-line .elementor-divider-separator,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:after,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:before,.elementor-widget-divider--separator-type-pattern:not([class*=elementor-widget-divider--view]) .elementor-divider-separator{width:100%;min-height:var(--divider-pattern-height);-webkit-mask-size:var(--divider-pattern-size) 100%;mask-size:var(--divider-pattern-size) 100%;-webkit-mask-repeat:var(--divider-pattern-repeat);mask-repeat:var(--divider-pattern-repeat);background-color:var(--divider-color);-webkit-mask-image:var(--divider-pattern-url);mask-image:var(--divider-pattern-url)}.elementor-widget-divider--no-spacing{--divider-pattern-size:auto}.elementor-widget-divider--bg-round{--divider-pattern-repeat:round}.rtl .elementor-widget-divider .elementor-divider__text{direction:rtl}.e-con-inner>.elementor-widget-divider,.e-con>.elementor-widget-divider{width:var(--container-widget-width,100%);--flex-grow:var(--container-widget-flex-grow)}<\/style>\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-682f036 e-flex e-con-boxed e-con e-parent\" data-id=\"682f036\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3c7d06c elementor-widget elementor-widget-heading\" data-id=\"3c7d06c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 08-12-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h6 class=\"elementor-heading-title elementor-size-default\"><strong style=\"font-size: 16px; background-color: rgb(0, 0, 0); text-align: start; white-space-collapse: collapse;\">What is Shopware?<\/strong><span style=\"font-size: 16px; background-color: rgb(0, 0, 0); font-weight: 400; text-align: start; white-space-collapse: collapse;\">&nbsp;Shopware is an open-source platform for e-commerce that offers flexibility, scalability, and customization options. It allows businesses to create tailored shopping experiences while keeping development efforts minimal by utilizing its built-in functionalities. However, due to its structured framework, designers need to work within the bounds of existing components to avoid unnecessary customization and complexity.<\/span><\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1a59106 e-flex e-con-boxed e-con e-parent\" data-id=\"1a59106\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-128fb74 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"128fb74\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-29ff821 e-flex e-con-boxed e-con e-parent\" data-id=\"29ff821\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-031d4f7 elementor-widget elementor-widget-heading\" data-id=\"031d4f7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Digital Brochure Experience<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-47f73ff e-flex e-con-boxed e-con e-parent\" data-id=\"47f73ff\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5913c31 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"5913c31\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fa068e6 e-flex e-con-boxed e-con e-parent\" data-id=\"fa068e6\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7829d26 elementor-widget elementor-widget-video\" data-id=\"7829d26\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 08-12-2023 *\/\n.elementor-widget-video .elementor-widget-container{overflow:hidden;transform:translateZ(0)}.elementor-widget-video .elementor-wrapper{aspect-ratio:var(--video-aspect-ratio)}.elementor-widget-video .elementor-wrapper iframe,.elementor-widget-video .elementor-wrapper video{height:100%;width:100%;display:flex;border:none;background-color:#000}@supports not (aspect-ratio:1\/1){.elementor-widget-video .elementor-wrapper{position:relative;overflow:hidden;height:0;padding-bottom:calc(100% \/ var(--video-aspect-ratio))}.elementor-widget-video .elementor-wrapper iframe,.elementor-widget-video .elementor-wrapper video{position:absolute;top:0;right:0;bottom:0;left:0}}.elementor-widget-video .elementor-open-inline .elementor-custom-embed-image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:50%}.elementor-widget-video .elementor-custom-embed-image-overlay{cursor:pointer;text-align:center}.elementor-widget-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play i{opacity:1}.elementor-widget-video .elementor-custom-embed-image-overlay img{display:block;width:100%;aspect-ratio:var(--video-aspect-ratio);-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center}@supports not (aspect-ratio:1\/1){.elementor-widget-video .elementor-custom-embed-image-overlay{position:relative;overflow:hidden;height:0;padding-bottom:calc(100% \/ var(--video-aspect-ratio))}.elementor-widget-video .elementor-custom-embed-image-overlay img{position:absolute;top:0;right:0;bottom:0;left:0}}.elementor-widget-video .e-hosted-video .elementor-video{-o-object-fit:cover;object-fit:cover}.e-con-inner>.elementor-widget-video,.e-con>.elementor-widget-video{width:var(--container-widget-width);--flex-grow:var(--container-widget-flex-grow)}<\/style>\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/Brochure-1.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0d8c478 e-flex e-con-boxed e-con e-parent\" data-id=\"0d8c478\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9df6596 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"9df6596\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7a46bf8 e-flex e-con-boxed e-con e-parent\" data-id=\"7a46bf8\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37238d7 elementor-widget elementor-widget-text-editor\" data-id=\"37238d7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong>Challenge<\/strong>: The physical brochure, delivered to homes, was driving significant conversions. However, the digital version on the website had major usability issues\u2014unclickable items, broken links, and a high bounce rate. The goal was to optimize this brochure to replicate the physical shopping experience while addressing the user pain points.<\/p><p><strong>Solution<\/strong>: Using the <strong>Skeuomorphism<\/strong> design principle, I replicated the tactile experience of browsing a physical brochure. This minimized the need for users to adapt to a new digital interface. To enhance backend functionality, I introduced a bulk item selection feature connected to the ERP system, enabling the team to link products efficiently. Instead of selecting each item individually, a modal displayed all listed items, simplifying the process.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-802c9b2 e-flex e-con-boxed e-con e-parent\" data-id=\"802c9b2\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-160f4f4 elementor-widget elementor-widget-spacer\" data-id=\"160f4f4\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9b89c21 e-flex e-con-boxed e-con e-parent\" data-id=\"9b89c21\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0603431 elementor-widget elementor-widget-heading\" data-id=\"0603431\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Shopware-Based Redesign<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bfe4804 e-flex e-con-boxed e-con e-parent\" data-id=\"bfe4804\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b30f7e elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"5b30f7e\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4362a01 e-flex e-con-boxed e-con e-parent\" data-id=\"4362a01\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-f5ebedd e-con-full e-flex e-con e-child\" data-id=\"f5ebedd\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-07ff9f1 elementor-widget elementor-widget-video\" data-id=\"07ff9f1\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/Home-1.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e91ee8b e-con-full e-flex e-con e-child\" data-id=\"e91ee8b\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd263ba elementor-widget elementor-widget-video\" data-id=\"cd263ba\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/Zum-Garten.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5cb7b15 e-flex e-con-boxed e-con e-parent\" data-id=\"5cb7b15\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd5e6cd elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"fd5e6cd\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-de0814f e-flex e-con-boxed e-con e-parent\" data-id=\"de0814f\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-490bf2d elementor-widget elementor-widget-text-editor\" data-id=\"490bf2d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong>Challenge<\/strong>:\u00a0<span style=\"font-size: 16px; text-align: var(--text-align);\">The existing design of the client\u2019s website needed significant improvements to enhance user experience. However, the new design had to fit within the structure of the Shopware theme, limiting customization options. With a 14-day deadline and only myself handling the revamp, efficiency was essential.<\/span><\/p><p><strong>Solution<\/strong>: I conducted in-depth research on the Shopware theme to ensure that all necessary UI components were present. This allowed me to minimize custom work and focus on adapting the existing theme to the client\u2019s branding (CI). The design was optimized to fit seamlessly with Shopware&#8217;s built-in features, ensuring a cohesive user experience while staying within the platform&#8217;s limits.<span style=\"font-size: 16px; text-align: var(--text-align);\"><br \/><\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-239163a e-flex e-con-boxed e-con e-parent\" data-id=\"239163a\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b79662e elementor-widget elementor-widget-spacer\" data-id=\"b79662e\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2a0a9b7 e-flex e-con-boxed e-con e-parent\" data-id=\"2a0a9b7\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6a2d0ab elementor-widget elementor-widget-heading\" data-id=\"6a2d0ab\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">User-Centric Design with Baymard Institute<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-393ec81 e-flex e-con-boxed e-con e-parent\" data-id=\"393ec81\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b04efb elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"8b04efb\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bd7eb61 e-flex e-con-boxed e-con e-parent\" data-id=\"bd7eb61\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-9af5375 e-con-full e-flex e-con e-child\" data-id=\"9af5375\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-412fa53 elementor-widget elementor-widget-image\" data-id=\"412fa53\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-2-1024x768.png\" class=\"attachment-large size-large wp-image-441\" alt=\"\" srcset=\"https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-2-1024x768.png 1024w, https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-2-300x225.png 300w, https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-2-768x576.png 768w, https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-2-1536x1152.png 1536w, https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-2.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2db3601 e-con-full e-flex e-con e-child\" data-id=\"2db3601\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da92bba elementor-widget elementor-widget-image\" data-id=\"da92bba\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-3-1024x768.png\" class=\"attachment-large size-large wp-image-442\" alt=\"\" srcset=\"https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-3-1024x768.png 1024w, https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-3-300x225.png 300w, https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-3-768x576.png 768w, https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-3-1536x1152.png 1536w, https:\/\/pattarawitg.com\/wp-content\/uploads\/2019\/03\/2-screens-shot-v.6-3.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a14741f e-flex e-con-boxed e-con e-parent\" data-id=\"a14741f\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d12cb82 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"d12cb82\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-eb60312 e-flex e-con-boxed e-con e-parent\" data-id=\"eb60312\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f14d4b elementor-widget elementor-widget-text-editor\" data-id=\"3f14d4b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p style=\"font-size: 16px; background-color: rgb(0, 0, 0);\"><strong style=\"font-size: 16px;\">Challenge<\/strong>: Jumping straight into UI design without a structured approach could lead to poor user experience and wasted time. I needed a solid guideline to ensure every design decision was backed by research and optimized for conversion.<\/p><p style=\"font-size: 16px; background-color: rgb(0, 0, 0);\"><strong style=\"font-size: 16px;\">Solution<\/strong>: I followed the&nbsp;<strong style=\"font-size: 16px;\">Baymard Institute&#8217;s<\/strong>&nbsp;guidelines\u2014an independent UX research company specializing in e-commerce usability. Baymard provides data-driven insights and benchmarks for designing high-conversion e-commerce sites. This allowed me to align the design with proven best practices, ensuring that each section of the site\u2014from navigation to product listings\u2014was user-friendly and effective in driving sales.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-603c422 e-flex e-con-boxed e-con e-parent\" data-id=\"603c422\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4909bf4 elementor-widget elementor-widget-spacer\" data-id=\"4909bf4\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a57e68c e-flex e-con-boxed e-con e-parent\" data-id=\"a57e68c\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d3bcf7f elementor-widget elementor-widget-heading\" data-id=\"d3bcf7f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a7e1977 e-flex e-con-boxed e-con e-parent\" data-id=\"a7e1977\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-460befa elementor-widget elementor-widget-text-editor\" data-id=\"460befa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The 14-day redesign of the client\u2019s website taught me the importance of thorough preparation. Rushing into Figma wouldn&#8217;t have sped up the process\u2014instead, researching Shopware themes and leveraging Baymard\u2019s e-commerce benchmarks ensured that I made informed design decisions quickly. By focusing on data, guidelines, and minimizing custom work, I was able to deliver an optimized website that improved user experience and addressed the client\u2019s needs effectively.<\/p><p><strong>Takeaways<\/strong>:<\/p><ul><li><strong>Understand technical limitations early<\/strong> (Shopware).<\/li><li><strong>Leverage research-backed design<\/strong> (Baymard Institute).<\/li><li><strong>Replicate familiar user experiences<\/strong> (Skeuomorphism for the brochure).<\/li><li><strong>Maximize efficiency by minimizing custom work<\/strong> within the chosen framework.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"featured_media":547,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/pattarawitg.com\/index.php?rest_route=\/wp\/v2\/portfolio\/25"}],"collection":[{"href":"https:\/\/pattarawitg.com\/index.php?rest_route=\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/pattarawitg.com\/index.php?rest_route=\/wp\/v2\/types\/portfolio"}],"replies":[{"embeddable":true,"href":"https:\/\/pattarawitg.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25"}],"version-history":[{"count":29,"href":"https:\/\/pattarawitg.com\/index.php?rest_route=\/wp\/v2\/portfolio\/25\/revisions"}],"predecessor-version":[{"id":515,"href":"https:\/\/pattarawitg.com\/index.php?rest_route=\/wp\/v2\/portfolio\/25\/revisions\/515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pattarawitg.com\/index.php?rest_route=\/wp\/v2\/media\/547"}],"wp:attachment":[{"href":"https:\/\/pattarawitg.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}