NDA
Supplement company

Building a science-backed wellness brand and custom Shopify storefront

A single-serve liquid collagen line bringing grab-and-go convenience to the supplement space

About the project

For people constantly on the move, health routines often get abandoned simply because they take too much time and effort to maintain. A supplement company specializing in liquid collagen formulas closes that gap, delivering clinically dosed nutrients in single-serve, tear-and-go sachets.

Backed by more than thirty clinical studies, its product line includes four targeted formulas supporting muscle, ligaments and tendons, bones and joints, and skin health. This solution is designed for people with active lifestyles seeking proven results without pills, powders, or complex routines.

Services
Branding
Website Design
Website Development
Industry
Wellness & Sports
Liquid collagen e-commerce website design by Halo Lab shown on a laptop

Challenge

The supplement market is crowded with products that make big promises, but few can actually back them up. While the client had scientific credibility to compete, its brand failed to show it clearly. Halo Lab stepped in to rebuild the brand identity and extend it across the online store and marketing, creating a digital presence worthy of the products behind it.

Wellness brand billboard with collagen sachets designed by Halo Lab

Our process

Focusing on distinctive character and consumer trust, we took the client from an ordinary storefront to a full brand system and a custom-built store, reshaping how it looks, sells, and proves the science behind every sachet.

Rebranding

To provide a foundation the company could build on and develop a recognizable market presence, we first established a scalable, character-rich brand identity.

{{dropdowns-1}}

Branded sports duffel bag with the wellness brand logo mark by Halo Lab

Website redesign

With the identity in place, we redesigned the online store to make product discovery clearer, strengthen trust, and support purchase decisions within Shopify’s framework.

{{dropdowns-2}}

Shopify product page design for a daily greens supplement on a laptop by Halo Lab

Website development & QA

Once the design was finalized, the real test was making it hold up in production. We prioritized architecture first, so the store delivered the performance and flexibility needed to scale.

{{dropdowns-3}}

Emotional lifestyle photography style for a wellness brand identity by Halo Lab

Results

  • Cohesive brand system strengthened the company’s science-backed positioning across its own store, Amazon, Walmart, and marketing channels
  • Flavor-coded packaging and product visuals helped each formula stand out while keeping the product line consistent and scalable
  • Conversion-focused storefront made product benefits, bundles, subscriptions, expert reviews, and purchase paths easier to understand
  • Custom “Bundle & Save” logic supported larger orders by letting the client pair products with discounts directly through Shopify
  • SEO-driven site structure, content recommendations, and blog strategy created a stronger foundation for organic visibility
  • The Hydrogen storefront delivered a faster, more flexible ecommerce experience built to scale beyond a standard Shopify theme
  • Shopify documentation and custom metaobject guidance enabled the client’s team to manage key storefront updates independently
  • Risk-based QA helped stabilize the store before launch, reducing release risks under a compressed timeline

Our approach

Strong results start with open dialogue. At every stage, we work closely with the client’s team, running workshops, gathering feedback, and refining ideas through multiple iterations. If your product needs the same level of care, contact us — and we’ll help turn complexity into an experience people can understand, trust, and use with confidence.

{{approach}}

Ready to discuss your project with us?

Let’s discuss how we can craft a distinctive brand identity that captivates, connects, and converts.
BOOK A CALL

01 Discovery and research

We began by studying the wellness market and the company’s closest rivals, mapping how each one positioned itself and spoke to customers. From there, we identified opportunities to make the brand feel more resonant and distinctive.

Competitor research moodboard for a supplement brand by Halo Lab

Deliverables

  • Three competitors analyzed
  • Moodboard & creative direction

02 Logo design

Our team restyled the existing logo, retaining its recognizable star element while modernizing its appearance. For greater flexibility across smaller sizes, we also created a compact brand mark that combines the lowercase “b” with the star.

Deliverables

  • Over ten logo concepts
  • Trademark-compliant logo
  • Logo usage guidelines

03 Brand identity design

We presented two identity concepts — one built on familiar elements, the other using bold, forward-looking visual language. The final one combined both approaches, featuring vibrant gradients, fruit imagery, and emotional photography.

Two brand identity concepts for a liquid collagen company by Halo Lab

Deliverables

  • Two brand identity concepts
  • Brand guidelines
  • Brand kit

04 Packaging design

Building on the established brand aesthetic, we designed a packaging system where each flavor carried its own gradient, emotion, and unique character. It adapted easily as new flavors and formats appeared, keeping the brand structure intact.

Daily Glow collagen box packaging design with a pink gradient by Halo Lab

Deliverables

  • Sachet design
  • Box packaging design

05 Marketing materials

We extended the brand across digital touchpoints with a suite of social content, covering Reels, carousels, stories, and animated posts. To capture attention at the point of purchase, we also crafted promo assets for paid and retail channels.

Deliverables

  • Content templates
  • Print & digital ads
  • Marketplace store banners

01 SEO foundation

Before starting the redesign, we audited the site’s search performance, revealing limited non-brand traffic and underused search potential. Our specialists delivered a new site structure with recommendations to align SEO, usability, and design.

Deliverables

  • SEO audit
  • Technical specifications
  • Content recommendations

02 UX research & concepts

To grasp how wellness brands build trust and drive sales, we studied their CTA timing, benefit framing, and bundle placement. The insights shaped two design concepts: one centered on inclusivity, the other emphasized on-the-go convenience.

SEO-driven search queries for a collagen e-commerce store by Halo Lab

Deliverables

  • Two web design concepts
  • UX analysis

03 UX design

Drawing on the research, we rebuilt user journeys to help customers find the right formula faster. A product-finder quiz simplified discovery, while a mobile-first cart encouraged larger purchases through cross-sell and “buy together” offers.

Product finder quiz and cart flow UX design for a supplement store by Halo Lab

Deliverables

  • Wireframes & user flows
  • Quiz & cart logic

04 UI design

Our designers established a soft white-and-beige backdrop, complemented by floating fruit imagery, subtle animations, and product-focused sections. The design was adapted to Shopify’s customization capabilities, resulting in a clean storefront.

Mobile Shopify storefront UI design for a wellness brand by Halo Lab

Deliverables

  • Over ten pages designed
  • UI kit

01 Architecture & storefront setup

Our developers built the storefront on Hydrogen for server-side rendering and full control over routing, performance, and dynamic data loading. For hosting, we used Shopify’s serverless platform Oxygen, ensuring speed and stability across regions.

Shopify Hydrogen storefront development by Halo Lab

Deliverables

  • Shopify architecture
  • Performance optimization
  • Live & staging environments

02 Interface & interactions

We styled the interface with Tailwind CSS and built accessible modals and accordions using headless UI libraries. Framer Motion, React-Scroll-Parallax, and Swiper powered smooth animations, scroll effects, and product sliders.

Deliverables

  • Tailwind component architecture
  • Animation & scroll interactions

03 Custom solutions & documentation

We integrated a “Bundle & Save” feature, letting the client pair products with a discount and display them with an “Add Both to Cart” button. We also provided Shopify documentation and a guide for editing custom metaobjects.

Deliverables

  • Custom product bundling
  • Shopify documentation
  • Metaobject guide

04 Quality assessment

Before the release, our QA specialist tested the store across every layer — Shopify admin, meta objects, UI logic, browsers, and devices — validating screens against Figma to catch spacing and layout issues amid fast-moving design changes.

Branded zip pouches for a wellness brand designed by Halo Lab

Deliverables

  • Cross-layer QA testing
  • Bug tracking & resolution

Team

  • 1 PM
  • 2 Brand Designers
  • 2 Website Designers
  • 1 Shopify Developer
  • 1 QA Engineer

Technologies

Figma
Hydrogen
Remix
Shopify
Oxygen
TailwindCSS
Material Tailwind
Framer Motion
Swiper
GraphQL
Klaviyo
reCAPTCHA v3
React-Scroll-Parallax