As the main designer on this project in Q2-Q3 2022, I was responsible for ideating design concepts; regularly meeting and discussing with engineers, product managers, QA and Plume leadership; and delivering final designs for production. I worked alongside my team at Graveflex of several engineers and two product managers, and I took direction both from the creative director at Graveflex, as well as Plume’s Product Ops, Marketing, Content and Legal teams.
Project Overview
The HomePass landing page is, of course, the first page you see when being directed to the website. As Plume rolled out their newest product, the SuperPod with WiFi 6E, they wanted a refreshed landing page to show its arrival and increase users’ interest in purchasing the product.
I was the leading designer for this project, responsible for competitive research, creating design solutions and dictating the final mockup while Plume’s Research division managed user testing. I worked on this project throughout multiple design sprints, as we later implemented the new designs for Plume’s regional HomePass websites as well due to the project's success.
Goals
With the arrival of the newest Plume product, SuperPod with WiFi 6E, my goal was to refresh the landing page so that this was apparent, giving users the ability to easily compare the different products against each other. Ultimately the goal was to increase conversion rates for the new product.
Design Process
Reusing Blocks
If you take a look at my case study Plume Design System, you’ll see that early on with the client we took the existing components, templates and styles and simplified this into a design system. This allowed us to easily reuse certain web “blocks” while having the ability to create new ones that aligned to the design system. We could easily communicate with developers, QA and the Plume team while picking which blocks we’d like to reuse or create. During this particular project, we selected a few blocks to reuse while also creating some new ones. Below is a block that we have used many times across Plume websites since it is a common one for ecommerce sites to have.
Competitive Analysis
One of the new additions to the blocks we used for this project was the product comparison block. Plume expressed they wanted the user to be able to compare all the products they had on the landing page. I took to doing some competitive analysis to see how similar companies were accomplishing this on their sites. With the research I discovered, I designed a new block in which the user could easily compare the different products, ultimately in hopes that they'd select which one was most appropriate for their needs.
Responsive Design and Accessibility
The other key components to making this project successful were to create designs across all viewports—desktop, tablet and mobile. And, of course, it was equally important to make the designs accessible. In the end when we ran lighthouse scores for accessibility, they tended to be in the low to high 90's.
Results
With the redesign, users could easily compare the different products against each other and they could select which product they wanted to purchase. Through user research, we discovered that the redesign increased conversion rates three times the original amount. Plume was eager to implement this design to their other regional HomePass stores, which we eventually did for Belgium, Germany and Great Britain.
