Research-based Web Design for Conversion Optimization-A Case Study

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Table of Contents

Context

In the last few weeks of July 2020, I challenged myself to apply what I learned about copywriting and conversion optimization to redesign a website.

I used Biomat.com website to illustrate the steps I did for conversion optimization. These steps can be applied to any website. (I came across Biomat’s website when searching for a biomat for my mom as she had back pain.)

Research

Research should always be the the first step of any optimization project since it’s where we can understand more about customers and figure out what problems our website has.

For this project, I could not do quantitative research via Google Analytics or other data analytics techniques since I don’t have their data.

Because of this, I could only conduct qualitative research. So, this is just a quick and dirty approach through the whole research journey.

Three types of research analyses I did: Heuristic Walkthrough5 Seconds Test and Who, What, Where exercise.

Brief descriptions of these analyses:

Who, What, Where exercise: It’s about asking who are you communicating with? What do you want them to do? Where is the traffic coming from? This helps to get to know target audience, their goal, and what’s their awareness level is.

5 Seconds Test: This is about looking at the screenshot for 5 seconds and record the impressions after it. This is to understand what the customer’s first impressions of the page are.

Heuristic Walkthrough: This is about identifying the weakest points and familiarizing yourself in the landing page experience. This fosters empathy and understanding for the users and what they are experiencing as they go through your landing page funnel.

For example, here are the annotations I had after doing the 5 seconds test analysis:

After doing the necessary research using these analyses and identified the problems, I laid out the hypotheses that would lead to more wins:

  • Include clear and big headlines and sub-headlines that align to the value proposition.
  • Declutter the page, so every part has its own space.
  • Include concise social proof near the beginning and the end of the landing page.
  • Include call to actions above the fold.
  • Have more relevant images above the fold.
  • Ungroup the texts to make it more readable and change to a more readable, larger font.
  • Add more negative space throughout the page.

I could test every element separately or test them all at once. Here, my purpose is to redesign the homepage. So, it’s more timesaving to test the redesign, then re-test variations of elements if they are not converting well.

Rewrite Copy: A Copy-First Approach

It’s easier to design the landing page into 2 separate phases: the first phase is for copy, the second one is for design. This allows us to focus on one element at once and simplify the process.

Here were the steps I took to create the new copy for Biomat’s website, include headlines, features, and body:

  • Create unique value propositions: Separate features vs benefits. Rank those benefits & features in terms of (1) uniqueness, (2) severity and (3) frequency. Figure out what’s in it for customers and why customers should care.
  • Create several variations of headlines based on unique value propositions and rank them in terms of (1) clarity, (2) desire and (3) specificity.
  • Only include relevant features that focus on potential objections customers might have.
  • Include lots of “you” in the copy to make it personal.

Here I crafted the copy for Biomat’s landing page with clear elements of what should be included. The result was an outline of a copy-only landing page.

I created several versions of headers and sub-headers to see which sounds best. And for every feature, I anticipated the objections customer might have about the product and addressed them accordingly.

The Re-Design: A Mobile-First Approach

The next step is design.

I decided to redesign the website’s elements to be based more on human psychology, including:

  • Separate the long paragraphs into shorter ones to reduce cognitive overload.
  • Create more negative space on the website.
  • Remove customers’ uncertainty with expectation managers, i.e. Money-back guarantee, 0% financing option below call to action buttons.
  • Include more social proof.
  • Include big and relevant call to action buttons, as the goal of this homepage is to drive sales.
  • Provide contact info in the footer to increase transparency and trust.

I designed the mobile version first to make sure I don’t forget the necessity of responsive design, as more people view and purchase via their phones nowadays.

This is the new version of the design on mobile:

Images source from Biomat.com

Here, I emphasized essential elements using the principles of information hierarchy:

  • Big and bold headlines with supporting sub-headlines.
  • Elements of scale, color, contrast, alignment, and proximity to make sure it’s visually appealing and relevant.

Once the mobile version was designed, the desktop version was much easier to produce:

 

How much text to include

I expected people might have questions about how this product can help reduce pain. Including these questions on the homepage is challenging since there are tons of research and texts about this Biomat.

So rather than providing more text on the homepage, I included clear buttons to redirect them into other pages where they can find answers about the product. This way, the homepage serves only limited goals — keeping customers focused on the main goal.

Next Steps

Test, test and test

The redesign was based on best practices. But to focus on best practices alone is not enough.

For conversion optimization, it’s crucial to continue testing different variations of elements, i.e. call-to-action buttons, headlines, etc. to see what converts best.

Only by testing and iterating that we can make sure not to leave any money on the table and maximize wins.

What I learned

Emphasis on copy and testing

A lot of case studies only discuss design and skip the copywriting section.

It’s because case studies were often written by UI/UX designers. If only focusing on how to make the website more beautiful, it’s incomplete. A clever design with poor copywriting (i.e. lacking understanding of customers) would likely have lower conversion rates.

As I have background in data analytics and marketing, I find copywriting and testing to be an essential part of homepages with high conversion rates. Good copywriting acts as a great salesperson who can speak the minds of customers and drive sales.

Importance of research

There are tons of tweaks/potential changes that we can do to improve the design, how do we know what to prioritize?

For this, the role of research is crucial: we need to know what’s currently working/not working. Then we can generate hypothesis and create tests to improve conversions based on what the research tells us.

Don’t reinvent the wheel

It’s more optimal and timesaving if we stick on existing principles, human psychology, layouts, and formulas that have been proven to work. Only when best practices are not producing results, we might want to try new things.

 

More To Explore