Data Backed Redesign

Peak under the hood of an e-commerce site wide redesign for the viral beauty company, OLAPLEX

Problem

  • Website prioritizes desktop experience, yet 82.7% of visitors access via mobile.
  • 75% of users exit within initial fifth of mobile page.
  • Product, collection, and home pages contain oversized, repetitive modules with limited value.

Solution

  • Revamp website for mobile-first approach, guided by online store UX research, benchmarks, and onsite data.
  • Utilize Google Analytics and Microsoft Clarity to identify key improvement areas.
  • Prioritize displaying essential buyer details within the initial 25% of the page: product visuals, pricing, descriptions, shipping info, subscription options, social proof, and ATC.

Data & Mobile First

With the advent of smartphones, it is important that the mobile experience takes precedent over the desktop experience when designing layouts. Additionally, with limited attention spans, we need all the important details needed for a visitor to make a buying decision available as close to the top as possible.

By leveraging online research, benchmark analysis, and insights from OLAPLEX's data, I've meticulously annotated and pinpointed areas for improvement, proposing redesigns accordingly. Below illustrates the design journey we embarked on for enhancing the product and home pages, emphasizing a mobile-first approach with desktop optimization to ensue. We spent about 1 month on design and 1.5 months in development to follow. Refer to the key on the right for icon details.

Product Page Redesign Research - Mobile

Product Page Redesign Research - Desktop

Home Page Redesign Research - Mobile

Home Page Redesign Research - Desktop