OGX Beauty

OGX had a visually striking website with bold gradient backgrounds, vibrant product photography, and an energetic brand personality. But underneath the surface, the experience was failing users. Contrast ratios as low as 1.37:1 (well below the 4.5:1 WCAG AA minimum) made text unreadable. CTAs didn't convey clear actions. The gradient backgrounds actively harmed legibility. Icon usage was inconsistent. Product information was buried in poorly structured modals.

The site's bounce rate sat at 49%, nearly half of all visitors leaving immediately. The product detail pages were underperforming on retail click-throughs, meaning users who did stay weren't converting. OGX needed a comprehensive redesign that fixed accessibility while preserving the brand's bold, expressive identity.

I conducted a comprehensive accessibility audit of the existing OGX site across desktop and mobile. The findings were significant: contrast ratios failing WCAG standards throughout, CTAs that didn't communicate clear actions to users, gradient backgrounds that degraded text readability, inconsistent icon usage that created confusion, and an ingredient transparency popup that couldn't pass basic readability requirements.

Each issue was documented with specific measurements and annotated directly on screenshots, creating a clear reference for what needed to change and why. This audit became the foundation for every design decision in the redesign.

I led the end-to-end UX/UI redesign, working with engineering and product to ensure every change served both accessibility requirements and business goals simultaneously.

I built the complete OGX theme within the design system: a refined color palette that replaced the problematic gradients with accessible teal and gold tones, a typography scale with proper contrast at every level, and component variations that maintained the brand's premium feel. Production-ready templates covered the homepage, product detail page, and article layouts.

The PDP was the most critical conversion surface. The existing design buried product information in hard-to-read modals, used a gradient ingredient popup that failed contrast standards, and presented description and usage instructions without clear hierarchy. The "How to Use" section text didn't meet ADA compliance when not hovered.

The redesign surfaced product details in a clean, structured layout: prominent product imagery, clear star ratings, accessible ingredient transparency with a proper drawer component, and organized product details with accordions for benefits, ingredients, and directions. Every text element now meets WCAG AA contrast minimums.

The final design system powers every touchpoint of the OGX digital presence. The homepage leads with bold lifestyle photography and clear product navigation. Product pages present information in a scannable hierarchy. The "Where to Buy" page uses a clean search-and-filter approach with both online and nearby retailer options.

The OGX redesign delivered the clearest proof that accessible design isn't just compliance: it drives measurable business outcomes. When users can actually read your content, find your products, and navigate your site, they stay and they convert.

Bounce rate plummeted from 49% to 6%. Nearly half of visitors were leaving immediately before the redesign, and now almost all of them engage. PDP retail exits increased 56% year-over-year, meaning users on product pages are clicking through to purchase at significantly higher rates. These results validated the accessibility-first approach and made OGX the reference case for every subsequent brand redesign at Kenvue.