John Hancock Site Redesign

Led the front-end development of John Hancock's corporate website redesign, implementing a modern design system and improving accessibility.

John Hancock Corporate Website Redesign

As the lead front-end engineer for John Hancock's corporate website redesign, I was responsible for implementing a modern, accessible, and performant web experience that reflects the company's brand and values.

Key Achievements

  • Developed a comprehensive design system using React and Tailwind CSS
  • Implemented responsive layouts and animations using Framer Motion
  • Improved accessibility to meet WCAG 2.1 AA standards
  • Optimized performance with Next.js and image optimization
  • Created reusable components for consistent UI across the site
  • Integrated with a headless CMS for content management

Technical Implementation

The project was built using a modern tech stack:

  • Next.js for server-side rendering and optimal performance
  • TypeScript for type safety and better developer experience
  • Tailwind CSS for utility-first styling
  • Framer Motion for smooth animations and transitions
  • Jest and React Testing Library for comprehensive testing

Design System

I created a design system that includes:

  • Typography scale with proper hierarchy
  • Color palette with semantic naming
  • Component library with documentation
  • Spacing system for consistent layouts
  • Animation guidelines for consistent motion

Accessibility

Accessibility was a top priority throughout the project:

  • Implemented ARIA labels and roles
  • Ensured keyboard navigation
  • Added screen reader support
  • Maintained proper color contrast
  • Created skip links for better navigation

Performance Optimization

The site achieved excellent performance metrics:

  • Lighthouse score of 95+ for all metrics
  • First contentful paint under 1.5s
  • Time to interactive under 3s
  • Optimized images and assets
  • Efficient bundle splitting

Results

The redesigned website has:

  • Improved user engagement metrics
  • Better accessibility compliance
  • Faster load times
  • Consistent brand representation
  • Enhanced mobile experience