Lief Labs website homepage after the redesign

Lief Labs web.

Lief Labs had spent almost two decades as the manufacturing partner behind other people's supplement brands. After a brand refresh, the website was the last thing still wearing the old identity — so I led the redesign and rebuild end to end: a new information architecture, the refreshed brand system applied across every page, and a site built to do real work for the sales team.

A site that no longer reflected the company.

Lief Labs had grown in scale, capability, and market position. The website hadn't. For a business where the site is often the first point of contact, the gap mattered.

15 Years of industry growth the site needed to reflect
8→5 Top-level navigation items regrouped — plus a new About dropdown
Increase in pages with clear conversion-focused CTAs
The redesigned Lief Labs site shown on desktop and mobile

Structure first, then visual.

The work was structural before it was visual. I rebuilt the architecture around a clearer hierarchy and distinct pathways for the two audiences Lief serves — brand partners and enterprise clients.

Site map — before & after
Unchanged Added Restructured into dropdown CTA
Before: flat navigation (8 items)
lieflabs.com
Manufacturing Quality Branding Culture Lief Cares News Careers Request a Quote
After: grouped navigation (5 top-level + dropdown)
lieflabs.com
Home Manufacturing Product Development Quality Branding About Lief ▾ Lief Cares Request a Quote
About Lief dropdown
Culture News Careers

Then the visual overhaul: a more premium typographic scale, consistent brand color across components, and an image treatment that finally let the product and science photography lead.

What changed across the redesign
Typography

The workhorse sans moved to something more modern and premium, with a display serif added for editorial moments.

  • Montserrat → Futura PT / Albert Sans
  • Added Noto Serif Display
Components
  • Rounded-corner buttons
  • Gradient & more varied button styles
  • Drop shadows
Style

A wider, more dimensional take on the palette, paired with a more art-directed image and illustration system.

  • Varied teals — electric & dark, beyond teal & green
  • More gradients
  • Line art & wavy stroke elements
  • Bright, clean blue / green / teal photography
  • More interactive touchpoints
Content
Homepage

Three new modules

Customer-story videos, a Tour Our Facilities slideshow, and a Latest News section.

Manufacturing

Deeper detail

Packaging examples, listed MOQs, and an updated Labeling section.

Product Development

A new PD section

Innovative concepts from the Product Development & Marketing team — a section I co-led.

Quality

Made interactive

New testing icons and an interactive Certifications & Verifications section.

The homepage, top to bottom
lieflabs.com
The full redesigned Lief Labs homepage, from hero to footer
The Lief Labs international page — varied teals, gradients, and line-art world map in the new visual style
Interior pages
Lief Labs Manufacturing page — capability metrics in the new visual style
Manufacturing · Metrics
Lief Labs Product Development page — innovation metrics
Product Development · Metrics
Lief Labs Manufacturing page — delivery formats with line-art illustration
Manufacturing · Formats
Lief Labs Culture page — featuring the Lief HQ building line art
Culture

Still evolving.

The site is the living face of the refresh — the place the new identity gets the most miles. It launched as a complete redesign and has kept growing since, with new sections and content added as Lief has.

It's the web half of a larger brand story. See the brand refresh →

Next project → Lief Raws. A consumer-facing brand identity for Lief's raw-materials line — a sister brand with its own voice and visual world.