Healthy Sodas DTC Diagnostic: Part Three
Welcome to part three of our four-part deep dive into the marketing strategies of DTC soda brands Olipop, Ugly, and Poppi.
If you haven’t read the first two parts, start by catching up with our Facebook Ads and Email analysis.
For this section, we’ve partnered with Oddit to analyze each brand’s website. Oddit provides simple, to-the-point website audits for direct-to-consumer brands wanting to boost conversion and strengthen brand loyalty.
The Oddit team has highlighted areas for improvement from each soda brand’s website and offered quick-win solutions they can apply ASAP.
HINT: Consider these changes for your site too, OR reach out to Oddit for their expert opinion!
Let’s jump in:
🥤 Olipop
Hero Text
Right off the bat, we noticed Olipop’s hero text needed an adjustment. The H1 heading to subheading ratio should be closer in size. H1 is 59, and the subheadline is 15, so roughly a 4:1 ratio.
To achieve higher readability, we’d suggest a 2:1 ratio or a size 24-30pt subheadline.
Homepage Images
While we’re big fans of the photo-gallery look and feel, the key interaction points are difficult to read. Adding higher-contrast buttons will help boost conversion.
Further, it’s important to display images relevant to the action point. If you’re linking users to “Our Story,” display an image that relates (ex. the founders).
Product Info
When displaying products, be crystal clear with your information. Never make the consumer guess. In this example, we’re unsure of the flavor and quantity – two important details.
The package on the left is especially confusing – is it a colored box? Variety pack? Or maybe a paint kit? 👩🎨 Each item should have product titles at the top and include quantities.
Product Listing Page
A second area to communicate key information is within “Quick Add.”
The chances of someone adding a product to their cart without knowing the price are slim to none. Conversions will be extremely low until you communicate the information customers need.
Further, products only come in sets of 12, yet the package size looks like a clickable variant. This should be restyled so the package size is stated and does not look like an actionable item.
Icons
Consistency is key! Across these six icons, there are five different icon displays. 🥴
Pick ONE, and apply it to all.
Product Detail Page
For all three of these brands, everything should be optimized for subscription sales. Change the default setting to subscriptions – the ideal conversion.
🥤 Ugly
Logo
The Ugly logo isn’t centered in the navigation. This seems like a small thing, but since the navigation sticks to the top of the site and scrolls with you, it makes the entire site look off-centered.
While this most likely won’t have an effect on conversion, it’s an easy detail to fix.
Mobile Navigation
When you’re holding a phone, you hold it on the left or right side which makes it easy to access the sides/corners of the device.
Placing the menu in the middle makes for a difficult user experience. Go the traditional route and situate your menu on the left or right side.
For mobile, items like access to “Account” are lower priority and should be placed inside the mobile hamburger menu. This makes room for a “Shop” button.
Product Listing Page
Key information that’s difficult to read makes for a poor user experience. In this example, the only things we see are “Still,” “Sparkling,” and “Still Sparkling” – leaving out the size and type of product. Make sure your text colors are high contrast and easily visible.
Be clear with product titles: “Still Sparkling” should read “Still & Sparkling.” It’s a small but important detail.
Selector
The carousel selector has qualities similar to those of the example above – it’s difficult to read. Make these items higher contrast and closer together so it’s easy to see and navigate.
Shopping Cart
If the cart is empty, give users somewhere to go! A link to featured products or even a simple “Shop Now” button works great. 😎
🥤 Poppi
Homepage
The Poppi homepage highlights socials, reviews, and a “brag bar” of publication features. It’s a confusing and cluttered section where the value of each item gets lost.
Each of these elements should have its own dedicated section for clarity and intention. For starters, the brand should be listing their social channels in the footer.
Product Detail Page
While Poppi has a lot of unique elements on their website, incorporating more “status quo” features would benefit the website – especially their Product Detail Pages.
The feedback:
- Currently, their mobile product pages don’t show the product description or price. Without a price, users will be wary of adding anything to the cart. There’s also a high chance they’ll get confused or frustrated and leave.
- Add a higher contrast “Add to Cart” button. The page has a lot of whitespace so the button hierarchy is still high, but as elements are added it’s likely to get lost.
- The brand has a number of strong reviews which should be shown off. Let the customer know Poppi is awesome!
- It’s difficult to find the price. Boldly list the price so there’s no confusion for customers.
- Consider adding value props such as “low cal” or “low sugar.” Or they could add “Free Shipping over $50” which would help upsell for a higher average order value.
Banner
Combining TikTok and Amazon in the same banner is disconnecting and confusing. Create a cohesive brand message to drive clicks and give a better impression of the brand. 😎
Newsletter CTA
The CTA to drive newsletter signups is pretty underwhelming. Crafting a simple value prop will drive sign-ups and transactions especially with clear messaging and a more engaging button CTA.
That’s all for this round of DTC Diagnostic. We’ll be finishing off the series next weekend with a product experience breakdown.
If you liked what the Oddit team had to say and want personalized insights to enhance your brand’s website, you can start your own Oddit today to get one free quick win to improve your UX instantly.
