Forbes 30 under 30 2025

The Challenge

After the success of the 2024 release of Forbes 30 Under 30, the challenge for the 2025 edition was not just to replicate that success, but to push the bar even higher in terms of user engagement, editorial flexibility, and design polish. The primary objectives were threefold: (1) improve the filtering user experience to allow users to explore honorees more intuitively, (2) introduce meaningful animations that enhanced, rather than distracted from, the content experience, and (3) refactor the internal component and data architecture for future reuse across Forbes’ broader lists ecosystem. We also needed to maintain performance on mobile devices while scaling content and ads. Editorial teams requested a more flexible CMS integration and reduced dependency on engineering for layout tweaks.

The Solution

We began by auditing the 2024 implementation to identify bottlenecks in both performance and usability. A major area of focus was the filtering system, which was rewritten to support multi-criteria filtering (e.g., category + region + industry) with debounce logic and loading states, enabling faster perceived performance. To enhance visual clarity, we introduced smooth transitions and micro-animations using CSS-in-JS via styled-components, ensuring compatibility with Gatsby’s static generation. We modularized the GraphQL queries by abstracting data fragments into reusable units that could be composed dynamically, enabling the editorial team to manage future content extensions without re-engineering the frontend. All components were migrated to a new Storybook setup for better documentation and regression testing. Performance metrics were monitored via DataDog and Google Ads analytics, ensuring we stayed ahead of thresholds for time-to-interactive (TTI), layout shift, and ad viewability.

My Contribution

I was responsible for the full frontend refactor, leading the component architecture redesign to separate logic, layout, and presentation layers. I spearheaded the animation system using a combination of styled-components and keyframe transitions, ensuring every user interaction, from filtering to card reveal, felt fluid and intentional. I also redesigned the filter UX to support keyboard navigation, ARIA roles, and dynamic chip-style filters with clear/reset behavior. Working closely with backend engineers, I introduced a modular GraphQL fragment system that significantly reduced code duplication across list types. I implemented unit and integration tests for each new interaction using Jest and Mocha, and integrated performance benchmarks in our CI. Additionally, I collaborated with the editorial team to prototype layout variations using Storybook and ensured all changes passed internal brand and accessibility reviews.

Key Outcomes

📈 Increased average session duration by 24% through improved navigation and interactivity
📱 Achieved a 98 Lighthouse Performance score on mobile through better animation performance and bundle optimizations
🧩 Reduced engineering effort for future Forbes lists by 40% via GraphQL fragment modularization
🖱️ Improved accessibility scores by implementing focus states, keyboard support, and screen reader-friendly markup
📊 Increased ad viewability and click-through rate due to more engaging visual interactions and smoother page transitions

Lessons Learned

Even small UX changes, like responsive filter transitions or animation timing, can lead to measurable gains in user retention. Working with editorial stakeholders taught me how to balance dynamic content demands with strict performance budgets. This project deepened my expertise in component-level performance tuning, accessibility in high-traffic environments, and GraphQL query design that scales across multiple page templates. It also reinforced the value of Storybook-driven development when collaborating across design and engineering in a fast-paced newsroom environment.