Evolutionary Design: Crafting Websites That Adapt and Thrive

Most redesign projects will fail, but businesses will often be unable to identify why. Have you experienced the frustration of a website redesign that backfired, leading to a decline in conversion rates? Or does your brand find itself caught in a costly cycle, redesigning the website every few years without seeing significant improvements in customer experience or sales?

We’re here to explain why complete redesigns can harm businesses and why it may not be the solution you’re looking for. This post presents an alternative approach to traditional redesign: evolutionary redesign. Discover what evolutionary redesign entails and how it can help you boost your conversion rate.

To understand evolutionary design fully, it is important to examine why traditional redesigns can harm businesses. Traditional design cycles within a company often include an expensive and lengthy process of implementing all design changes as one project. Although this has become the most common way businesses approach redesign, it has its major pitfalls. Implementing several changes at once means that if any aspect of the design negatively affects the conversion rate, finding the source of the issue can be extremely difficult.

In contrast, evolutionary redesign focuses on testing individual changes one by one. Separating complicated redesigns into smaller individual changes allows a de-risked approach to implementing design changes.

Why is this so important? During a complete redesign, it might appear that the overall conversion rate has decreased. Yet, this dip could be attributed to only a handful of changes having a negative effect. Meanwhile, some changes could be driving positive results, but the negative impact of the majority overshadows them. Since these positive changes remain hidden, it becomes impossible to identify and refine them through iteration.

The same principle applies to successful redesigns, too: while your overall conversion rate may have gone up, certain unidentified changes—changes that may have seemed like no-brainers—could still be pulling it down (even if things have netted out with a positive result).

For an example of such a ‘no-brainer’ change, consider the below:

Based on some user research, the Dominos team was keen to switch from a vertical scroll to a horizontal scroll on its menu. We urged them to test. They did. This change ended up being detrimental to the site, losing 3.13% of overall revenue, which, given the company’s size, would have equated to a loss of over $100 million.

Evolutionary Design allows us to remove any changes that negatively affect conversion rates, meaning only the changes that have positive effects are implemented. Consider the scenario where this alteration had been executed through a traditional batch redesign. Despite the identical adverse effects, pinpointing the root cause of the decline in conversion rate would have posed an impossible challenge, and the loss in conversion rate would have been far more significant over a prolonged period.

The argument for redesign can affect companies of all sizes, whether start-ups or established brands that have been online for years. In the next section, we’ll explore the redesign strategies of Amazon and Marks & Spencers and why one succeeded where the other failed.

In the realm of website redesigns, Marks & Spencer, the British retail giant, embarked on a two-year journey to overhaul their online platform. Their ambitious project, which culminated in the launch of the new website in 2014, came with a hefty price tag of £150 million.

This transformation encompassed two significant shifts: firstly, the migration of their backend away from Amazon, and secondly, the adoption of a more visually engaging “magazine” style frontend for their e-commerce interface.

However, despite meticulous planning and investment, the launch of the revamped website in February 2014 was met with disappointment. Sales plummeted within three months, and the company’s stock price took a hit. Upon reflection, it became evident that many technical and usability issues had plagued the user experience, contributing to the website’s lackluster performance.

In hindsight, consolidating all the changes into a single release proved to be a double-edged sword for M&S. While it forced them to confront and prioritize the issues, it also hindered their ability to address them incrementally and adaptively.

Had M&S embraced an evolutionary design strategy, they could have mitigated these setbacks and capitalized on increased sales in the preceding two years. This example serves as a poignant lesson in the importance of iterative refinement in the ever-evolving landscape of online retail.

“Our success at Amazon is a function of how many experiments we do per year, per month, per week, per day.” ― Jeff Bezos.

Now, let’s compare M&S’s redesign approach with Amazon’s. When was the last time Amazon revamped its website? “Never” and “Constantly” are both valid responses.
Amazon consistently tests and enhances its website, refining various aspects such as the Buy Now button, 1-Click ordering, suggested products, and checkout. As a result, alterations to its website occur frequently, often in subtle ways.

Jeff Bezos, the founder of Amazon, is renowned for emphasizing the importance of experimentation in the company’s success. He has famously stated that Amazon’s prosperity is contingent on the volume of experiments conducted annually, monthly, and daily. Bezos advocates that doubling the number of experiments undertaken each year will lead to a corresponding increase in inventiveness.

Amazon continues beyond just one round of testing. They continuously iterate on their designs based on the results of A/B tests and other data sources. By constantly refining and optimizing their website, Amazon ensures it remains competitive and maximizes conversion opportunities.

We don’t just tell our clients that evolutionary design works; we show them.

Here are two real-life examples, taken from our own work, of why you should move to an iterative design approach.

BuildDirect

BuildDirect, a leader in high-quality flooring, was looking to redesign its homepage. Instead of approaching this through a traditional redesign and implementing several changes simultaneously, we did this iteratively by testing various new components separately in an A/B/n test.

This method allowed us to split out all of the changes into unique variants and therefore meant that only the most positive changes were implemented, including one (variation C) that produced a substantial +16.9% uplift. More importantly, this approach allowed us to quickly identify and prune any iterations that were negatively affecting the site. If we had packaged them up into a wholesale redesign, the gains would have been mostly canceled out by the losses. Instead, we saw a significant increase in conversions.

WeBoost

Original product page design

WeBoost, a company offering cell phone signal boosters, sought to revamp significant portions of its website. Rather than approaching this with a traditional redesign project, we spent just over a year completing experiments for Weboost to ensure every change had the intended impact.

During this redesign process, we worked on Weboost’s category pages. We removed a lot of the technical information on these pages to direct customers straight to the product page for more information.

Our category page test results revealed a fascinating insight: the placement of technical information significantly impacts user behavior. When the technical details were available on the category pages, users didn’t rely as heavily on the product pages for clear information.

However, once we removed this information from the category pages, the clarity—or lack thereof—on the product pages became more apparent and detrimental to the user experience. As a result, we noticed that when customers reached the product pages, they encountered several issues. Key purchasing information was buried below the fold, vital package content was hidden in dense text, and multiple CTAs competed for attention.

Initial testing on the product pages yielded small but significant wins, prompting us to address above-the-fold issues. In variation A, we redesigned the hero section to tackle:

• Anxiety: The primary CTA was below the fold.
• Clarity: Product features were buried in the Specification section.
• Value Proposition: Strong reviews were hidden.

By moving the CTA and clarifying product features above the fold, we saw a 27% increase in completed orders.

When running tests for WeBoost, balancing speed and the precision of isolating impacts was essential. While our best practice involves testing individual changes separately to accurately measure their effects, there are times when constraints like limited time or budget necessitate a different approach.

We might conduct tests where multiple elements are changed simultaneously. This method allows for quicker insights and faster implementation, but it does come with a trade-off: the inability to pinpoint which specific changes drove the results. By acknowledging this trade-off, we can ensure that our strategy remains flexible and pragmatic, adapting to the needs of each client.

Exploring Further with Variation B

Following the success of Variation A, it was crucial to ensure we retained the increases we saw. To achieve this, we isolated one specific change in Variation B, allowing us to accurately measure its impact.

We introduced variation B to address below-the-fold issues. We implemented tabulated information, a strategy that had previously proven effective on the weBoost homepage.

Our hypothesis was that organizing content into clear tabs would improve eye flow, reduce cognitive load, and facilitate information retrieval, thereby driving conversions.

Despite strong support from our strategy team and the weBoost executive team, variation B unexpectedly underperformed, resulting in an 8% decrease in orders compared to the control. When isolated, the tab change led to a significant 27.6% reduction in sales compared to variation A.

It’s tempting for companies to dive headfirst into complete redesigns based on intuition or assumptions about what might work better. However, this experiment underscores the crucial role of evolutionary design. Although Variation B didn’t succeed, weBoost adopted the successful changes from Variation A. If we had combined all the changes from both Variations A and B into a single redesign of the product page, it would have been nearly impossible to identify the specific design elements causing the decrease. Additionally, the effective changes from Variation A would have been hidden.

The journey through Evolutionary Design’s intricacies unveils a critical perspective shift from traditional website redesigns.

The cautionary tale of Marks & Spencer’s ambitious but ultimately flawed overhaul is an example of the dangers of redesign. In contrast, Amazon’s constant evolution underscores the importance of iterative design in maintaining competitiveness and maximizing conversion opportunities.

By embracing Evolutionary Design, businesses can move past the limitations of opinion-driven overhauls and pivot towards a data-driven, user-centric paradigm.

So, the next time the idea of a redesign comes up, remember Evolutionary Design. Embrace the ethos of continual improvement and harness data-driven decision-making. It’s the key to enduring success.