This project involved the development of a full redesign of the home page and some subpages, including a new global header, menu, and footer. The visuals were based upon the desktop and mobile layouts created by the designer in Figma. The previously existing site was built in React, with content editable through Contentful. To build out this design, there was some retrofitting and working within the existing codebase, creating a bunch of new React components in Typescript, and setting up a new overall design and CSS framework to be existing subpage components to build upon.

Redesign of payment processor homepage. Darker blue background, header, hero area, highlights grid and text area

Along with creating the responsive components and make sure that all interactive elements were keyboard accessible with nice focus indicators, I also made them editable through Contentful. This involved content modeling within a development space, to create new content types that allow all of the page modules’ text, images, and icons to be editable.

Some also included some options for alignment, spacing, etc. The various modules were created so that they could be reused in any order to create new subpages (a page builder of sorts within the existing content structure).

Example of photo tab component in Contentful redesign Example of two additional components in Contentful redesign, testimonials, photo and text area, and footer Full screen menu with tabs in Contentful + Typescript redesign

Some newly created components included:

  • Full height tabbed main menu (and new header)
  • Highlights grid with SVGs
  • Photo with captions tabs
  • Testimonials with horizontal scroll
  • Modified hero area
  • Product comparison grid
  • New footer


Project Year: 2022

Project Details:

  • React
  • Contentful
  • Typescript
  • CSS Modules
  • Mobile-First Responsive