When one of our clients decided to replatform their desktop site to make their website responsive, they realized their mobile conversion was much lower than the industry average and decided to bring Branding Brand in to identify and solve their mobile performance issues.
After launching their new optimized site, our client experienced major increases in their KPIs:
We were able to achieve this by identifying the problem, optimizing the site, launching it in a 50/50 multivariate test, and analyzing the results.
Identifying the problem:
With the help of our analysts and optimization experts, we were able to identify the most opportunities of optimization on product index pages and checkout.
For an initial analysis, our analysts identified pages with high bounce and exit rates and low add-to-cart rates. Then, they analyzed the funnel conversion rate to identify checkout pages that had low continuation rate.
With our extensive list of multivariate tests and results from working with over 200 of the world’s leading retailers, our optimization experts were able to pinpoint changes and enhancements based on past experience and successful test results.
Optimizing the site:
For product index pages, we implemented updates for the header, search bar, banner, filtering, and product images.
Before: The search bar wasn’t very intuitive or placed well on the fully-responsive site. It blended in with the “Shop” link.
After: The search bar is independent of all other assets. The words “Search” and a magnifying glass are inside the field to clearly indicate its functionality.
Before: The page was dull and did not encourage users to shop the page.
After: A relevant promotional banner displays at the top of the page, which adds color and interest.
5. Product Images
Before: Large product images created a mass-scrolling page and only displayed one product at a time.
After: Resized images display in a grid, which shows two products across.
In checkout, we updated the status bar, payment methods, credit card input, "Continue" button, and promo code.1. Status Bar
Before: Initially, the site offered no indication of where the user was in the checkout process.
After: A status bar clearly identifies the number of steps in checkout as well as the current step.
2. Payment Methods
3. Credit Card Input
Before: After typing in the credit card numbers, the type of credit card also had to be selected.
After: The credit card number automatically detects the card type.
4. "Continue" Button
Before: The button was not a clear call-to-action and was placed at the top of the page.
After: The button appears at the bottom of the form, and an arrow indicates that the user would move on to the next step.
5. Promo Code
Launching the Optimized Site:
To test out the changes, the site was launched as an A/B test with 50% of traffic going to the fully-responsive site and 50% of traffic going to the channel-responsive site.
Analyzing the Results:
The changes made show incredible increases in key performance indicators. After making changes to the navigation and updating the product index pages, total pageviews increased 123%. Visitors viewed approximately 7 pages per visit (PPV) on the optimized site compared to 3 pages on the responsive site, a 113% increase in PPV.
As more pages were viewed, orders increased 44% and conversion increased 37%. More orders and higher conversion increased revenue by 29% and revenue per visit by 23%.
What's the Takeaway?
Our client expected responsive to solve all of their problems, but the truth is that there’s a lot more that goes into a successful mobile site. It’s not good enough to have a mobile site. You need to engage your customers with an amazing experience and serve them before someone else does. The best mobile websites are always improving.
In this case, our channel-responsive site used the best qualities from responsive design without limiting the overall experience and offered the following benefits:
- It didn't compromise the brand by trying to fit all of its unique features into a one-size-fits-all template.
- The design provided a unified experience with endless possibilities, which continues to keep the company as a front-runner in the competitive mobile market.
- Channel-responsive design allowed for flexible, independent design between the desktop and mobile sites.
In the longrun, the unique benefits in having a channel-responsive site are:
- Mobile solutions can have a separate roadmap for success from the desktop site.
- A/B tests are possible without changing anything on the desktop site.
If you're currently looking to design a responsive site, follow our responsive design best practices to give your customers the experience they deserve.
Did you miss our "How to Optimize Your Responsive Solution" webinar with Forrester?