Shipping Refer-a-Friend
The refer-a-friend banner on the NFHS Network homepage was easy to overlook and years out of date. I redesigned it, built it in production, and shipped it in roughly six hours using an AI-paired workflow.
A small surface with a lot of traffic.
The referral banner sat near the bottom of the homepage. It had plenty of impressions, but weak hierarchy, an easy-to-miss CTA, and styling that no longer matched the rest of the product.
It was a good candidate for a focused redesign: narrow scope, measurable behavior, and no reason for a long delivery cycle.
I started by getting the hierarchy right.
I sketched a few mobile directions first, focusing on the offer, CTA, and how the banner could expand without becoming visually heavy.
Those sketches became the starting point for everything that followed.
I used AI to explore within the system, not around it.
I brought the sketches into Figma Make with our existing design system as the constraint.
That gave me several credible directions quickly, using components, spacing, and tokens that already belonged in the product. I could compare them side by side, refine the strongest one, and move on.
I took the final direction straight into production.
Once the design was settled, I moved into Claude Code with the production repo and the final visuals.
I used it to help implement the React changes, run tests, and prepare the branch and PR. I reviewed the code and analytics, checked the final experience in context, and shipped it.
The new banner fit the product — and asked more clearly.
The redesign used a stronger offer, clearer CTA, and the same visual language as the rest of the updated homepage.
It stayed in essentially the same location. The difference was how clearly it communicated why someone should act.
The lift appeared immediately and held through the test window against the prior-year baseline.
The redesign did not create more traffic. It converted more of the traffic the surface already had.
CEO callout: flagged as the kind of work to do more of.
The internal Slack reaction came back same-week. The project got pulled into a company-wide story about what AI-paired design + engineering can ship: solo, in hours, against a real revenue lever.
The speed came from removing the gaps between steps.
The interesting part of this project was not that AI produced a design or wrote code for me. It was that I could keep one continuous thread from sketch to interface to production.
The design system kept the exploration grounded. AI compressed the mechanical parts of the workflow. And because I owned the work end to end, there was very little translation between deciding what to make and getting it live.