A Guide to Ecommerce Website Redesigns (+4 Examples)
In the past, website design was primarily a visual exercise. Design agencies dreamed of award-winning websites, and ecommerce brands went after the “coolest” designs to stand out.
But while visual appeal is valuable, it does not guarantee success. Even the most “innovative” websites can have poor usability—hurting the customer experience and hindering conversion.
Unfortunately, many retailers have learned this the hard way after redesigning their websites. Effective web design must combine performance and aesthetics to generate growth.
This guide explores how to decide when a website redesign is necessary. We’ll discuss why many redesign projects fail and how to execute an overhaul that yields results. And we’ll share real-world examples of ecommerce website redesigns to help get you started.
8 reasons to redesign your ecommerce website
Today, redesigning your online store can be tricky.
“Completely redesigning a website is just about the highest risk, [the] most wasteful thing you can do,” writes Jonny Longden, director of digital experience services at Journey Further, in a recent LinkedIn post.
“When people run A/B tests on websites, on average, 90% of those changes either don’t make any difference or have the opposite effect,” he says. “Therefore, when you redesign and change an entire website from scratch, 90% of your effort could be a waste of time or worse.”
While there’s some sound logic to Jonny’s argument, site redesigns can be worthwhile when done properly. We’ll talk about the best approach later but, first, let’s establish some valid reasons a total redesign might be in order.
Your current design is outdated
A modern website signals professionalism, shapes potential customers’ first impressions of your brand and builds trust with those shoppers. If your website looks old-fashioned, it gives the impression that what you offer and the way you do business are just as old-fashioned. This would be a huge disadvantage for your business, as consumer expectations are getting higher by the year.
You are rebranding
Site and page layout, typography, and other design elements all play a role in conveying your brand’s identity and messaging. That identity likely evolves in smaller ways all the time. While you don’t need to undertake a new redesign project for every change, you should update your ecommerce website if and when your branding takes a significantly different direction than it previously had.
Your website is slow
Slow load time or glitchy websites frustrate customers, leading to increased bounce and shopping cart abandonment rates. A 2023 study by GoodFirms found that slow speed is the top reason customers abandon a website.
A slow site is clearly a problem, but don’t forget that many changes and performance improvements can be made without a redesign. In other words, it’s likely worthwhile to see if those changes are effective before you decide to revamp your site. Then, if it’s still sluggish despite implementing recommendations from your PageSpeed Insights report, for example, that might be cause to consider a redesign.
Your user experience is poor (UX design)
Your ecommerce store should be easy to use. Intuitive interfaces and logical workflows are essential to avoid confusion and entice customers to buy. Poorly designed information architecture, unclear website navigation, or a complicated checkout process may drive customers away. While we recommend fixing those issues through iterative A/B testing, in some cases, it’s easier to start from scratch to ensure consistency in the experience sitewide.
Your website is not mobile-responsive
Today, customers are mobile-first and channel-agnostic. They will engage with your brand across multiple touchpoints, including smartphones and tablets. If your website is challenging to navigate on different mobile devices, you risk losing a significant portion of your audience.
Mobile-responsive design is critical to ensure your website automatically adjusts to different screen sizes, ensuring a consistent and optimized customer experience across devices. According to a recent HubSpot survey, 40% of marketers list optimizing for mobile as their top priority.
You want additional functionality and customization
Redesigning your ecommerce site is an opportunity to add functionality. For example, you can integrate third-party tools, add product recommendation plugins, include additional payment options, or create more customized product pages.
We should mention, though, that we don’t recommend adding functionality for functionality’s sake. If this is your reason for considering a redesign of your online store, you should have data-backed hypotheses that explain the need for certain additional features. You should also be clear on how adding functionality is likely to impact metrics that are important to you, such as average order value and conversion rate.
Your website is not optimized for search engines
A well-structured website is critical for ranking on search engine results pages (SERPs). A website redesign can help address the structure and layout of your website, making it easier for web crawlers to understand your content. At the same time, you can address technical issues hurting your rankings (e.g., broken links or incorrect redirects).
Many of the above including slow site speed, lack of mobile-friendliness, and missing functionality lead to a larger problem for ecommerce brands—downward sales trends. If you’re noticing increasing cart abandonment rates, higher bounce rates, or decreasing average order value as a result, a well-done website redesign can reverse those trends.
Why ecommerce website redesigns fail
Website development requires a blend of creativity, research, and technical expertise. Yet brands often neglect some of these elements when redesigning their websites. This not only wastes time and resources but it impacts the customer experience and sales.
Here are some common pitfalls to avoid:
- Insufficient research: Your target audience’s preferences and shopping behaviors should shape every element of your website design. Research is vital to ensure that your online store fits customers’ needs.
- Lack of clear objectives: Key performance indicators (KPIs) provide a roadmap for designers, developers, and copywriters as they redesign your ecommerce site. Without defined goals, you risk creating a website that doesn’t align with your brand’s ethos or generate revenue.
- Unrealistic timing or budget: Many brands rush into the redesign process. Without a comprehensive project scope, realistic timeline, and resource allocation planning, there’s a higher risk of delays and budget overruns. Unexpected budget constraints can also lead to compromises in quality, affecting the success of a website redesign.
- Overemphasis on aesthetics: Every brand wants a drool-worthy website. But many brands make the mistake of focusing too much on the visual elements. Inadequate consideration of usability and functionality can mean a website that’s not intuitive, harming customer satisfaction and sales.
- Neglecting search engine optimization (SEO): Brands often fail to consider the effects of an ecommerce website redesign beyond looks, navigation, and the like. Particularly, it can be easy to let your SEO strategy slip through the cracks. Following SEO best practices is critical for search engine rankings and traffic.
- Inadequate testing: It can be tempting to hit publish on your redesigned site as soon as possible. However, neglecting the testing phase can result in broken links, functionality errors, or inconsistencies in design (e.g., button colors or fonts that vary by page). This can confuse or irritate users.
How to approach an ecommerce website redesign
It’s possible to design a website that is beautiful, aligned with the brand, and built for sales performance. Here’s how to implement an ecommerce website redesign that delivers results.
1. Research and A/B testing of your current site
Data is the backbone of redesigning a website. Weaving data into the site design process from day one is critical. At SplitBase, we approach every website redesign with our Testing Trifecta framework.
Our process always begins with quantitative research—analyzing a current website’s strengths and weaknesses. We start by looking at your current website’s metrics. Which pages receive the most traffic? What areas have high bounce rates or low conversion rates? Which elements are getting the most, or the least interactions, and which ones correlate with people purchasing? We also use heatmaps, clickmaps, scrollmaps, and eye-tracking software to understand how potential customers interact with your website.
After identifying opportunities for improvement, we move toward the qualitative phase of our research. Here, we use surveys, website polls, customer interviews, session recordings, customer service chats, and usability testing to understand the top drivers and barriers that influence customers to buy or abandon their carts.
Image description: At SplitBase, we use our Testing Trifecta framework to take a data-driven approach to web design.
In other words, quantitative research helps you identify problems with your current website, while qualitative research helps determine why these problems are occurring. Then, with A/B testing, you can experiment with data-driven solutions to optimize the customer experience before you invest in a website redesign.
These findings are critical for redesigning your website. For example, we partnered with deodorant brand Primal Pit Paste for a redesign. Now known as Pretty Frank, the brand had to redesign as part of a migration to Shopify Plus. During the conversion research process, we uncovered necessary changes for the brand’s product pages, including a new design, required content, and the order of elements. Using these findings, we were able to run tests that increased conversion rate, such as a homepage test that lead to a 21% increase.
Image description: Primal Pit Paste from Pretty Frank
2. Define key performance indicators
Use the outcomes from your research and testing to set clear objectives for your redesign. The customer demands and pain points you identified will let you know what your areas of focus should be for the redesign (and what low-impact changes you can remove from your to-do list or delay).
Additionally, the data from your A/B tests or initial conversion research will help you set realistic goals as far as percentage improvements you’re likely to see across your most important metrics. These KPIs will then act as the foundation of the redesign process, enabling you to more easily evaluate the project’s success.
3. Map out customer needs, motivation, fears, objections, and questions
When taking the conversion optimization approach to website redesigns, you'll want to map out your customer needs, motivation, fears, objections, and questions that surfaced in your qualitative research.
To do this, indicate what needs to be addressed on each page of your site. For example, all product questions that came up in the research, should be included in your plan for the product page. Customer fears should be mapped to all the areas and pages where those fears are most likely to appear - and so on. By doing this, you're planning your website content based on what will get customers to convert, instead of simply guessing what should go on each page.
4. Brainstorm the look & feel
Content needs aside, what do you want your website to look like? At this stage, determine the tone, color palette, fonts, and overall styles that you'd like your website to have. It's a good idea to create a mood board with inspiration from websites you like, including screenshots of specific elements you want to capture as part of your redesign.
5. Find solutions to conversion triggers and challenges
In step number 3, you mapped out the customer needs, motivations, fears, objections and questions to address to each page of your site. Now, you'll need to decide how to address each. Conversion optimization best practices here can be starting points, and so can researching websites within and outside your industry. How will you answer your customers' top questions on your product pages? How will you tackle their concerns? How will you motivate them to buy?
This is where working with a conversion optimization agency that specializes in conversion design can help, as not only can they help you do the conversion research required for your site redesign to be a success, but they can help you identify how to address each insight discovered in the research.
6. Generate copy and content
Identify the types of content needed for each page on the site and get to work producing them. For example, you may need product descriptions, landing page copy, blog posts, product images, videos, etc.
It’s ideal if the people responsible for copywriting and content creation have an understanding of conversion rate optimization principles so you can start seeing meaningful improvements to your metrics sooner. Conversion copywriting requires an understanding of persuasion and psychological sales principles, and is not the same as traditional content writing. If your in-house team doesn’t have this knowledge, it’s worth considering working with an agency like SplitBase with writers, designers, and developers all trained in CRO.
7. Design the user interface
Use wireframes to plan your website’s layout based on how the site copy needs to be structured to drive sales. Wireframing gives a conceptual framework of the layout, interface, and functionality without the distraction of colors or other visual elements. Optimize for smartphones and tablets during this process.
8. Test
Testing throughout the website redesign process is essential. Be sure to conduct usability testing during the design phase as a micro-validation of design decisions. Don’t forget to test functionality on various devices and browsers, including any forms and the checkout process. At the same time, gather feedback from customers, stakeholders, and employees.
9. Launch
Website launches on Shopify should be done without downtime, but what if it can’t be avoided in your case? Communicate any downtime with customers before publishing your updated website so that they’re not left hanging unexpectedly when your site is inaccessible. Ensure you have a backup of your current website and data before launching.
10. Continue to test and optimize
Monitoring website performance is critical. Not only can bugs pop up and hurt performance but the effectiveness of different design elements can wane over time. You’ll need to do regular CRO audits to make sure the user experience on your site is consistently positive, as well as to spot and fix issues quickly.
How to budget for an ecommerce website redesign
Investing in a high-quality website that values the user experience can have long-term benefits for your ecommerce business. But budgeting can be challenging. According to WebFX, the average website redesign costs $12,000 to $150,000. That’s a wide gap, and far from the limit. It’s not rare either to see large brands spend over $500,000 on a website when visuals need to be produced, the website needs to be coded from scratch, and analytics and tracking re-implemented.
In reality, the cost of an ecommerce website redesign depends on several factors, including:
- Your method of redesign (e.g., hiring a freelancer or working with an agency)
- Scope of your website redesign (e.g., the number of pages or new features added)
- Style of your website (e.g., a minimalist design versus a website that emphasizes animations and videos)
- Level of customization (e.g., using a template or building a new design from scratch)
Dividing your budget into categories can help. This includes design, development, content creation, SEO management, and domain and hosting fees. Make sure to factor in ongoing costs like domain renewals, security, and updates. These recurring expenses can affect your website’s longevity.
At the same time, brands should set aside a portion of their budget for unexpected expenses or changes in project scope. This safety net ensures that unforeseen challenges won’t compromise quality.
Choosing the right partner for your redesign
There are three options when it comes to executing an ecommerce website design. Choosing the right team depends on your budget, level of customization, and required expertise.
- Do it yourself: An in-house approach is the most cost-effective if you already have all the specialties required in-house. It provides greater brand control and flexibility over the entire process. However, an ecommerce redesign is time-consuming and may drain internal resources.
- Work with freelancers: Freelancers can be more affordable than working with an agency. You’ll also have direct communication with the person working on your redesign. At the same time, freelancers vary in expertise and experience. Relying on a freelancer may not be ideal for more complex projects. And, plus, no single person is great at everything.
- Partner with agencies: Agencies have teams of professionals with diverse skills, so you’re more likely to get a high-quality product in the end. They also often provide services beyond design and development, such as analytics and reporting or ongoing support. But agencies can be more expensive due to more formal processes and additional stakeholders might lead to longer turnaround times.
Keep in mind, however that not all agencies are the same. A branding agency will approach a website redesign in an entirely different way than a conversion optimization agency that specializes in conversion design. The branding agency will design for looks above all else, whereas a conversion design agency will balance looks with usability and conversion performance. The best option depends on your goals.
4 ecommerce website redesign examples to inspire your own
Redesigning your website can feel daunting at first. Here are four examples to help get you started.
Lalo
Lalo is a modern baby and toddler brand that aims to transform “how you shop for your baby.” The company uses non-toxic materials and includes modular furniture that grows with your family.
Since launching in 2019, Lalo has redesigned their website several times. Here’s a before and after.
Before:
After:
Why we love it:
- The layout makes it easy to shop by need (e.g., bath time or meal time).
- The shoppable product imagery drives engagement.
- Lalo’s product pages include videos and options for purchase (e.g., buy a subscription, make a one-time purchase, or add to a registry).
Peloton
Peloton is an interactive fitness platform with connected exercise equipment. The company provides at-home and on-demand fitness classes for runners, cyclists, and more. Here’s a recent iteration of Peloton’s website.
Before:
After:
Why we love it:
- The updated website showcases all of Peloton’s products, improving navigation.
- A carousel shows all class types and pushes customers to preview classes on the app.
- Customers can find a side-by-side comparison of each product.
Rothy’s
Rothy’s makes washable shoes and bags from recycled materials for men and women. Here’s a before and after of Rothy’s website.
Before:
After:
Why we love it:
- An updated navigation bar outlines the brand’s product offering.
- The updated product imagery and layout better center Rothy’s products.
- The product pages include Sustainability and Store Availability sections, driving consumer education and making it easy to shop across channels.
Bad Birdie
Launched in 2017, Bad Birdie designs performance golf apparel for men and women. Here’s a recent iteration of Bad Birdie’s website.
Before:
After:
Why we love it:
- The updated design has a more consistent and cohesive color scheme.
- The new website includes easy-to-follow navigation, showcasing all product categories.
- The content is more engaging than the previous version. The brand uses videos to showcase how different products move in real-life scenarios.
At SplitBase, we use a data-driven approach to designing (and redesigning) ecommerce websites to make brands like yours more money. Our testing trifecta methodology guides how we approach these projects, ensuring that websites hit the mark in terms of both looks and performance.
Get a free ecommerce website redesign proposal today to see how SplitBase can help you create an ecommerce website that drives results.
