{"id":2079,"date":"2023-10-12T17:17:59","date_gmt":"2023-10-12T16:17:59","guid":{"rendered":"https:\/\/joewhitby.com\/?page_id=2079"},"modified":"2024-06-24T14:32:52","modified_gmt":"2024-06-24T13:32:52","slug":"checkout","status":"publish","type":"page","link":"https:\/\/joewhitby.com\/index.php\/checkout\/","title":{"rendered":"Checkout"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2079\" class=\"elementor elementor-2079\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ed04da3 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"ed04da3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-308b1fe elementor-widget elementor-widget-spacer\" data-id=\"308b1fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c36b294 elementor-widget elementor-widget-spacer\" data-id=\"c36b294\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25c4d42 elementor-widget elementor-widget-heading\" data-id=\"25c4d42\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Redesigning Checkout<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39703dd elementor-widget elementor-widget-spacer\" data-id=\"39703dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b9200b elementor-widget elementor-widget-heading\" data-id=\"8b9200b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Streamlining a checkout experience to reduce bounce rate and increase conversions<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb7142a elementor-widget elementor-widget-spacer\" data-id=\"fb7142a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4fc3822 elementor-widget elementor-widget-image\" data-id=\"4fc3822\" data-element_type=\"widget\" data-e-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 fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"634\" src=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/Tooth-3-1024x634.png\" class=\"attachment-large size-large wp-image-3259\" alt=\"Checkout - Hero\" srcset=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/Tooth-3-1024x634.png 1024w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/Tooth-3-300x186.png 300w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/Tooth-3-768x475.png 768w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/Tooth-3-1536x951.png 1536w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/Tooth-3.png 1680w\" 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 class=\"elementor-element elementor-element-b462c0a elementor-widget elementor-widget-spacer\" data-id=\"b462c0a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\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\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-1409127 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"1409127\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-78a6b85 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"78a6b85\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1a05095 elementor-widget elementor-widget-text-editor\" data-id=\"1a05095\" data-element_type=\"widget\" data-e-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\t\t<p style=\"text-align: center;\"><strong>Duration<\/strong><\/p><p style=\"text-align: center;\">3 month project<\/p>\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-4fece6b e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"4fece6b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e39b8e6 elementor-widget elementor-widget-text-editor\" data-id=\"e39b8e6\" data-element_type=\"widget\" data-e-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\t\t<p style=\"text-align: center;\"><strong>My Role<\/strong><\/p><p style=\"text-align: center;\">Research, analysis, UX design, component library, user-testing.<\/p>\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-2fc208b e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"2fc208b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e76ba5 elementor-widget elementor-widget-text-editor\" data-id=\"7e76ba5\" data-element_type=\"widget\" data-e-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\t\t<p style=\"text-align: center;\"><strong>Team<\/strong><\/p><p style=\"text-align: center;\">2 Designers, 1 Product Manager, 8 Engineers<\/p>\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-d0949ea e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"d0949ea\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-234e3b3 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"234e3b3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf5709f elementor-widget elementor-widget-text-editor\" data-id=\"bf5709f\" data-element_type=\"widget\" data-e-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\t\t<h3><strong>The brief<\/strong><\/h3><p>We were tasked with re-designing the H&amp;B website checkout journey, from the basket page through to order confirmation.<\/p>\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-8374d12 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"8374d12\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c3d4e3d elementor-widget elementor-widget-text-editor\" data-id=\"c3d4e3d\" data-element_type=\"widget\" data-e-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\t\t<h3><strong>The problem<\/strong><\/h3><p>The current website took too many interactions and steps for a customer to complete an order. Decreasing the interactions and effort required, would hopefully decrease the bounce rate of customers. In turn bringing in more revenue to the business.<\/p>\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-c19ac06 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"c19ac06\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-10f3c40 elementor-widget elementor-widget-text-editor\" data-id=\"10f3c40\" data-element_type=\"widget\" data-e-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\t\t<h3><b>Understanding the customers needs and habits<\/b><\/h3><p>The goal of this project was to better understand our customers&#8217; needs and frustrations in relation to the online checkout process. To undergo this, we reviewed all customer feedback related to the checkout journey. We used a card-sorting technique to group all the feedback into themes to evaluate. This approach combined with research through Google Analytics let us know the typical quantities, payment and delivery methods for our customers.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e45445c elementor-widget elementor-widget-image\" data-id=\"e45445c\" data-element_type=\"widget\" data-e-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\t<a href=\"http:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/Checkout-1.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Checkout - Research\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzE1OCwidXJsIjoiaHR0cHM6XC9cL2pvZXdoaXRieS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjNcLzEwXC9DaGVja291dC0xLnBuZyJ9\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1024\" height=\"724\" src=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/Checkout-1-1024x724.png\" class=\"attachment-large size-large wp-image-3158\" alt=\"Checkout - Research\" srcset=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/Checkout-1-1024x724.png 1024w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/Checkout-1-300x212.png 300w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/Checkout-1-768x543.png 768w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/Checkout-1-1536x1085.png 1536w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/Checkout-1-2048x1447.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\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-741577b e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"741577b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-20368be e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"20368be\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53cdfd5 elementor-widget elementor-widget-image\" data-id=\"53cdfd5\" data-element_type=\"widget\" data-e-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\t<a href=\"http:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/User-flows-Checkout.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Checkout - Userflows\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzQwNCwidXJsIjoiaHR0cHM6XC9cL2pvZXdoaXRieS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjNcLzEwXC9Vc2VyLWZsb3dzLUNoZWNrb3V0LmpwZyJ9\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1024\" height=\"624\" src=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/User-flows-Checkout-1024x624.jpg\" class=\"attachment-large size-large wp-image-3404\" alt=\"Checkout - Userflows\" srcset=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/User-flows-Checkout-1024x624.jpg 1024w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/User-flows-Checkout-300x183.jpg 300w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/User-flows-Checkout-768x468.jpg 768w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/User-flows-Checkout-1536x936.jpg 1536w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/User-flows-Checkout-2048x1248.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\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-a611d78 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"a611d78\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-736c59e elementor-widget elementor-widget-text-editor\" data-id=\"736c59e\" data-element_type=\"widget\" data-e-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\t\t<h3><b>The competition and design patterns<\/b><\/h3><p>We used best practice guidelines in relation to an online checkout design, to identify our own areas for improvement. We expanded this research further by reviewing other ecommerce checkout experiences. Our primary goal for the project was streamlining the overall checkout journey. We measured the interaction count of our competitors, which was an ideal metric for viewing the length of an online journey. We began to analyse the shortest checkouts, to understand how they created such a frictionless experience. The best examples of these, we converted into user flow diagrams. This clearly illustrated the differences in the sequence and interactions of the journeys, which highlighted the most effective and creative examples.<\/p>\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-a6de438 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"a6de438\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-f102030 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"f102030\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0848a1a elementor-widget elementor-widget-text-editor\" data-id=\"0848a1a\" data-element_type=\"widget\" data-e-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\t\t<h3><b>User testing &amp; validating<\/b><\/h3><p>We based 3 low fidelity interactive prototypes off of the best examples from our competitor analysis. We tested all three designs, to understand how they performed with a variety of users. Users were given the goal of checking out as a guest and then asked:<\/p><ul><li aria-level=\"1\">How easy was it to checkout?<\/li><li aria-level=\"1\">If you found it difficult, what was the main reason for this?<\/li><li aria-level=\"1\">Are there any features missing that you\u2019d expect to see in a checkout?<\/li><\/ul><p>Our test criteria was to:<\/p><ul><li aria-level=\"1\">Compare user feedback and success rate to establish in broad terms which checkout style was most effective.<\/li><li aria-level=\"1\">Analyse the heatmaps to see how each screen was used, to inform further tests and design design decisions.<\/li><\/ul>\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-0e78c3b e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"0e78c3b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9e5b755 elementor-widget elementor-widget-image\" data-id=\"9e5b755\" data-element_type=\"widget\" data-e-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\t<a href=\"http:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/A6-2.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Checkout - Heatmaps\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzE3NSwidXJsIjoiaHR0cHM6XC9cL2pvZXdoaXRieS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjNcLzEwXC9BNi0yLnBuZyJ9\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"801\" src=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/A6-2-1024x801.png\" class=\"attachment-large size-large wp-image-3175\" alt=\"Checkout - Heatmaps\" srcset=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/A6-2-1024x801.png 1024w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/A6-2-300x235.png 300w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/A6-2-768x601.png 768w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/A6-2-1536x1201.png 1536w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/A6-2.png 1964w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\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-8278317 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"8278317\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-de3f679 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"de3f679\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a02b7d2 elementor-widget elementor-widget-text-editor\" data-id=\"a02b7d2\" data-element_type=\"widget\" data-e-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\t\t<h3><b>The design<\/b><\/h3><p>After establishing how each checkout performed. We were able to make the following initial decisions relating to the journeys, sequencing and styling. Generally speaking, we\u2019re taking the best bits from the best checkouts.<\/p><p>\u00a0<\/p><ul><li aria-level=\"1\">A streamlined user flow with 2x main sections.<\/li><li aria-level=\"1\">No sign-up wall. Prioritise guest checkout in line with Baymard research, with a lightweight account creation opportunity on the order confirmation page.<\/li><li aria-level=\"1\">Order summary always fully visible below the CTA.<\/li><li aria-level=\"1\">Promo codes can be entered at any point during checkout.<\/li><li aria-level=\"1\">Route back to the basket via a basket icon in the top corner of the checkout header<\/li><li aria-level=\"1\">Helpful info always available in the footer.<\/li><li aria-level=\"1\">Styling: Clear separation and hierarchy between sections, with horizontal lines used to separate further. Similar to Asos and consistent with the recent My Account designs.<\/li><li aria-level=\"1\">Security: Convey a greater impression that the checkout is a secure environment.<\/li><\/ul>\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-78e11b6 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"78e11b6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6818508 elementor-widget elementor-widget-image\" data-id=\"6818508\" data-element_type=\"widget\" data-e-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\t<a href=\"http:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/A6-2.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Checkout - Heatmaps\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzE3NSwidXJsIjoiaHR0cHM6XC9cL2pvZXdoaXRieS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjNcLzEwXC9BNi0yLnBuZyJ9\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"801\" src=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/A6-2-1024x801.png\" class=\"attachment-large size-large wp-image-3175\" alt=\"Checkout - Heatmaps\" srcset=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/A6-2-1024x801.png 1024w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/A6-2-300x235.png 300w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/A6-2-768x601.png 768w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/A6-2-1536x1201.png 1536w, https:\/\/joewhitby.com\/wp-content\/uploads\/2023\/10\/A6-2.png 1964w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\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-a593e7f e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"a593e7f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-214092e e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"214092e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-937e1cb elementor-widget elementor-widget-text-editor\" data-id=\"937e1cb\" data-element_type=\"widget\" data-e-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\t\t<p style=\"text-align: center;\"><strong><b>The outcome &amp; Learnings<\/b><\/strong><\/p><p style=\"text-align: center;\">Since the introduction of the redesigned journey for the checkout, the business has seen a improved UX through simplifying journeys and reduced interaction count; leading to reduced cart abandonment and increased conversion.<\/p>\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\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2f7d7e9 elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"2f7d7e9\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c14bb41\" data-id=\"c14bb41\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c4620eb elementor-widget elementor-widget-heading\" data-id=\"c4620eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">See more of my work<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-f454261 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"f454261\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-a3f8384\" data-id=\"a3f8384\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cd1e44d elementor-widget elementor-widget-image\" data-id=\"cd1e44d\" data-element_type=\"widget\" data-e-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\t<a href=\"https:\/\/joewhitby.com\/index.php\/self-scan-checkout\/\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"654\" src=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/SCO-1024x654.jpg\" class=\"attachment-large size-large wp-image-4224\" alt=\"\" srcset=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/SCO-1024x654.jpg 1024w, https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/SCO-300x192.jpg 300w, https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/SCO-768x491.jpg 768w, https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/SCO-1536x982.jpg 1536w, https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/SCO-2048x1309.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\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 class=\"elementor-element elementor-element-89f0d4c elementor-widget elementor-widget-heading\" data-id=\"89f0d4c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">H&amp;B <\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f11623 elementor-widget elementor-widget-text-editor\" data-id=\"4f11623\" data-element_type=\"widget\" data-e-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\t\t<h4>Self Scan Checkout<\/h4>\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<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-14f1b2c\" data-id=\"14f1b2c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bd5c29a elementor-widget elementor-widget-image\" data-id=\"bd5c29a\" data-element_type=\"widget\" data-e-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\t<a href=\"http:\/\/joewhitby.com\/index.php\/cerebro\/\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"654\" src=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/Cerebro1-1024x654.jpg\" class=\"attachment-large size-large wp-image-4216\" alt=\"\" srcset=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/Cerebro1-1024x654.jpg 1024w, https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/Cerebro1-300x192.jpg 300w, https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/Cerebro1-768x491.jpg 768w, https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/Cerebro1-1536x982.jpg 1536w, https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/Cerebro1-2048x1309.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\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 class=\"elementor-element elementor-element-bfc6a8d elementor-widget elementor-widget-heading\" data-id=\"bfc6a8d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">H&amp;B <\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b107fbc elementor-widget elementor-widget-text-editor\" data-id=\"b107fbc\" data-element_type=\"widget\" data-e-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\t\t<h4>Cerebro<\/h4>\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<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-1e35254\" data-id=\"1e35254\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3923778 elementor-widget elementor-widget-image\" data-id=\"3923778\" data-element_type=\"widget\" data-e-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\t<a href=\"https:\/\/joewhitby.com\/index.php\/tooth\/\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"634\" src=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/Tooth-1024x634.jpg\" class=\"attachment-large size-large wp-image-4299\" alt=\"\" srcset=\"https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/Tooth-1024x634.jpg 1024w, https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/Tooth-300x186.jpg 300w, https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/Tooth-768x476.jpg 768w, https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/Tooth-1536x951.jpg 1536w, https:\/\/joewhitby.com\/wp-content\/uploads\/2024\/06\/Tooth-2048x1268.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\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 class=\"elementor-element elementor-element-4958950 elementor-widget elementor-widget-heading\" data-id=\"4958950\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Eco Tooth<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81b3539 elementor-widget elementor-widget-text-editor\" data-id=\"81b3539\" data-element_type=\"widget\" data-e-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\t\t<h4>Tooth+<\/h4>\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<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Redesigning Checkout Streamlining a checkout experience to reduce bounce rate and increase conversions Duration 3 month project My Role Research, analysis, UX design, component library, user-testing. Team 2 Designers, 1 Product Manager, 8 Engineers The brief We were tasked with re-designing the H&amp;B website checkout journey, from the basket page through to order confirmation. The problem The current website took too many interactions and steps for a customer to complete an order. Decreasing the interactions and effort required, would hopefully decrease the bounce rate of customers. In turn bringing in more revenue to the business. Understanding the customers needs and habits The goal of this project was to better understand our customers&#8217; needs and frustrations in relation to the online checkout process. To undergo this, we reviewed all customer feedback related to the checkout journey. We used a card-sorting technique to group all the feedback into themes to evaluate. This approach combined with research through Google Analytics let us know the typical quantities, payment and delivery methods for our customers. The competition and design patterns We used best practice guidelines in relation to an online checkout design, to identify our own areas for improvement. We expanded this research further by reviewing other ecommerce checkout experiences. Our primary goal for the project was streamlining the overall checkout journey. We measured the interaction count of our competitors, which was an ideal metric for viewing the length of an online journey. We began to analyse the shortest checkouts, to understand how they created such a frictionless experience. The best examples of these, we converted into user flow diagrams. This clearly illustrated the differences in the sequence and interactions of the journeys, which highlighted the most effective and creative examples. User testing &amp; validating We based 3 low fidelity interactive prototypes off of the best examples from our competitor analysis. We tested all three designs, to understand how they performed with a variety of users. Users were given the goal of checking out as a guest and then asked: How easy was it to checkout? If you found it difficult, what was the main reason for this? Are there any features missing that you\u2019d expect to see in a checkout? Our test criteria was to: Compare user feedback and success rate to establish in broad terms which checkout style was most effective. Analyse the heatmaps to see how each screen was used, to inform further tests and design design decisions. The design After establishing how each checkout performed. We were able to make the following initial decisions relating to the journeys, sequencing and styling. Generally speaking, we\u2019re taking the best bits from the best checkouts. \u00a0 A streamlined user flow with 2x main sections. No sign-up wall. Prioritise guest checkout in line with Baymard research, with a lightweight account creation opportunity on the order confirmation page. Order summary always fully visible below the CTA. Promo codes can be entered at any point during checkout. Route back to the basket via a basket icon in the top corner of the checkout header Helpful info always available in the footer. Styling: Clear separation and hierarchy between sections, with horizontal lines used to separate further. Similar to Asos and consistent with the recent My Account designs. Security: Convey a greater impression that the checkout is a secure environment. The outcome &amp; Learnings Since the introduction of the redesigned journey for the checkout, the business has seen a improved UX through simplifying journeys and reduced interaction count; leading to reduced cart abandonment and increased conversion. See more of my work H&amp;B Self Scan Checkout H&amp;B Cerebro Eco Tooth Tooth+<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2079","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/joewhitby.com\/index.php\/wp-json\/wp\/v2\/pages\/2079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joewhitby.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/joewhitby.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/joewhitby.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joewhitby.com\/index.php\/wp-json\/wp\/v2\/comments?post=2079"}],"version-history":[{"count":112,"href":"https:\/\/joewhitby.com\/index.php\/wp-json\/wp\/v2\/pages\/2079\/revisions"}],"predecessor-version":[{"id":4860,"href":"https:\/\/joewhitby.com\/index.php\/wp-json\/wp\/v2\/pages\/2079\/revisions\/4860"}],"wp:attachment":[{"href":"https:\/\/joewhitby.com\/index.php\/wp-json\/wp\/v2\/media?parent=2079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}