Though beauty chain Sephora is widely viewed as a disruptor when it comes to digital retailing, one place where they lagged behind other eCommerce sites was in the poorly designed, badly architected and overall confusing checkout flow.<\/p>\n
I led the UX design team’s efforts to research user pain points, understand best practices, conduct benchmark studies of our competitors’ checkout flow, and work closely with product management to ideate and iterate on solutions.<\/p>\n<\/div>
We ranked #10 out of 50 sites they studied*<\/p>\n<\/div><\/li>
Our overall score increased by 43%<\/p>\n<\/div><\/li>
We earned \u2018State of the Art\u2019 designations in 5 categories<\/p>\n<\/div><\/li>
Our new checkout flow adhered to 74 usability guidelines established by Baymard Institute<\/p>\n<\/div><\/li>
Default Values & Autocomplete<\/p>\n<\/div><\/li><\/ul>
*Baymard Institute’s Benchmark Study on eCommerce Checkout flows<\/a><\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>Pain Points<\/div><\/div><\/div><\/div><\/div>Sephora\u2019s Checkout UX scored an\u00a0overall performance of 251\u00a0<\/strong>on the Baymard Institute’s cart and checkout benchmark<\/a>.\u00a0Some of Sephora’s biggest checkout usability issues were due to<\/p>\n\nPoor Layout<\/li>\nBroken Focus<\/li>\nBroken Data Input<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/div>250<\/div><\/div><\/div><\/div>Baymard score before redesign<\/h5><\/div><\/div><\/div><\/div><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>Design Strategy<\/div><\/div><\/div><\/div><\/div><\/i><\/span><\/div>Benchmark studies<\/div><\/div><\/div><\/div><\/div><\/i><\/span><\/div>HCI and cutting-edge best practices<\/div><\/div><\/div><\/div><\/div><\/i><\/span><\/div>Analytics data for drop-offs and abandoned carts<\/div><\/div><\/div><\/div><\/div><\/i><\/span><\/div>Iterations and testing<\/div><\/div><\/div><\/div><\/div><\/i><\/span><\/div>Align with stakeholders<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>Usability Testing<\/h4>75 subjects | functional prototype | Think Aloud protocol<\/div><\/div>\nGoal: to examine the full breadth of checkout behavior & present issues most likely to cause abandonment.<\/p>\n<\/div><\/div><\/div><\/div><\/div>Benchmarking<\/h4>Usability benchmark of main competitors<\/div><\/div>\nUsing 134 checkout usability guidelines from:\u00a0Baymard usability tests<\/a>, we noted areas where our flow was sub-par.<\/p>\n<\/div><\/div><\/div><\/div><\/div>Quantitative<\/h4>3 rounds of A\/B testing with customers<\/div><\/div>\nWe tested multiple billing & shipping designs, iterated on user-friendly Captachs and used Google Analytics to understand customer behavior.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>Sephora Checkout Flow<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/i><\/div><\/i><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
Sephora\u2019s Checkout UX scored an\u00a0overall performance of 251\u00a0<\/strong>on the Baymard Institute’s cart and checkout benchmark<\/a>.\u00a0Some of Sephora’s biggest checkout usability issues were due to<\/p>\n\nPoor Layout<\/li>\nBroken Focus<\/li>\nBroken Data Input<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/div>250<\/div><\/div><\/div><\/div>Baymard score before redesign<\/h5><\/div><\/div><\/div><\/div><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>Design Strategy<\/div><\/div><\/div><\/div><\/div><\/i><\/span><\/div>Benchmark studies<\/div><\/div><\/div><\/div><\/div><\/i><\/span><\/div>HCI and cutting-edge best practices<\/div><\/div><\/div><\/div><\/div><\/i><\/span><\/div>Analytics data for drop-offs and abandoned carts<\/div><\/div><\/div><\/div><\/div><\/i><\/span><\/div>Iterations and testing<\/div><\/div><\/div><\/div><\/div><\/i><\/span><\/div>Align with stakeholders<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>Usability Testing<\/h4>75 subjects | functional prototype | Think Aloud protocol<\/div><\/div>\nGoal: to examine the full breadth of checkout behavior & present issues most likely to cause abandonment.<\/p>\n<\/div><\/div><\/div><\/div><\/div>Benchmarking<\/h4>Usability benchmark of main competitors<\/div><\/div>\nUsing 134 checkout usability guidelines from:\u00a0Baymard usability tests<\/a>, we noted areas where our flow was sub-par.<\/p>\n<\/div><\/div><\/div><\/div><\/div>Quantitative<\/h4>3 rounds of A\/B testing with customers<\/div><\/div>\nWe tested multiple billing & shipping designs, iterated on user-friendly Captachs and used Google Analytics to understand customer behavior.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>Sephora Checkout Flow<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/i><\/div><\/i><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
Goal: to examine the full breadth of checkout behavior & present issues most likely to cause abandonment.<\/p>\n<\/div><\/div><\/div><\/div><\/div>
Using 134 checkout usability guidelines from:\u00a0Baymard usability tests<\/a>, we noted areas where our flow was sub-par.<\/p>\n<\/div><\/div><\/div><\/div><\/div>Quantitative<\/h4>3 rounds of A\/B testing with customers<\/div><\/div>\nWe tested multiple billing & shipping designs, iterated on user-friendly Captachs and used Google Analytics to understand customer behavior.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>Sephora Checkout Flow<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/i><\/div><\/i><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
We tested multiple billing & shipping designs, iterated on user-friendly Captachs and used Google Analytics to understand customer behavior.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>