Shopify Ecosystem

Healthy Sodas DTC Diagnostic: Part 3

healthy-sodas-dtc-diagnostic:-part-3

60550524b96d3f18b0686ea7 alYz5ucPRBLzUmlhBA88uzMYLXyswSt6nQRWMRrSznF2Apoc8sZNFwrgfRO2SLrOTy1SQ3yep4egLPvTO9s6ZC88RjZrBjgTDTAoI257yBLmynHhVNDyiw5TEAYedhnv4fFqK4E

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:

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.

60550525e7876423d2d3c39a BOFuy4dMUfqI7Q Ty2gM7WLe4MroOPMs1kR9hIjdCgWRPDDIzho4iySurB n 9BEJBvNASVSF8brycTdGzWsKYhHKBioyZk HYOFAuIZwmwMIQJ6tPc0dYiF4AF5i3KNRoV8Q9

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).

60550525a0d77fd62308e05f Jj1Le5UR3NFO4OhmnQM2akMpwHsWQg9WjWtO7DVt1NAm5iryJf Ki9eErmfWp6KcnlCbTFv4a3SoRw3SL3MS2LQ awog L8Iveg C4D1QHhKyf2WH07jg6PAAxdchsZtc9u 9jP

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.

6055052591ba0c6c67e1390e P84Kob1x9XH1Ae0xXPEALiVMfk

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.        

60550525b96d3f7c14686ea8 Ef0Vg4B6Xr1F

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.  

605505251a82e7818d08eec8 ce7tUPXLo0o5SswBy1uTn6d0dDu19OkLS zQG6z46datOayvm EiWTTyaI5MRuI6SP1xdVMxSLKM

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.  

605505258ad46393a718db4d XuQzx4Y4LvHnUIae30yffSyAA9nr 47 kLzKdk6mBheBg kE0hoYAWNdvfcII9EfeVPn nVQ e4nxpD dhU4cBMYhqePQISOHrFwsa864bUbGl2o EFOt SvjGqjiEjJKPoJPF

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. 

60550526ea0ff7b2158963ef xufdh2uCOFMI87BHg lShr1v2 beSZgVrplNAnUoB8RGBjtI8d1rbHXZ3efgjkvMEsaH1WCn1ur00FPrIFwM93on8ELdGLIzUG 5 gTyVwdTK3D 9LS5 5cYi01Uhpdasnb mO2e

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. 😎

6055052607fdbf8acc4bc8af NUBM4wJkCJ4ILchGuafRNAq2czT q4wQqnkGCM12CoYiX45zc38tr009mhuNCDf8 5TXU3uG4tLL9w2Vi9uMPoF1bqOC7EhUVAROBENR0oGgcBtJcuN1mJyMeeWHG apXwViWD 2

🥤 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.                   

6055052660cb8f7f230f9216 t1I0MFi8Gsi9jo1sZcfXSPTGQwgLrlN7eijeqtFQU uomU1IXVfQJAcJPbWbKVbo9P2EVJ r01ZY0z40nVBgWaenkf10T0BK354syyopeBoLB0DTe

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. 

605505265923adb84233d6db Sn DHvuPam11G6PaOpVrQAnWzvhOCdKHLxClYtV0wqUmLxcyb7hz73I O0Ve KR xhCawAY72gQmHEP26pMUWG9T G8ZrwTQj1ldM2DvqDLwTZcBeYXnWA0xLbOD6

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. 😎

6055052781f5165e2e349b04 3xY3 o2pviNX 3PWFCHM8IMjvcTNgWSN1g0FMxkqgtXw

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.

605505265e94b166c9686f60 KqrmfilnIj8izrF3vI6kvh2iy ODK09L6uOtqhoiBDaEIe0BUs8hhP01PZvlO4njmM8M 0BO2NV7LkhwuynInTa w0iQQPURXUNzQOI1cdB PWC228qQBVuR3a qR Y6shK 4Ab

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.

6047c7f76c60160cf4607681 Screen%20Shot%202021 03 09%20at%2011.09.35%20AM

Thomas Shreiber

writer, tweeter, & growth @dtcnewsletter

View All Posts

Special thanks to our friends at Pilothouse for their insights on this topic.
I'm also on

Subscribe to Podcast

Top 1% most popular show out of 2,729,419 podcasts globally!

eCommerce Fastlane | Shopify Podcast For DTC Brands | Growth Marketing Strategy For Entrepreneurs | Listen Notes