It's common for people to think of Conversion Rate Optimisation (CRO) as just a bunch of little tweaks, like changing button colours, changing headlines and shortening forms when in reality CRO should be viewed as a strategy designed using psychological principles (the reason you do things), behavioural data (your actions) and intentional design. The use of these principles is the reason why CRO can perform miracles for a business by increasing revenue without increasing advertising spend or traffic.

In this case study style article, we explore the 17 different design changes that together helped increase one of our clients’ sales by 312%. The increase in sales, while impressive, is not as valuable as the lesson learned about why these changes worked, and how the same principles can be applied in any industry.

Understanding the CRO Challenge

The client was receiving a lot of traffic, however, very few of these visitors were actually purchasing. Customers were visiting the client’s web site, checking out various products and services and even placing products into shopping carts but then not completing their purchases. Using heat-maps, analytics and session recordings we discovered that a common issue was ‘friction’.

The client’s web site was modern in appearance and design, however, the actual experience for the website user was lacking in clarity, trust signals and a conversion focus. Therefore, instead of completely redesigning the client’s website, we opted to implement data-driven design improvements to the website in a phased manner.

1. Enhanced the Main Value Proposition

The old homepage of the site attempted to illustrate too many benefits all at one time. We have rewritten the hero section and made it focus on one primary value proposition, a clear, concise value proposition that provided immediate clarification in response to the one question Why would I want to use this product?

The clearer content messaging created reduced confusion and increased user engagement within the overall average of five seconds on the page.

2. Simplified the Hierarchy of Visual Information

The hierarchy of the site (headlines, call to action buttons, pricing) were visually competing for the user's attention. We have restructured the hierarchy of information in a natural sequence of how users will scan the site during their visit.

This simplification of the visual hierarchy aided in making better decisions with an overall decrease in bounce rates.

3. Redesigned the Primary Call to Action Button

The primary call to action button was redesigned to be more action oriented and distinguishable visually. We replaced generic labels on the buttons with benefit-driven language that emphasized the outcomes versus the actions.

This redesign of the primary call to action button has led to an increase in click-through rates.

4. Minimized Navigation Distractions

The navigation of the site included excessive links and numerous menu items that were pulling users away from a pathway to conversion on the site. We have simplified the navigation and reduced the number of unnecessary links on high-intent pages.

By limiting the options available to users during their visit, they will be more focused on completing their respective key actions.

5. Added Trust Elements at the Top of the Page

In the past, testimonials and certifications were located at the bottom of the page. We have moved the key trust elements to be above the fold and/or near the conversion point to improve user confidence and reduce.

6. Mobile Experience Optimisation

While mobile traffic accounted for more than 60% of total visitor traffic prior to redesign, the experience was still cluttered. With this redesign, we created layouts specifically for mobile view, to improve spacing and tap targets, and to prioritize content.

As a result of this redesign mobile conversions grew significantly.

7. Page Load Speed Optimization

Poor page load speed was causing visitors to leave without converting. We only over optimized image assets, we also optimized script files, and we eliminated unnecessary third-party tools.

As little as 1 second improvement on page load speed had an immediate measurable impact on both visitor engagement levels and conversion rates.

8. Checkout Process Streamlining

The original checkout process was too lengthy with too many different steps. By reducing the number of fields required to complete a form and eliminating those that were not necessary, coupled with the addition of progress indicators we were able to create a more streamlined experience.

The shorter the checkout process was, the higher the completion rate.

9. Microcopy Added for Clarity

To provide clarity to the users while completing forms, engaging with CTAs, and understanding pricing details, we added small amounts of explanatory text adjacent to the respective elements to eliminate (or significantly reduce) the amount of hesitation that a user might experience.

These efforts helped to reduce friction at many of the critical points in the customer journey.

10. Product Page Enhancement and Layouts

We redesigned product pages to display the customer benefit prior to displaying the product feature. We also enhanced product page layouts via scannable sections and represented product information via both iconic representation and concise copy.

As a result of these enhancements, it allowed users to quickly understand the value of the product.

11. Created Urgency without Being Pressuring or Deceitful

We introduced subtle urgency elements like "limited quantity" and "limited time" to create urgency, but did so in a non-pressure and non-deceptive way.

This created a need for quicker decision-making without sacrificing trust.

12. Improved Form Design

Forms were redesigned with better spacing, inline validation, and clearer error messages, and we reduced the number of required fields on forms as much as possible.

Form usability improvements increased form completion rates.

13. Used Consistent Design Patterns

Inconsistent buttons, layouts, and interactions created doubt. By implementing standard design patterns for all UI components across the site, we were able to make the experience familiar and predictable.

Standardizing the design created a more trustworthy and consistent experience.

14. Optimized Content for Easier Scanning

We broke long paragraphs into shorter paragraphs with headings, bullets, and visual breaks in order to allow users to more easily and quickly find what is most relevant to them.

Increased ability to scan content increased user engagement and decreased number of drop-offs.

15. Made Risk Reversal Elements More Visible

To help reduce users' anxiety when deciding whether or not to make a purchase we made elements that reduce anxiety (such as money-back guarantees, free trials, and disclosure of return policies) more visible and placed them in close proximity to Call-To-Action buttons.

Reducing a user's anxiety about their purchasing would ultimately make them feel more confident about converting.

16. Removed Unnecessary Visual Noise

We removed decorative images that provide no utilitarian purpose, and increased the amount of white space in order for users to better focus on and read content.

Less cluttered designs will create an environment for more ease in making decisions.

17. A/B Tested Every Major Change

None of the changes were made regardless of providing previous control items - each change was tested against previous control item to give objective data to provide basis of decision making not on preconceptions, but rather all decisions were made based on measured data.

The iterative nature of all these changes resulted in cumulative change effects.

The Result: 312% Sales Growth

Individually, many of the changes provided individual impacts. So the aggregate of all of these created a site that was designed around conversion instead of just increasing customer traffic while decreasing ad spend caused by a 312% increase in sales for the Client for a sustained period.

This result provides further proof of there being a difference in that design is used for purpose (strategic) versus being used for decoration (tactical).

Key CRO Takeaways for Businesses

• Reductions in friction yield higher conversion rates

• When investing money, clarity of offer trumps creativity of benefit

• The visual aspects of trust and usability supersede the visual only portion

• Quality changes, maintain w/ test = Greater Returns on Investment

CRO is an ongoing process rather than a defined project.

Final Thoughts

The design and the business results from Conversion Rate Optimisation are the same. As such, there needs to be empathy for the users, a methodical approach to testing, and a willingness to eliminate things that do not add value. The natural result of rooting your design decisions in actual user behaviour is a more effective solution.

At Pairfect Design Studio, we think of CRO as a strategic relationship between designers and businesses. By aligning our designs with your data and goals, we are able to demonstrate that thoughtful design changes will produce exceptional results, releasing the potential of the growth that exists within your existing traffic.