Case Study: CPO Revamps eCommerce and UX Design

Warning: Undefined array key "type" in Drupal\dxpr_builder\Service\DxprBuilderService->loadCmsElement() (line 612 of modules/contrib/dxpr_builder/src/Service/DxprBuilderService.php).

Drupal\dxpr_builder\Service\DxprBuilderService->loadCmsElement(Array, '', Array, Object) (Line: 1250)
Drupal\dxpr_builder\Service\DxprBuilderService->parseDocumentForCmsElements(Object, Array) (Line: 1085)
Drupal\dxpr_builder\Service\DxprBuilderService->parseForContent(Array, ) (Line: 333)
Drupal\dxpr_builder\Service\DxprBuilderService->updateHtml('<a data-cke-saved-href="/search" href="/search"></a><a class="az-button-content btn btn-primary btn-block" draggable="false" data-cke-saved-href="/contact-us" href="/contact-us" role="button">Let's Talk </a><ul class="language-switcher-language-url"><li><a draggable="false" data-cke-saved-href="/en-UKI" href="/en-UKI">United Kingdom</a></li><li><a draggable="false" data-cke-saved-href="/de" href="/de">DACH</a></li></ul>', ) (Line: 466)
Drupal\dxpr_builder\Plugin\Field\FieldFormatter\DxprBuilderFormatter->viewElements(Object, 'en') (Line: 91)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (Line: 268)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 339)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 281)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 36)
Drupal\block_content\BlockContentViewBuilder->viewMultiple(Array, 'full', NULL) (Line: 24)
Drupal\block_content\BlockContentViewBuilder->view(Object, 'full') (Line: 189)
Drupal\block_content\Plugin\Block\BlockContentBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array('Drupal\block\BlockViewBuilder::preRender', Array) (Line: 111)
Drupal\Core\Render\Renderer->doTrustedCallback('Drupal\block\BlockViewBuilder::preRender', Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 859)
Drupal\Core\Render\Renderer->doCallback('#pre_render', 'Drupal\block\BlockViewBuilder::preRender', Array) (Line: 421)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 493)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 240)
Drupal\Core\Render\Renderer->render(Array) (Line: 475)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 92)
__TwigTemplate_bd317ee531f8f4d48918a95a47930c87->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 379)
Twig\Template->render(Array) (Line: 38)
Twig\TemplateWrapper->render(Array) (Line: 39)
twig_render_template('themes/custom/visionet/templates/page.html.twig', Array) (Line: 348)
Drupal\Core\Theme\ThemeManager->render('page', Array) (Line: 480)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 240)
Drupal\Core\Render\Renderer->render(Array) (Line: 475)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 124)
__TwigTemplate_14a01c6ebb3394160545ed3d8d84ecaf->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 379)
Twig\Template->render(Array) (Line: 38)
Twig\TemplateWrapper->render(Array) (Line: 39)
twig_render_template('themes/custom/visionet/templates/layout/html.html.twig', Array) (Line: 348)
Drupal\Core\Theme\ThemeManager->render('html', Array) (Line: 480)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 240)
Drupal\Core\Render\Renderer->render(Array) (Line: 158)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 627)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 153)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 186)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle(Object, 1, 1) (Line: 32)
Drupal\big_pipe\StackMiddleware\ContentLength->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle(Object, 1, 1) (Line: 704)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

Warning: Undefined array key "type" in Drupal\dxpr_builder\Service\DxprBuilderService->loadCmsElement() (line 617 of modules/contrib/dxpr_builder/src/Service/DxprBuilderService.php).

Drupal\dxpr_builder\Service\DxprBuilderService->loadCmsElement(Array, '', Array, Object) (Line: 1250)
Drupal\dxpr_builder\Service\DxprBuilderService->parseDocumentForCmsElements(Object, Array) (Line: 1085)
Drupal\dxpr_builder\Service\DxprBuilderService->parseForContent(Array, ) (Line: 333)
Drupal\dxpr_builder\Service\DxprBuilderService->updateHtml('<a data-cke-saved-href="/search" href="/search"></a><a class="az-button-content btn btn-primary btn-block" draggable="false" data-cke-saved-href="/contact-us" href="/contact-us" role="button">Let's Talk </a><ul class="language-switcher-language-url"><li><a draggable="false" data-cke-saved-href="/en-UKI" href="/en-UKI">United Kingdom</a></li><li><a draggable="false" data-cke-saved-href="/de" href="/de">DACH</a></li></ul>', ) (Line: 466)
Drupal\dxpr_builder\Plugin\Field\FieldFormatter\DxprBuilderFormatter->viewElements(Object, 'en') (Line: 91)
Drupal\Core\Field\FormatterBase->view(Object, 'en') (Line: 268)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 339)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 281)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 36)
Drupal\block_content\BlockContentViewBuilder->viewMultiple(Array, 'full', NULL) (Line: 24)
Drupal\block_content\BlockContentViewBuilder->view(Object, 'full') (Line: 189)
Drupal\block_content\Plugin\Block\BlockContentBlock->build() (Line: 171)
Drupal\block\BlockViewBuilder::preRender(Array)
call_user_func_array('Drupal\block\BlockViewBuilder::preRender', Array) (Line: 111)
Drupal\Core\Render\Renderer->doTrustedCallback('Drupal\block\BlockViewBuilder::preRender', Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. See https://www.drupal.org/node/2966725', 'exception', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 859)
Drupal\Core\Render\Renderer->doCallback('#pre_render', 'Drupal\block\BlockViewBuilder::preRender', Array) (Line: 421)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 493)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 240)
Drupal\Core\Render\Renderer->render(Array) (Line: 475)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 92)
__TwigTemplate_bd317ee531f8f4d48918a95a47930c87->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 379)
Twig\Template->render(Array) (Line: 38)
Twig\TemplateWrapper->render(Array) (Line: 39)
twig_render_template('themes/custom/visionet/templates/page.html.twig', Array) (Line: 348)
Drupal\Core\Theme\ThemeManager->render('page', Array) (Line: 480)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 240)
Drupal\Core\Render\Renderer->render(Array) (Line: 475)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 124)
__TwigTemplate_14a01c6ebb3394160545ed3d8d84ecaf->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 379)
Twig\Template->render(Array) (Line: 38)
Twig\TemplateWrapper->render(Array) (Line: 39)
twig_render_template('themes/custom/visionet/templates/layout/html.html.twig', Array) (Line: 348)
Drupal\Core\Theme\ThemeManager->render('html', Array) (Line: 480)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 240)
Drupal\Core\Render\Renderer->render(Array) (Line: 158)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 627)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 153)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 186)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle(Object, 1, 1) (Line: 32)
Drupal\big_pipe\StackMiddleware\ContentLength->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle(Object, 1, 1) (Line: 704)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

Download Form

Featured Image

Overview Visionet used the Salesforce platform to build a better web and mobile experience for CPO that features enhanced navigation and search, and more vivid and memorable branding with a unique personality.

Challenges

CPO is a large tool retailer in the US, but their eCommerce site had recently been struggling to break even.

The site’s user experience favored shoppers that already knew which specific products they needed and didn’t actively encourage more exploratory catalog browsing. However, enhancing the site’s user experience required significant changes to the existing site code

The eCommerce site was based on a very old version of Demandware. To achieve a best-in-class user experience would have required major redevelopment or a complete platform upgrade.

Despite being highly capable and experienced, the CPO eCommerce team was understaffed and overwhelmed with keeping their large site running. They didn’t have enough time to consider strategic site improvements.

Forced to focus on short-term challenges, the CPO team hadn’t been actively measuring or setting targets for key metrics like bounce rate, CTR, AOV, or conversions. They rarely performed A/B testing on campaigns or site changes.

Crafting an effective, data-driven plan CPO’s eCommerce success was being hindered by technology limitations, operational inefficiency, poor visibility into site performance, and its small team size.

To address these challenges, Visionet performed a thorough assessment of their requirements, including customer interviews, competitor analysis, alignment with UX best practices, and ROI justifications.

We recommended that CPO begin their site revamp by improving their mobile experience using Salesforce Storefront Reference Architecture (SFRA). We suggested they broaden their target audience from just 1 ideal customer persona to their top 3 buyer personas. We also stressed the importance of baking world-class SEO into their eCommerce site to increase qualified organic traffic.

Solution

Setting measurable, achievable goals
Visionet determined that with the right improvements, CPO could easily grow their YOY eCommerce revenue by at least14%, and possibly as high as 25%. By increasing engagement and session length, and keeping bounce rate under control, their conversion rate could increase by 25-40%.

With these target metrics in mind, we aimed to return the site to profitability by increasing conversion, AOV, customer retention, and repeat business

Best-in-class UX design and technology implementation
To achieve these goals, Visionet used Salesforce Commerce Cloud and SFRA to build a better web and mobile experience for CPO. The new site featured more vivid and memorable branding that gave the site a unique personality. Enhancements to navigation and search helped customers find the products they needed quickly and easily. The new site’s personalized, customer-responsive feature set was in line with modern shoppers’ expectations.

From an operational and administrative standpoint, the new CPO eCommerce site was much easier to maintain and required less manual effort by the eCommerce team. Access to more advanced analytics and business intelligence helped CPO deepen their understanding of their customers’ needs.

The results of CPO choosing Visionet and Salesforce? A sustainable, profitable eCommerce site.
Within 6 months of launching their redesigned eCommerce site, CPO has seen its online KPIs increase dramatically.

eCommerce revenue grew 20.8% and conversions increased by 29.4%. A 9.8% increase in session duration and a 7.9% lower bounce rate indicate that CPO’s customers are loving their revamped online experience.

Now, CPO proudly calls itself “America’s leading online tool retailer”.

CPO’s new eCommerce site showcases Visionet’s craftsmanship, and demonstrates that Salesforce Commerce Cloud and SFRA are the tools for successful online commerce.

Insights Categories

Case Studies

Estimated Time

4 min read

Speak to a Visionet Expert

Discover how Visionet can help you produce tangible business results using digital technology

Challenges

Solution

Speak to a Visionet Expert

Services

Products

Quick Links

Contact

CPO Revamps eCommerce and User Experience

Error message

Challenges

Solution

Speak to a Visionet Expert

Services

Products

Quick Links

Contact