Harry’s: Homepage Optimization
(Powered by Forge)
Role: Lead UX/UI Designer
Scope: Homepage redesign, system-led implementation
Team: Product, Brand, Engineering
Tools: Figma, Forge, A/B Testing
Impact: +6.95% CVR, +15.4% email capture rate, $400K+ annualized revenue lift
Overview
Early in my time at Harry’s, I saw an opportunity to create something lasting — a design system that could unify our approach, accelerate decision-making, and scale with the business. Forge began as a personal initiative to bring consistency, clarity, and efficiency to how we built digital experiences. I led the system from vision through execution — shaping foundational components, defining usage guidelines, and partnering closely across design, product, and engineering.
As Forge gained traction, my role expanded beyond individual projects. I co-owned the DTC roadmap with our Principal Product Owner and drove UX strategy across multiple teams — including Growth (email structure), Retail (Amazon landing pages), and Brand (supporting the Creative team through a custom tool called the Image Visualizer).
Over time, Forge became more than just a toolkit — it evolved into a shared language that empowered teams to move faster, test smarter, and design with confidence.
From Atomic…
Forge Foundation: Designing for Clarity, Scalability, and Speed
As Harry’s product ecosystem expanded, I led the creation of Forge Foundation—a Figma-based design system built to unify our experience across teams and surfaces. It features meticulously defined grids, spacing scales, color tokens, semantic roles, typography, and effect styles—all built to be reusable, scalable, and WCAG-compliant by default.
To bridge design and engineering, Forge was integrated with Storybook, creating a single source of truth between design specs and code. This alignment accelerated development, reduced QA cycles, and empowered teams to ship consistent, accessible UI with confidence.
What began as a documentation effort quickly became core infrastructure. Forge enabled faster iteration, broader collaboration, and a more resilient foundation for our growing component kit.
..to Molecules and Templates
Forge Component Kit
After establishing a strong foundation, I created the Forge Component Kit to scale our design system into real-world product use. This file houses all key molecules, organisms, and responsive templates across flows like onboarding, cart, category pages, and upsells. My goal was to streamline collaboration and accelerate execution—ensuring that any designer or engineer could plug into consistent, high-performing patterns without reinventing the wheel. From the layout behavior specs to the cart and trial templates, everything is grounded in systemized thinking, flexibility, and performance. This allowed us to deliver faster while preserving quality and brand coherence at scale.
Forge in Action
Our internal design system powered this project from atoms to templates—enabling consistency, speed, and zero dev refactors.
📝 Above: A snapshot of Forge samples in use. From core buttons and nav to full templates across cart and subscription flows, Forge enabled faster delivery, rapid testing, and consistent design at scale.
Challenge & Objective:
I led the redesign of Harry’s homepage using our internal design system, Forge. The goal was to transform a brand-led landing page into a performance-driven experience that increased trial sign-ups, product visibility, and email capture—without compromising brand integrity or requiring engineering overhead.
The redesign generated $18.6K in incremental revenue in the first two weeks and over $400K in sustained impact over 12 months—driven in part by a new lead capture component that increased email sign-ups by 15.4%, all built with reusable, system-ready components from Forge.
Homepage Redesign Powered by Forge
The original homepage was visually minimal but lacked functional depth: no clear entry points to purchase, no merchandising, and no customer acquisition tactics. I was tasked with increasing conversion rate and engagement without disrupting the brand experience.
Objective
Transform a static, brand-led homepage into a performance-driven experience that increases purchase intent, trial sign-ups, and email capture—while maintaining system consistency through Forge.
-
Identified missing CTAs, low merchandising, and no lead gen opportunities using UX heuristics and analytics.
-
Rebuilt the homepage using system-ready components to add structure, depth, and conversion paths.
-
Partnered with Growth and QA to A/B test variants and implement with zero dev refactors.
Exploration
Audit & Gap Identification
At the outset of this project, I conducted a structured UX and performance audit of the existing homepage (see screenshot). While the page was clean and brand-aligned, it lacked functional structure to drive user action.
Specifically:
No clear CVR entry points: There was no obvious path to begin a trial or browse products from the hero, forcing users to rely on global navigation to explore.
Missing merchandising blocks: Aside from a static hero and a few handle visuals, the homepage did not feature best-sellers, value props, or promotional messaging—core elements for driving clickthrough and purchase intent.
Lead generation opportunity lost: There was no email capture point until the global footer, which wasn’t optimized for visibility or engagement.
This combination of missing UX levers meant that the homepage was effectively a branded landing page rather than a conversion gateway. Scroll depth data confirmed this: a sharp drop-off after the first screen, with minimal engagement beyond product visuals.
Approach
Modular Redesign with Forge
Leveraging the Forge Component Kit, I redesigned the homepage using:
A Hero with clear CTAs for quick navigation alongside quick links to specific high performing Categories
A product carousel organism to surface best-sellers above the fold.
A lead capture module adapted from an existing Forge template, positioned just above the footer for soft conversion without disruption.
Systemized spacing, type, and button patterns—ensuring full alignment with our responsive grid and existing tokens.
Solution & Delivery
Experimentation & Testing
I partnered with Product and Growth to A/B test the new version. Variants included alternate hero placements, module sequencing, and lead capture copy.
QA + Implementation Support
All updates used system-ready components, minimizing engineering lift. I documented layout behavior across breakpoints using built-in Forge specs and collaborated with QA to validate visual accuracy post-launch.
Team & Role
This project involved tight collaboration across Product, Engineering, and Brand. I partnered with the Principal Product Owner to prioritize key homepage modules and ensure alignment with business goals. On the implementation side, I worked closely with Engineering to deliver the redesign using Forge components—avoiding refactors and reducing QA overhead. I also collaborated with the Brand team to balance UX performance goals with visual integrity during a broader refresh. Forge played a central role, enabling faster handoffs, consistent styling, and scalable updates adopted across other parts of the site.
Results & Impact
+6.95% relative Conversion Rate improvement
+$18.6K incremental revenue in 2 weeks post-launch
Led component increase 15.4% email capture.
Zero dev refactors needed post-QA due to use of pre-approved components
Forge impact: Enabled rapid iteration with minimal design lift and consistent implementation
Reflection
This project demonstrated the power of cross-functional alignment and system-driven design. Collaborating closely with Product, Engineering, and Brand allowed us to move quickly without sacrificing quality. By anchoring our work in Forge, we ensured consistency, scalability, and near-zero tech debt. The success of this initiative extended beyond the homepage—its patterns and foundations were adopted across merchandising, lifecycle, and landing page experiences, proving that thoughtful, modular UX can accelerate delivery while driving measurable impact.