The Program

Site refresh

The most recent major update of the website was driven by a brand refresh to bring more maturity to the TP brand and refinement to the site. This brought the company approach, values, and work to the forefront while making company offerings more clear.

The site was reorganized to reduce page count and simplify page layouts and flow in order to enhance clarity, better convey company's offerings and ethos, and improve the user experience by making relevant information easier to find.

Cross team contributions

I worked across both design and development teams on this project. Starting from established brand guidelines and homepage wireframes, I was responsible for reskinning subsequent pages and produced responsive mobile and tablet designs. On the development side, I created detailed implementation tickets and led the execution, ensuring we met tight deadlines, including delivering the updated site in time for the new brand launch and a key client presentation.

Clean up of existing code

The first step was a comprehensive audit of the existing data model, component library, and codebase. I led this effort, identifying opportunities for simplification, reduction in redundancies, and trimming of outdated options that were no longer in use. By combining related code and components with related partials we were able to eliminate over ten component options in the Contentful content model and editor interface. This greatly simplified the editor experience and resulted in a major reduction in the GraphQL query complexity and data load size.

Net new components

After clean up and reorganization was complete it was time for the creation of new components reflective of the new brand. Working from approved desktop Figma prototypes, I was responsible for translating the designs into responsive layouts for mobile and tablet. I then led the end-to-end development process, which included content modeling, component mapping, implementation, testing, QA, deployment, and ongoing performance monitoring.

Down to the Details

Because of how frequently videos are used across the site, the details of video controls became an important consideration. Design and development collaborated closely to strike a balance between fully custom video controls and native browser controls in order to deliver a cohesive user experience across devices. While custom controls offered greater flexibility for branding and interactivity, native controls ensure accessibility and consistency across platforms. Ultimately we agreed on a hybrid approach: using native controls as the foundation, enhanced with subtle custom styling and behavior where it added value without compromising usability or performance. This allowed us to maintain visual consistency while ensuring reliable and familiar functionality.