PPC Redesign
Client
Nivel Role
Lead UI/UX Designer Tools
Figma, Illustrator & Photoshop 
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.
The Challenge
The VP of Digital Strategy, the previous owner of the website, and who I reported to at Nivel, was not happy with the results of a new theme created by a third party company so I was tasked to redesign the theme. We were working through multiple projects so I was asked to break the redesign into stages for this website. First was to redesign the header, navigation and footer. Once it was handed off to the developer I would redesign the homepage and then the category, product pages and custom landing pages. This was the first time working with the BigCommerce platform as well as Foundation. It was also the first time working with a new in-house developer rather than handling both the design and development. I was asked to keep the original set of icons and brand colors but was given the freedom of exploring new layout ideas. I knew my manager preferred websites to be fairly tight on vertical space so I was sure he would be looking for a more vertically compact header/navigation.
The Solution
I iterated over wireframes and then mockups with my manager until landed on a design he was happy with. I then worked closely with a new in-house developer to implement the redesign. We ran into some issues with the template and the developer’s implementation of React components. To reduce the use of React components, I worked with the developer to implement some html/css code snippets I created.
The Results
I started the homepage redesign while the developer implemented the header, navigation and footer redesign so we were able to launch phase one and two at the same time. Leadership was pleased with the redesign. We also were able to resolve some Cumulative Layout Shift (CLS) issues we were seeing in Lighthouse. I believe working through phase three of the redesign project should resolve even more.
