What is Ecommerce Conversion Design? The Website Redesign Method to Know.

If you're running an ecommerce business, you know that driving traffic to your website is only half the battle. The real challenge lies in converting those visitors into paying customers. But with average ecommerce conversion rates hovering around 2-3%, it's clear that many online stores are struggling to turn browsers into buyers.

The solution lies in ecommerce conversion design - a data-driven approach to website redesigns that emphasize user experience and psychology to guide visitors towards making a purchase. It's not just about making your website look pretty, but rather using design as a tool to influence behavior and drive conversions.

In this post, we'll take a deep dive into the nitty gritty of ecommerce conversion design. We'll take a look at how it differs from traditional web design, when and who should adopt this approach, and walk through the 10 key stages of the conversion design process - from initial research to ongoing optimization. Along the way, we'll share real-world examples, data-driven insights, and actionable tips you can implement in your own ecommerce store.

Whether you're a seasoned ecommerce professional or just starting out, this guide will provide you with a comprehensive framework for designing a high-converting online store that satisfies your customers and grows your business. 

So grab a notepad, pour yourself a cup of coffee, and let's dive in!

Traditional Web Design vs Conversion Design: What's the Difference?

94% of negative website feedback is related to web design, according to a study by Stanford University.

At first glance, traditional web design and conversion design may seem like two sides of the same coin. After all, both approaches aim to create an attractive, functional website that represents your brand and showcases your products. 

However, there are some key differences between the two. Here’s the lowdown:

1. Traditional web design

Traditional web design is often more focused on aesthetics and branding. The goal is to create a visually appealing website that accurately reflects your brand identity and values. This might involve eye-catching graphics, beautiful product photography, and a sleek, modern layout.

While these elements are certainly important, traditional web design often prioritizes form over function. The emphasis is on making the website look good, rather than on optimizing it for conversions. 

‍

‍

Traditional web design is often better suited for established brands that already have strong brand recognition and don’t have website performance and conversions as a primary goal. The focus on aesthetics and branding reinforces the company's identity and values, creating a visually compelling website that resonates with existing customers. This approach works well for luxury brands, high-end retailers, or companies in creative industries where the website serves as a digital showroom or portfolio.

Traditional web design often overlooks important conversion factors, such as page load speed, which can result in a 7% loss in conversions for every 1-second delay.

2. Conversion design

Conversion design is a data-driven approach that focuses on creating a user experience that guides visitors towards taking a desired action, such as making a purchase, signing up for a newsletter, or filling out a contact form. 

It's important to emphasize that conversion design can be just as brand-focused and aesthetically pleasing as the traditional web design process. However, conversion design takes it a step further by adding an additional layer where functionality and usability are given equal importance to visuals, whereas in the traditional approach, usability often takes a backseat.

This approach involves a deep understanding of user psychology and behavior, as well as a commitment to continually testing and optimizing different elements of the website based on data and user feedback. Conversion design adapts to today's needs by ensuring that the website not only looks great but also effectively achieves business goals.

‍

‍

Conversion design is ideal for brands looking to drive more sales, leads, or conversions from their website. This approach is particularly valuable for e-commerce businesses, startups, or companies in highly competitive industries where every website visit needs to be optimized for maximum conversion. By balancing user experience, aesthetics, and continuous optimization, conversion design helps businesses acquire new customers and grow their online presence more effectively.

‍To illustrate the difference, let's look at an example:

Suppose you're running an online store that sells high-end, artisanal coffee beans. With a traditional web design approach, you might focus on creating a website with beautiful, full-screen images of coffee plantations, a sleek, minimalist layout, and plenty of whitespace to give the site an upscale, premium feel.

While this design might win awards for its visual appeal, it may not be optimized for conversions. Why?

• Visitors might have trouble finding the information they need to make a purchase decision, such as product descriptions, reviews, or shipping information. 
• The checkout process might be confusing or require too many steps, leading to abandoned carts and lost sales.

With a conversion design approach, you would start by conducting research to understand your target audience and their needs, preferences, and behavior. You might use tools like heatmaps, user recordings, and surveys to gather data on how visitors interact with your site and identify areas for improvement.

‍

‍

Based on this data, you would then design a website that prioritizes the user experience and guides visitors toward making a purchase while maintaining the same level of aesthetic appeal and brand focus as the traditional approach. This might involve featuring clear and visible calls-to-action throughout the site, educating customers on your products, using social proof like customer reviews and trust badges to build credibility, and streamlining the checkout process to reduce friction and increase conversions.

The end result is a website that effectively drives sales and achieves your business goals without compromising on aesthetics or brand identity.

Let’s take a look at some stats:

‍

1. Improving the UX design of a website can seriously boost a business's conversion rate by up to 400%.

2. 66% of customers are happy to pay more for an amazing experience.

3. Word travels fast – 72% of customers will spread the word about their experience (good or bad) to around 6 other people.

‍

It's important to note that conversion design can be just as brand-focused and aesthetically pleasing as the traditional web design process. The key difference is that conversion design gives equal importance to functionality and usability, whereas in the traditional approach, usability often takes a backseat to visuals.

When and Who Should Follow a Conversion Design Approach

Now that we've gone through the differences between traditional web design and conversion design, you might be wondering if this approach is right for your business. 

The truth is, any ecommerce store can benefit from a conversion-focused design, regardless of size, niche, or target audience.

However, there are some situations where following a conversion design approach is particularly important:

1. You're getting traffic, but not conversions

If you're investing time and money into driving traffic to your website, but those visitors aren't converting into customers, it's a clear sign that your website isn't optimized for conversions. 

A conversion design approach can help you identify and fix the issues that are preventing visitors from making a purchase.

‍

2. You're in a competitive niche

If you're operating in a crowded market with lots of competitors, having a website that's optimized for conversions can give you a significant advantage. 

By providing a better user experience and making it easier for visitors to buy from you, you can stand out from the competition and win more customers. 

‍

‍

3. You're launching a new product or brand

If you're starting a new ecommerce business or launching a new product, getting your website right from the start can make a big difference in your success. 

A study by Shopify found that 50% of ecommerce stores generate less than $63,000 in annual revenue, so it's essential to optimize your site for conversions to maximize your revenue potential.

4. You're redesigning your website

If you're planning a website redesign, it's the perfect opportunity to take a conversion-focused approach. 

Rather than simply giving your site a visual facelift, you can use the redesign process to optimize your site for conversions and make data-driven improvements to the user experience.

For example, you can focus on aspects such as website speed. Did you know that nearly half of online shoppers (47%) expect pages to load in 2 seconds or less?

Of course, following a conversion design approach does require a significant investment of time, resources, and expertise. You'll need to conduct research, analyze data, and continually test and optimize different elements of your website. 

If you don't have the in-house skills or bandwidth to do this yourself, you may want to consider working with a specialized conversion design agency or consultant.

However, the payoff can be irreplaceable. By designing a website that's optimized for conversions, you can increase your sales, reduce your customer acquisition costs, and ultimately grow your business faster and more efficiently than with a traditional web design approach.

Phase 1 - Research and Benchmarking

The first phase of the conversion design process is all about gathering data and insights to inform your design decisions. This phase includes four key stages: conversion research, quantitative analysis, qualitative analysis, and conversion mapping.

1. Conversion Research

Conversion research is the foundation of any successful conversion design project. It involves analyzing your website's current performance, identifying areas for improvement, and gathering insights into your target audience and their behavior.

One of the most effective ways to conduct conversion research is through user testing. By observing how real users interact with your website, you can identify pain points, confusing elements, and opportunities for optimization.

For example, the home goods retailer Wayfair conducted user testing on their website and discovered that many visitors were having trouble finding the products they were looking for. 

Based on this insight, Wayfair redesigned their navigation and search functionality, making it easier for users to find and filter products by category, price, and other attributes. 

‍

‍

Other methods of conversion research might include:

• Analyzing your website analytics to identify high-traffic pages, user flow, and drop-off points
• Conducting customer surveys and interviews to gather feedback on the user experience and identify common pain points
• Performing competitive analysis to see how your website stacks up against others in your industry and identify best practices and areas for differentiation
  ‍

2. Quantitative Analysis

Quantitative analysis involves using data to identify trends, patterns, and opportunities for improvement on your website. This might include metrics like:

• Conversion rate: The percentage of visitors who take a desired action, such as making a purchase or filling out a form
• Bounce rate: The percentage of visitors who leave your site after viewing only one page
• Average order value: The average amount of money customers spend per transaction on your site
• Cart abandonment rate: The percentage of visitors who add items to their cart but don't complete the checkout process
  ‍

When it comes to gathering quantitative data, you've got a ton of tools at your disposal—everything from Shopify's built-in Analytics page to Google Analytics and tools like ThripleWhale and Northbeam. The key is finding the one that best aligns with your specific goals and needs.

By analyzing these metrics and segmenting them by factors like traffic source, device type, and user demographics, you can gain valuable insights into how different groups of users interact with your site and where the biggest opportunities for improvement lie.

3. Qualitative Analysis

While quantitative data can tell you what's happening on your website, qualitative analysis helps you understand why. This involves gathering feedback and insights directly from your users through methods like:

• User interviews and focus groups
• Customer surveys and feedback forms
• User recordings and session replays
• Live chat and customer support interactions
  ‍

By listening to your customers and understanding their needs, preferences, and pain points, you can gain valuable insights into how to improve the user experience on your website.

For example, the beauty retailer Sephora noticed that many customers were reaching out to their customer support team with questions about how to choose the right foundation shade for their skin tone. Based on this feedback, Sephora developed a new feature called "Color IQ" that uses a special device to scan customers' skin and recommend the perfect foundation match.

Since launching Color IQ, Sephora has seen a significant increase in foundation sales and customer satisfaction, as well as a reduction in returns due to incorrect shade selection.

In fact, a study by Epsilon found that personalized experiences like this can drive an average 20% increase in sales.

‍

4. Conversion Mapping

Conversion mapping involves creating a visual representation of the customer journey on your website, from initial landing to final conversion. 

By mapping out each step of the process and identifying potential roadblocks and drop-off points, you can gain a better understanding of how users navigate your site and where there may be opportunities for improvement.

A conversion map might include stages like:

• Awareness: The initial point of contact where a user first becomes aware of your brand or product
• Interest: The stage where a user expresses interest in your product and begins to research and compare options
• Consideration: The stage where a user narrows down their options and begins to seriously consider making a purchase
• Decision: The final stage where a user decides to make a purchase and completes the checkout process
  ‍

By analyzing each stage of the customer journey and identifying key metrics and drop-off points, you can pinpoint areas where users may be getting stuck or losing interest, and develop targeted strategies to address those issues.

For example, the online mattress retailer Casper used conversion mapping to identify a significant drop-off point in their checkout process. They discovered that many users were abandoning their carts at the point where they were asked to enter their shipping information, which required them to create an account or log in.

To address this issue, Casper redesigned their checkout process to allow for guest checkout, reducing the friction and making it easier for users to complete their purchase. As a result, they saw a 20% increase in conversion rate and a significant boost in sales.

‍

‍

Phase 2 - Designing Solutions

Once you've gathered data and insights from the research phase, it's time to start designing solutions to address the issues and opportunities you've identified. This phase includes four key stages: creative direction, solution research, designing, and usability testing.

5. Creative Direction

Creative direction involves establishing the overall look, feel, and tone of your website, as well as defining the key design principles and elements that will guide the rest of the design process. This might include:

• Developing a brand style guide that outlines your color palette, typography, imagery, and other visual elements
• Defining your brand voice and tone, and how it will be reflected in your website copy and content
• Establishing a clear hierarchy of information and calls-to-action on each page of your site
• Creating a consistent, cohesive visual language that reinforces your brand identity and values
  ‍

The goal of creative direction is to create a website that not only looks great, but also effectively communicates your brand message and guides users towards taking desired actions. 

For example, the outdoor gear retailer REI recently redesigned their website with a focus on creating a more immersive, content-rich experience that reflects their brand values of adventure, sustainability, and community.

The new design features large, high-quality images of outdoor landscapes and activities, as well as interactive elements like 360-degree product views and user-generated content. The site also includes educational resources and guides on topics like hiking, camping, and sustainability, reinforcing REI's position as a trusted authority in the outdoor industry.

6. Solution Research

This stage focuses on addressing the key user experience challenges identified through earlier research, considering the essential features and goals that need to be accomplished through the new website.

The process involves:
‍

1. Laying out the primary user experience issues discovered during the conversion research phase, such as navigation difficulties, unclear calls-to-action, or suboptimal mobile responsiveness.
   ‍

2. Identifying the crucial features and objectives that the new website must incorporate and achieve, based on insights gathered from user feedback, stakeholder input, and business requirements.
   ‍

3. Conducting design workshops and brainstorming sessions with stakeholders and team members to generate ideas and explore potential solutions for each of the identified user experience challenges.
   ‍

4. Analyzing competitor websites to identify strengths, weaknesses, and opportunities for differentiation, ensuring that the proposed solutions are not only effective but also unique and competitive in the market.
   ‍

5. Creating user personas and user journeys based on the insights gained from the conversion research phase to better understand the needs, preferences, and behaviors of different customer segments, enabling the design of tailored solutions that cater to each group.
   ‍
6. Researching best practices and industry standards for ecommerce design and user experience to inform the development of solutions that align with proven methods and meet user expectations.
   ‍

The goal of solution research is to generate a range of potential design approaches and solutions that address the key issues and opportunities identified in the earlier research phases while aligning with the overall business goals and brand identity. 

By combining the insights gained from conversion research with creative problem-solving techniques, competitor analysis, and user-centric design practices, solution research lays the foundation for creating an optimized, effective, and engaging website that drives conversions and achieves business objectives.

For example, the online furniture retailer Made.com conducted extensive solution research when redesigning their product detail pages. They identified several key issues with the existing pages, including a lack of detailed product information, poor visual hierarchy, and confusing calls-to-action.

To address these issues, Made.com explored a range of design solutions, including:

• Adding more detailed product descriptions and specifications
• Using high-quality, zoomable product images and 360-degree views
• Reorganizing the page layout to prioritize key information and calls-to-action
• Adding user reviews and ratings to build trust and credibility
  ‍

‍

‍

By conducting thorough solution research and evaluating different approaches, Made.com was able to develop a new product detail page design that effectively addressed the key issues and drove a significant increase in conversions and revenue.

For another brand, INH Hair, we identified through conversion research that customers did not know how to use their clip-on ponytails, and that prevented a lot of people from making a purchase. We identified potential solutions as part of the solution research process:

• Add more information to the existing product description section
• Add a whole “how-to-use” accordion with additional information within the add-to-cart / product details section
• Add an entire page section with information on how to use
• Add a video in the carousel or in its own page section showing how to use
• Add gifs showing the process step-by-step
  ‍

‍

7. Designing

Once you've identified potential design solutions, it's time to start bringing them to life through the design process. This typically involves several key stages:

• Wireframing: Creating low-fidelity, black-and-white layouts that outline the basic structure and content of each page
• Prototyping: Developing higher-fidelity, interactive prototypes that allow for user testing and feedback
• Visual design: Creating the final, polished visual design of each page, including color, typography, imagery, and other design elements
• Development: Implementing the design in code and ensuring that it is responsive, accessible, and optimized for performance
  ‍

Throughout the design process, it's important to continually refer back to the insights and opportunities identified in the research phase, as well as the design principles and creative direction established earlier on. 

8. Usability Testing

Once you've developed a working prototype or beta version of your new design, it's important to test it with real users to gather feedback and identify any potential issues or areas for improvement. This is where usability testing comes in.

Usability testing involves recruiting a group of representative users and observing them as they interact with your website or app, typically while completing a set of predefined tasks or scenarios. This can be done in person, through remote testing tools like UserTesting.com, or a combination of both.

‍

During the testing process, you'll want to gather both quantitative data (such as task completion rates and time to complete tasks) and qualitative feedback (such as user comments and observations). This feedback can then be used to identify areas where the design may be confusing, frustrating, or not meeting user needs, and to make iterative improvements.

Example: Visiting Zara’s website is like flipping through a stylish magazine - it's visually stunning, but the actual shopping experience, which is the core goal for site visitors, can be quite frustrating. Take a look at the US homepage. The text is on the smaller side, and the navigation menu is tucked away behind a barely visible hamburger icon, so it's not immediately clear what a visitor should do next. With no prominent call-to-action, people can easily get confused or frustrated.

Those who decide to browse won't find product prices instantly visible, only grids of fashion photography, which is odd for a brand made for price-conscious shoppers.

How Zara could fix it: While we appreciate Zara’s artistic flair, user experience should be the priority. By simplifying the navigation and streamlining the user journey, Zara could reduce visitor frustration significantly. Our recommendation would be to make the menu more visual and intuitive, with clear icons guiding the browsing process.

‍

Phase 3 - Optimizations

The final phase of the conversion design process involves launching your new design and continuously monitoring and optimizing its performance over time. This phase includes two key stages: site launch and post-launch optimization.

9. Site Launch

Once you've completed the design and development process and thoroughly tested your new site, it's time to launch it to the public. 

There are 2 ways of launching a new website using the conversion design approach: 

One is what you’re likely most familiar with - a full release - which involves launching an entire new website in one go.

The 2nd method is the evolutionary approach and is preferred for most brands that already generate an important volume of sales online. This one consists of A/B testing some of the newly designed pages and features before launching them for good.

‍

‍

The Full Release Approach

The full release seems faster, but it also carries significant risks that could not only hurt your conversion rate but even extend your timeline toward a better-performing website. Even if your redesign is built using data, you don’t have a crystal ball to predict how your customers will react to the new user experience. 

Let’s hypothesize that you redesigned your website, and almost every aspect is indeed helping you increase your conversion rate, but one aspect of your product pages is decreasing your conversion rate by 30%. Because of this single underperforming element, your entire website’s average conversion rate might hit rock bottom.

If you did a full release, you would not be able to know any of this, other than your website is underperforming. You would be blind to what’s helping with conversions and what’s lowering them. 

As a result, identifying this underperforming product page element could take months and cost dozens, if not hundreds of thousands of dollars in lost revenue until it is identified and fixed. This is simply because everything else on the website is new as well, and baselines and existing knowledge about user experience went away with the old website.

The solution for avoiding this painful problem is to test key aspects of the new designs, before releasing them permanently. This allows to isolate variables to better understand what will help with the new website, and what might need more testing before getting released.

‍

The Evolutionary Redesign Approach

The evolutionary approach is one we’ve used with top ecommerce brands such as DIFF Eyewear and Mackage. 

Throughout 4+ years of partnership with SplitBase, DIFF Eyewear went through 2 different brand updates and major website redesigns. We followed the conversion design approach to paint a picture of what the new website should look like, based on insights accumulated from months of testing, customer research, and the brand’s own goals for an updated look.

‍

‍

New designs were then divided into different categories to test and laid out in an experimentation plan, which we executed over the course of a few months.

This process helped identify and avoid the release of newly designed, but under-performing page layouts, which were then reworked, re-tested, and released once performance thresholds were met. It also ensured that all new updates would contribute to growing the brand. 

Over time, this led to a double-digit increase in conversion rate and a new, visually stunning website for DIFF.

If you’re still wondering which approach is best for you, our own redesign method chart might help you make the right decision:

‍

Whether you chose the full release or evolutionary approach, to ensure a smooth launch, keep in mind that it's also important to have a solid plan in place that includes things like:

• Setting clear goals and KPIs to measure the success of the redesign
• Communicating the changes to your team and stakeholders
• Providing training and support to your customer service and sales teams
• Monitoring site performance and user feedback closely in the days and weeks following launch
• Having a plan in place to quickly address any issues or bugs that arise
  ‍

10. Post-Launch Optimization

The work of conversion design doesn't end with the site launch. In fact, post-launch optimization is one of the most critical stages of the process, as it allows you to continuously monitor and improve the performance of your site based on real user data and feedback.

This might involve things like:

• Conducting ongoing user testing and surveys to gather feedback and identify areas for improvement
• Analyzing site analytics to identify trends and patterns in user behavior
• Running A/B tests to experiment with different design variations and optimize key metrics like conversion rate and average order value
• Making iterative improvements to the site based on data and feedback
• Continuously monitoring site performance and user feedback to identify and address any issues or opportunities for improvement
  ‍

For example, we’ve worked with famed skincare brand Dr Squatch for almost 5 years, helping them optimize their website’s experience to increase conversions. Over this period, the brand went through numerous brand updates which required site redesigns. 

‍

‍

While some changes were A/B tested before being implemented, experimentation continued even once the new designs were made live to find further improvements. 

Dr Squatch’s CRO program has generated over $9.6M for the brand, and investment that pays off.

Transform Your Online Store into a Sales Powerhouse

A pretty website isn't enough to win over customers. To skyrocket your sales, you need a design that puts your visitors first and makes it easy for them to buy.

Generic templates just don't cut it anymore. Work with SplitBase to create a data-driven design that's tailored to your unique audience. By focusing on what makes your customers engage, you'll build stronger connections, boost sales, and set your business up for long-term success.

Don't let your online store's potential go to waste. Get in touch with SplitBase today and let’s talk about your website revamp.

‍