American Academy of Pediatrics
Four years of ongoing frontend development as part of an agency team building for the American Academy of Pediatrics. One of the largest and most recognised paediatric health organisations in the US. The project centred on their Optimizely CMS platform, with a tech stack spanning React, Redux Toolkit, C#, and Sass.
The AAP needed a dedicated agency team to sustain and grow a high-traffic, content-rich platform over multiple years. Key challenges included keeping pace with major Optimizely and React version upgrades including an upgrade to .net core, building a reusable component library that editorial teams could configure without developer involvement, and progressively meeting WCAG 2.1 AA accessibility requirements across a vast and complex site. Ongoing parts of this project included A fully new ecommerce integration with new product pages, a complete cart checkout process, product analytics, and many new feature elements and supporting applications.
Shop & Checkout Experience
The AAP's online shop handles a large catalogue of books, journals, and educational materials. Work here included rebuilding the checkout flow with React and Redux Toolkit to handle cart state reliably across sessions, improving form validation UX, and ensuring the purchase flow met WCAG success criteria. From keyboard navigability through to meaningful error messages that pass screen reader testing the acessibility of the site was an integral part of day to day work.
Product Pages & Cart
Individual product pages were rebuilt to surface richer content without compromising page load performance. Cart interactions were moved to a fully client-side Redux store with optimistic updates, eliminating full-page reloads that had frustrated mobile users and increasing conversion through to checkout.
Search & Content Discovery
Search is central to how clinicians and parents navigate the AAP's extensive library. The search UI was rebuilt using React with faceted filtering, allowing users to narrow results by content type, publication date, and topic area. Performance work on the results page reduced time-to-interactive significantly by deferring non-critical content and lazy loading images.
Membership Application Flow
The multi-step membership application was one of the most complex forms on the platform. It involved conditional branching based on the applicant's speciality, real-time fee calculation, file uploads for credentials, and integration with the backend membership management system. The form system was built with React to handle this complexity gracefully. Example core improvments include per-step validation, accessible error states, and a progress indicator that reduced drop-off.
Reusable Timeline Component
A custom timeline component was built for the AAP's history and advocacy sections, allowing editors to add, reorder, and date entries through the Optimizely CMS without touching code. The component handles both horizontal and vertical orientations, responds across breakpoints, and degrades gracefully when JavaScript is unavailable.
Accessibility Audit & Remediation
A structured WCAG 2.1 AA audit was conducted across the platform, covering colour contrast, keyboard navigation, screen reader compatibility, and focus management. Remediation was prioritised by impact and delivered across multiple sprint cycles. I worked on addressing exisiting missing ARIA labels, broken focus traps in modal dialogs, and reordering heading hierarchies across content-heavy page templates and process improvment for future prevention.