Dropps: Total Website Redesign

Note: Work in progress.

Background

Dropps was an eco-friendly home care company with a mission to reduce plastic waste and waste in manufacturing. They sold highly concentrated laundry products (detergents, fabric softener, and bleach alternative) and kitchen products (dishwasher detergent). Their products came in “pod” format (they were the first company to ever create a laundry detergent pod!) and faced challenges surrounding the environmental safety of the PVOH pod film.

When I came on board, Dropps was in the midst of a brand and packaging redesign. I was tasked with rebranding the website: this resulted in redesigning and re-architecting the website on a tight timeline.

Summary of my work:

• Site audit and metrics review

• Create taxonomy for all products sold

• Define traits for product differentiation

• Define product name display structure for easy scanability

• Create new site architecture for

• Product categorization and product collections

• Company/brand pages

• New designs for core shopping funnel pages

• PDP, PLP, Homepage, Navigation, Cart

• Art direction on product renderings and photography

• Visual implementation of new product taxonomy and product traits

• Copywriting and asset creation as needed

My Approach

I first conducted a site audit. I found that everything needed major overhauling—from explaining the product to site architecture to the customer subscription portal… it all needed to be completely redone.

Knowing it would take a lot of time and effort from the entire team to overhaul the website, I planned to group the work into phases: quick fixes first, and then a total redesign with a prioritized rollout.

The Full Story…

“Bandaids for now, long-term solutions next.”

First, Quick Fixes

My goal was to improve customer experience and business metrics. Utilizing analytics, I determined it was most important to focus on adjustments to the Homepage, beginning with everything above the fold, and A/B testing where possible. This was the primary landing destination, viewers were not scrolling (and mainly bouncing), and the page literally did not explain the products being sold! I worked as efficiently as possible (low effort for both design and development), knowing that this work would soon be replaced with the full site redesign. For more details, see Dropps: Homepage Redesign.

Performance Metrics:
CVR: +38.9% | CPA: -14.7% | Bounce: -10.2%

“Once stable, it’s time to redesign.”

Prioritization Is Key

An entire website redesign is not a small task. This involves work from every team at the company—UX, development, graphic design, copywriting, merchandising, brand strategy, customer service. Our staff resources and budget were limited, and my roadmap took all of this into consideration. I needed to create designs that could actually be implemented, and create a foundation to build upon.

Pages in the shopping funnel would get a total overhaul (Homepage, Cart, Navigation, PLP, PDP). All other pages would get a branded re-skin and tweaks to any egregious content (About Us, Blog, Rewards and Affiliate, Press, FAQ, etc.).

Problem: General Considerations

• Brand and packaging redesign still in progress: fonts, colors, logo, and graphic design could be hinted at, but nothing final to create cohesive web styles

• Packaging would include a color-coded system to differentiate product types

• Brand proposition, product benefits, and mission statement not finalized

• No existing team process for collaborative workflow or design approvals

• Under-resourced: No copywriter, graphic designer, or photographer, fairly inexperienced development team

• All the products look the same (aside from the print color on the packaging), plus the pods are small, clear, and hard to see in photos

• Launch during Black Friday season, and in 2020 (when a global pandemic was still in effect)

Problem: Customer Considerations

• Not everyone uses pod-style detergents (liquid or powder is most common)

• Pods are pre-portioned

• Not everyone has a dishwasher

• PVOH pod film may be controversial

• The product is online-only: scent and strength of scent cannot be evaluated, and purchases require time to ship (shopping before realizing you’ve run out of product)

• The product is not as cheap as the main brands found in the supermarket, and it is challenging to understand the “cost per load” compared to what you’re already using

• The product is made of natural or eco-friendly ingredients, which tend to clean less well than harsh chemicals

Problem: Business Requirements

• Increase conversion rates, average order value, and multi-SKU orders

• Increase purchases from new customers

• Increase ratio of subscription purchases

• Retain existing subscribers

• Increase subscriptions per customer

Solution: Implementation Strategy

• Create a timeline for design, content, and development (kickoff collaborations and defining product requirements, reviews with stakeholders, revisions, and final presentations), with individual tasks and deadlines per person

• Stagger deadlines based on how long it will take to implement

• Create concepts with enough lead time to develop content (from brand agency, freelance writers, and creating web-ready assets in-house)

• Be transparent with stakeholders about the status of all work from all teams

• Scale back to MVP where necessary (discuss the vision, and how we will get there over time)

• Create a solid foundation, to continue to build upon

Solution: Overarching Design Goal

Help customers understand what the company sells and how the different products might benefit their lives.

Design Concept

• Highlight the difference between products by defining a system of attributes

• Strength of formulation; Cleaning attributes; Ingredient type; Scent level

• Help customers find the right product to suit their specific needs: whether it be one product or combining multiple products, determining the correct box size and subscription frequency

• Help customers buy different products with the same scent

• Showcase the benefits of using Dropps vs. other brands

• Showcase incentives to purchase without worry (money-back guarantee, easy subscription cancellation)

• Allow customers to modify items in Cart without losing their place as they browse the site (make changes if they find items they like better)

Process and Workflow I created as I worked:

• Website style guide

• Fonts, colors, and iconography based upon in-progress-packaging design

• Determine the use of color for branded product categorization vs. scent

• Ensure ADA compliance

• Component library in Figma

• Build components from scratch to enhance design speed and ensure consistency

• Components to be built in React by developers

• Workflow process and product roadmap for Design and Development

• Weekly meetings, daily standups, project kickoffs, retrospectives

• Stakeholder collaboration, reviews, and approvals

• Rolling back the design Vision into phases of MVP

• A/B testing roadmap and backlog