Case Study: Here’s How Moving to Responsive Design Website Helped Our Brand

User experience is more important than ever in today's digital age, and with more searches now performed on mobile than desktop, the need for a mobile-friendly site is imperative to a business’ success. It’s this that led to Offspring’s site migration to a responsive design, just one of the changes the trainer retailer is making to improve the customer journey and ultimately increase conversion rates.

A quick overview

Offspring previously had no mobile website, which meant there was a poor user experience for those customers accessing the site from a smartphone and other mobile devices. This poor user experience had a direct impact on the conversion rate and revenue. It became clear that to fall in line with current consumer and digital trends, a complete migration to a responsive website design was needed.

Strategy and goals

Becoming mobile-friendly meant choosing between a responsive web design and a dedicated mobile site. We opted for a responsive web design to allow the website to resize and reformat automatically, depending on the device being used which, we hoped, would lead to an optimum viewing experience, regardless of device.

The primary aims of the site redesign were as follows:

• Improve the customer experience on all devices, reducing the need for “pinch to zoom in on" products
• Boost conversion rates
• Increase revenue generation

With mobile-friendliness now being used as a factor affecting rankings on search engines, our timing could not have been better.

The online retailer also wanted to ensure primarily that tablet users received a bespoke experience when accessing the site. The approach worked as there, too, as we experienced a 20.35% increase in the e-commerce conversion rate from tablet users alone.

Development challenges, advantages, and solutions

We surmised that there would be challenges to the redesign and highlighted a couple of high-priority challenges we'd need to overcome:

• A developmental advantage to using a responsive site design lies in it being built into the front end of the website, with the execution taking place on the customer’s device. This removes the need for server-side changes, redirects and third-party involvement.
• Testing of the responsive design was outsourced to ensure the site was tested on as many devices as possible, preventing any errors and contributing to a positive user experience no matter which device was used to access the site.

SEO considerations

From a search point of view, Offspring made use of technical audits supplied during every stage of development. This allowed the brand to monitor the effect the changes had on the rankings and organic visibility.

It was important to ensure that there was no immediate dip in search performance, which could have potentially led to a loss of traffic.

Our hope was that, as the site provided a better user experience, the result would be enhanced search visibility.

This proved to be the case when Offspring's rankings were monitored. Over 400 keywords were being tracked for the redesign and first-page visibility increased by 77.59% in three months after the launch.

By maintaining the same look and feel of the website using responsive design, we were able to offer existing customers and prospects a resource they could easily access and comfortably navigate from any device.

Important design considerations

In addition to SEO and developmental considerations, there were also numerous design elements to take into account in order to contribute to an improved user experience:

• A new sticky header (mentioned above) followed users down the page, removing the need to scroll to the top of the page to navigate

• The new search bar with predictive search allowed users to find the product they were looking for more quickly

• A new homepage design with a "latest products" slider improved navigation time around the site for users shopping for the newest products

• New product listing page design – listed pages three-wide on desktop for better first view of a product
• Responsive product listing page that scaled down automatically to two-wide or one-wide, depending on the size of the device being used
• New image view and selection process on product detail pages
• Basket page "don’t forget" section – allowed users to add products directly to the basket (useful for up-selling single-sized products)
• Improved checkout with new delivery options page

The inclusion of a sticky header and new onsite search bar with predictive search helped contribute to an intuitive navigation process, with users being able to find the information they were looking for. Users were spending more time engaging with the site, leading to an increase in conversions and sales.

The results

The migration to a responsive web design proved very successful for the brand, yielding some impressive results. When comparing year-over-year data in Google Analytics, some amazing numbers were revealed:

• 15.19% increase in mobile/tablet conversion rate
• 102.58% uplift in mobile/tablet revenue year on year
• Improved mobile site usability score from Google – was 60/100, now 100/100
• Improved search engine rankings, resulting in organic traffic increasing by 25.59%

As you might imagine, we're very happy to have made the decision to go with responsive design.

Has your brand made a similar change? If so, what were your results?