The Scientific Approach to Website Design

Designing a website for the attention spans of today’s users can be especially challenging without the right tools in place. When agencies fail to use data as the driver for their design process, the user experience suffers, and opportunities are lost. Since conversion is everything, we must design for the user, not for the website’s stakeholders or anyone else. We want to make the user experience as enjoyable and painless as possible so we have a better chance of converting visitors. We do this by using a scientific approach that is supported by data. In this post, we’ll focus primarily on A/B testing, but other tactics such as user testing and exit/conversion surveys can also be very effective.

To explain why the scientific approach is necessary, let’s consider the following scenario. There’s a beautiful website with stunning imagery and graphics, well-written copy and fast-loading pages. It’s generating several leads a day and all appears to be running smoothly. But, unbeknownst to top management, the company is in fact losing thousands in opportunity costs each week. The website was designed with many initial assumptions about how visitors would use it, but these assumptions were not followed up with data analysis. As a result, a high rate of visitors continue to struggle to find what they are looking for and ultimately are abandoning the website to explore other competitors.

Let’s take a closer look at how the scientific approach can be used to improve the user experience and in turn yield a much higher conversion rate.

Research & Assumptions

The initial design of a website will not be perfect. That is to say, it will not be fully optimized to yield the highest rate of conversion. We as designers must rely on usability best practices, industry research, and our own assumptions to create an initial design that we hope will perform well out of the gates.

Usability Best Practices

When we talk about “usability best practices”, we’re talking about web design principles that have proven to be effective at achieving desired outcomes. Examples include clearly distinguishing buttons from other graphical elements, simplifying the navigation and interface, and providing prominent feedback when the user performs an action (e.g. submits a form).

Industry Research

Industry research is important because it helps us identify what your visitors are used to experiencing on other websites. If, for instance, you’re hoping to win business from other popular websites, you wouldn’t want to subject your visitors to a new learning curve in order to use your website. Another key benefit of industry research is determining what your competitors are doing right and wrong. We can then compile a list of ideal features and include them in the scope of the new design.

Assumptions

Once our initial research has concluded, we can then begin the design process. We’ll need to make many assumptions about the ideal colors to use, positioning of elements, navigation, messaging, etc. But, we’ll be able to confirm those assumptions or improve upon them when we perform A/B testing in the next phase.

Testing, Assessing & Implementing

After the new website has launched and a high level of traffic is sustained, the next phase requires an iterative process of testing, assessing, and implementing. We’ll want to run many tests simultaneously so we can identify problem areas sooner than later. The number of tests and iterations performed will depend on the size and complexity of the website. Larger websites with more advanced features, will require more testing, while smaller, simpler websites will require less.

A/B Testing

When we test a website after launch, we’re concerned primarily with the sequence of events that begins when a visitor lands on a web page and ends when the visitor performs a desired action (e.g. submits a form or purchases a product). We can test each step in the sequence by creating different variations of messaging, imagery, styles, etc. using a process called A/B testing.

To illustrate A/B testing, let’s say one of your conversion goals is to have visitors submit a form on a page that features your highest margin service. Let’s also say that the first step most visitors take is to click a “Read More” button below an excerpt on your homepage. During A/B testing, we decide to test adding another button “Schedule a Demo” that leads directly to the contact form at the bottom of the service page. Our hypothesis in this case is that we will have a higher rate of conversion with this added button than we currently do. We then roll out the A/B test such that 50% of homepage visitors will view the existing version and 50% will view this alternate version.

Assessing & Implementing

Using the above example, if our hypothesis is correct, the alternate version of our A/B test will yield a higher conversion rate. To find out, we wait until a statistically significant amount of data has been collected for both versions and then compare the data to determine the winner. If the alternate version is the loser, we can either start a new test or decide the original version is optimal. Otherwise, if it is a winner, we can implement that feature improvement and continue testing other steps in the conversion sequence.

The Results

Iterative testing will continue to boost a website’s conversion rate over time when performed correctly. Factors such as the accuracy of our hypotheses, the number of tests, the sample size, and the gains realized, will all play a role in determining the success of our strategy. When assessing results, we are mindful that at a certain point, the cost of testing may exceed the gains realized by marginal improvement. When this occurs, it’s time to reduce the amount of testing and enjoy the optimized conversion rate achieved. Otherwise, if we continue to see healthy ROI, we stay the course and continue to improve.