Company Logo in White
Backbone
Designing a Product Page (PDP) that flexes for Backbone's product offering.
Design
Rais Ahmed
Research
Rais Ahmed
Overview
Backbone is the leading gaming device on the market, bringing console and PC games on-the-go, virtually anywhere. Their premier product, the Backbone One Controller is offered for different phones via its connector (USBC & Lightning), and available in different colors. We redesigned the Product Page to ensure that a user is easily able to discern which version of the control is compatible with their phone, resulting in higher conversion and less returns, the main objectives of this redesign. A secondary objective for this redesign was the make sure that this PDP is adaptable for Backbone's secondary product offering of accessories and cases.
Scroll on the screen below to view more
Scroll on the screen below to view more
Research
1
Preliminary Research
Before we defined scope and design requirements, we did a round of preliminary research including a round of comp analysis against competitors in the space, as well as leading e-commerce brands to identify common patterns and best practices.
We also conducted a survey asking our users to identify existing pain points they had experienced while browsing on Pair's product page. We tested among two separate cohorts: the loyal user that has been with Pair for 2+ years, and newly adopted customers who recently had made a purchase.
2
Usability Testing
Since this page refresh was introducing multiple net-new components for our users, we wanted to conduct a round of usability tests to validate the designs we put together. We ran 2 separate unmoderated tests via UserTesting. Each test included 5 participants, with one group being existing Pair users, and the other group being users who have never interacted with Pair's website.
3
A/B Test
Once the designs were ready and built by engineering, we launched an A/B test to 50% of traffic on site. Because this was a page that experienced high traffic, this acted as a final round to validate the updated designs. (spoiler: the variant vastly outperformed the control)
Process
Kick-Off
Once preliminary research has been conducted, and insights have been shared out to the broader team, the official kick-off meeting takes place. Here, we include our lead PM, designer, and engineer to discuss the scope of the project at-hand.
We identified several areas of improvement to tackle a decreased bounce rate, while boosting conversion:
Updated Photo Carousel
Our previous image carousel was clunky, took up too much vertical screen real estate for mobile screens, and performed poorly.
Information Hierarchy
From our preliminary survey conducted, we identified that both our loyal users, along with guest visitors had a difficult time finding core pieces of information including frame shape, size, material, shipping detail, among others.
Recommended Products
We hypothesized that due the lack of recommended/similar products, users would bounce much earlier in their journey when it was avoidable.
Design Rounds + Tech Feasibility
Referring to the areas of improvement, the first round of design occurs. During this process, we conduct a check-in with the pod every other day to ensure that the features being designed are feasible for engineering, and in turn, don't create any added scope to the project/roadmap.
Usability Testing
Depending on the project at-hand, we discuss the need of running a usability test. In the case of the product page, because it was a larger refresh of the page, we decided to put it in front of our users (and non-users) to gather further insights before launching.
At Pair, we use UserTesting to conduct our usability studies. Utilizing unmoderated sessions, we created a script and set of tasks for the users to complete to ensure the designs were validated. We defined what is considered a successful usability test,
Solution
Preliminary Research
Before we defined scope and design requirements, we did a round of preliminary research including a round of comp analysis against competitors in the space, as well as leading e-commerce brands to identify common patterns and best practices.
We also conducted a survey asking our existing users to identify existing pain points they experienced while browsing on Pair's product page. We tested among two separate cohorts: the loyal user that has been with Pair for 2+ years, and newly adopted customers who recently had made a purchase.
Research
For this initiative, we conducted two separate rounds of research:
1
Preliminary Research
Before we defined scope and design requirements, we did a round of preliminary research including a round of comp analysis against competitors in the space, as well as leading e-commerce brands to identify common patterns and best practices.
We also conducted a survey asking our existing users to identify existing pain points they experienced while browsing on Pair's product page. We tested among two separate cohorts: the loyal user that has been with Pair for 2+ years, and newly adopted customers who recently had made a purchase.
2
Usability Testing
Since this page refresh was introducing multiple net-new components for our users, we wanted to conduct a round of usability tests to validate the designs we put together. We ran 2 separate unmoderated tests via UserTesting. Each test included 5 participants, with one group being existing Pair users, and the other group being users who have never interacted with Pair's website.
3
A/B Test
Once the designs were ready and built by engineering, we launched an A/B test to 50% of traffic on site. Because this was a page that experienced high traffic, this acted as a final round to validate the updated designs. (spoiler: the variant vastly outperformed the control)
View