Website Redesign

Branding | Design System | UI Design
Company & History header on a laptop

The Request

I was brought onto this website redesign project to recover work that a third party had done to redesign a public website in WordPress. Leadership asked if I could keep the elements they liked from the redesign, but revamp and tweak other components to make the site better align with brand guidelines, look more professional, and functionally work better for company needs. In taking on this project, I also worked to make a design system that contained many reusable elements that could help decrease the overall development workload.

Primary Goal: Revamp website to merge elements from third party work and brand guidelines, make the site better align with company needs, and create a library of reusable elements

Tools: Figma, Hotjar, Google Analytics, Wordpress, pencil & paper

Compatability: Desktop & Mobile

Fonts and Colors

Web font hierarchy and color pallette

Buttons

Button styles shown in doc Button styles in animation

Cards

Cards from section of homepage Cards used throughout the site

Heros

The four hero options used on the site

Interactive One-page Prototype

This prototype showcases some of the interactive behavior found on pages throughout the site. Some interactive elements include:

  • Image carousel with enlarged image overlay option
  • Accordions with Resources filter functionality
  • Table with informational tooltips and hover states
  • Compatible products carousel

Laptop open to a product detail page
Allow Overspending Feature Previous
Typography to Improve UX Next