Clorox DTC

Problem

As the business strategy shifts towards the DTC model, the need arises to add e-commerce capabilities to the existing Clorox website. The focus is on achieving seamless integration and enhancing the overall customer experience.

‍

Current State

The current Clorox website is built on Wordpress and primarily serves as a product education hub. However, for online purchases, customers are redirected to other retailers or local stores based on their location.

‍

‍

Identifying the needs

• Platforms
  While Clorox.com remains on Wordpress, the e-commerce experience will be predominantly built on the Magento front-end. This integration effort requires careful consideration and coordination.
  ‍
• Seamless experience
  With separate teams handling the Wordpress and e-commerce domains, it is crucial to deeply understand the customer journey and ensure smooth redirection between the two without any interruptions.
  ‍‍
• Focus on bundle experience
  Focus on bundle experience: User research indicates increased interest in bundling cleaning products. As a result, the business has identified bundling as a key focus for the MVP.

Ways of working

With multiple teams involved, there is a multitude of desired features for the new site. However, given the 6-month timeline, it is necessary to focus on the most essential features and align them with the project's goals.

‍

• Define and stick to the scope
  The scope for the e-commerce site's launch needs to be clearly defined, including the sellable products, bundle products, and a new "build your own bundle" experience. All other features will be considered for post-launch implementation.
  ‍
• Over communicate
  Effective communication is vital when managing multiple teams, including an agency managing the Wordpress site, a front-end engineering team in Ukraine, and the internal brand engagement team. Over-communicating ensures alignment and minimizes miscommunication.
  ‍
• Deliver in phases
  To efficiently handle the project's scale, the work is prioritized and delivered in phases. The focus is placed on individual pages such as the "product listing page" and "product details page" initially, followed by "checkout," "account," "emails," and others. External teams also contribute to specific components in cadence with internal sprints.
  ‍

Reworking the navigation

To improve usability and prevent confusion, the team plans to redesign the navigation, enabling seamless transitions between the Wordpress and e-commerce sites. Data analysis from the existing site informs the navigation's design, ensuring a clear and intuitive user experience.

‍

‍

Cross platform search

Knowing that 30.5% of all search users look for specific products and 21.5% utilize it to look for educational content, implementing an effective search engine becomes essential. The team plans was to leverage Algolia, an AI-powered search engine, to bridge the gap between the e-commerce and Wordpress. This search engine will provide a seamless experience by returning results from both domains.

The search functionality will be designed as a full-page overlay, allowing users to search for products, educational content, and other resources.

‍

‍

‍

Merging design systems

Considering the project's timeline, the team has decided to utilize the existing Clorox design system and merge selected components into a universal design system. This approach streamlines wireframing, usability testing, and future scalability. Iterations are made based on usability test results.

‍

‍

Build your own bundle

This is a new and highly invested feature that offers customers the freedom to create personalized bundles and save money. Usability tests have been conducted to ensure a seamless and frictionless customer experience. Key aspects of the design include:
‍

• Easy navigation
  Bundle products are grouped within their own category, and swim lane jump links have been implemented to enable users to quickly find the products they're looking for.
  ‍
• Transparency
  Clear indicators are provided to customers regarding the products they are adding to their bundle. Enabling different ways for customers to edit selections, and additional product information is easily accessible without any hassle.
  ‍
• Freedom
  On top of letting customers have the freedom of combining any products to create a bundle, customers can also add up to 4 quantities of the same. Making bundle building a satisfying experience.
  ‍

The MVP

While the design phase nears completion, the team acknowledges that launching the e-commerce site is just the beginning. Maintaining a test-and-learn mentality is crucial for ongoing success.

‍

‍

Future State

As we begin to wrap up the design phase and transition into development mode, it's crucial to consider future iterations and improving efficiency. Key aspects of the future state include:
‍

• Measuring success
  Setting up key performance indicators (KPIs) to measure the success of the e-commerce site during the first 3 months post-launch. Special focus will be given to monitoring the conversion rate (CVR) of the bundling experience and gathering valuable customer feedback for continuous improvement.
  ‍
• Increase efficiency
  Incorporating the tested design components into our universal design system, adopting highly reusable elements, and archiving any one-off components. This ensures that we can hit the ground running for future launches, saving time and resources.
  ‍
• Test and learn
  Running controlled tests on some of the backlogged ideas that didn't make it into the minimum viable product (MVP). The goal is to gauge customer interest by involving 25% of the customer base and capturing their reactions. The success rate of these tests will be measured, and the ROI will be assessed to determine the viability of implementing those ideas.