Company Logo in White
Backbone
A brand new homepage for the leading handheld mobile gaming device.
Design
Rais Ahmed
Research
Rais Ahmed + Brian Alenduff
Overview
Following a brand refresh by Recess Studios, we took the opportunity to design a brand new homepage for Backbone. Because there is a premier product, the goal of this redesign was to provide ample detail about the Backbone  One Controller, all of its capabilities, while also converting users early in their journey, right from the homepage.
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