Crafted a highly interactive experience showcasing top self-made women in America, with a focus on accessibility, filtering, and data storytelling.
The Challenge
Forbes wanted to highlight hundreds of profiles of America's most successful self-made women in a way that was fast, visually compelling, and fully accessible. The site needed to allow users to explore data-rich profiles without slowdowns or visual clutter, and the editorial team needed flexibility for content updates.
The Solution
We built the project using Next.js with server-side rendering to ensure great SEO and fast initial loads. To support smooth performance with a large dataset, we implemented virtualized lists, reducing the number of DOM nodes rendered at any given time. The frontend pulled live content through GraphQL, giving editors the ability to manage and update entries easily. The entire interface was designed to meet accessibility standards and work flawlessly across screen sizes and input devices.
My Contribution
I led the development of the filtering system and optimized profile rendering using windowing techniques. I also took charge of accessibility improvements by integrating ARIA roles, ensuring keyboard navigation, and validating color contrast. I collaborated with designers to maintain visual integrity across devices and worked with QA to pass stringent performance and a11y benchmarks.
Key Outcomes
- Achieved near-perfect Lighthouse scores in performance and accessibility
- Users could filter and explore hundreds of profiles without lag
- Editorial team praised the ease of use and visual consistency
- Successful press launch aligned with Forbes marketing goals
Lessons Learned
Learned how to balance accessibility, interactivity, and performance in large-scale data visualizations. Gained deeper understanding of SSR benefits when paired with virtualized rendering and dynamic content sourcing. Reinforced the importance of designing with assistive technologies in mind from day one.