Lief Labs is a leading dietary supplement manufacturer based in Santa Clarita, CA. Over four years as an in-house designer, I led the redesign and ongoing optimization of lieflabs.com, rearchitecting the site's structure, overhauling the visual design, and building a more effective digital presence for one of the industry's most capable manufacturing partners.
→ Visit SiteScope
Tools
The Challenge
A Site That No Longer Reflected the Company
Lief Labs had grown significantly in scale, capability, and market position, but the website hadn't kept pace. The existing site was visually dated, difficult to navigate, and no longer communicated the level of quality and expertise the company had earned. For a business where the website is often the first point of contact for prospective supplement brand partners, that gap mattered.
The challenge wasn't just cosmetic. The site lacked a clear content hierarchy and had inconsistent visual language across pages.
Approach
Structure First, Then Visual
The redesign started with structure, rethinking how information was organized across the site. The existing navigation buried key capabilities and made it hard for prospective clients to quickly understand what Lief Labs does and why it's different. A cleaner hierarchy was established, with clear audience pathways guiding both brand partners and enterprise clients to the right content faster.
With structure in place, the visual overhaul began. The updated design system introduced a more premium typographic scale, consistent use of brand color across components, and a refined image treatment that brought the product and science photography to the forefront. Every page template was rebuilt to support both clarity and conversion, ensuring the site worked equally well on desktop and mobile.
New features including interactive elements, enhanced forms, and improved page-level CTAs gave visitors clearer next steps at every point in the journey.
Before: flat navigation (8 items)
After: grouped navigation (5 top-level + dropdown)
Brand Consistency
Elevating While Staying True
With a brand identity already in place, the redesign had to walk a careful line, pushing the digital presence forward without losing the equity built into the existing brand.
Typography was elevated to feel more authoritative: tighter hierarchy, stronger contrast between heading and body weights, and more intentional use of white space to let the content breathe. Color usage was tightened and made consistent across all page templates.
Copywriting was also revisited throughout, sharpening value propositions on key pages, tightening capability descriptions, and aligning tone with the premium positioning the brand was building toward.
Interior & product pages
Hero carousel: screen recordings