PPC header and footer on desktop and mobile.
Web

PPC Redesign

Header and footer redesign for a BigCommerce B2C website.

Summary

The VP of Digital Strategy asked me to redesign Performance Plus Carts but wanted it done in stages. The first stage was redesigning the header, nav and footer. Iterating through wireframes and then mockups, we landed on a design that my manager approved. I then worked closely with a front end developer to implement the new design. The VP, who was the previous owner of the website before being acquired by Nivel, was happy to see the first part of the redesign aligned with his original vision.

Project Info

Client
Nivel
Role
UI/UX Design, Front-End Development
Tools
Figma, Illustrator, Photoshop, VS Code
Old PPC website on laptop

The Challenge

The VP of Digital Strategy, the previous website owner, wanted a different theme than the theme created by a third-party company before the acquisition. He asked me to redesign the template with a newly hired junior developer. This project was my first time working with the BigCommerce platform, React, and the Foundation framework. I was asked to keep the original icons and brand colors but explore new layout designs. There was a preference for a compact header/navigation.

New PPC heading and homepage on laptop

The Solution

I iterated over wireframes and mockups with leadership until we landed on a design. I then worked closely with the new developer to implement the redesign. We encountered some unforeseen issues with the template while the developer implemented React components. I worked with the developer to implement some HTML/CSS code snippets I created as a workaround to keep the project on track.

New header and footer on mobile

The Results

We launched the first phase of the redesign to a select group of internal stakeholders and dealers for a limited beta test. Their feedback was instrumental in refining the overall user experience before the official launch.

UX Artifacts