In today’s digital landscape, your ecommerce website is your store, billboard, and customer service representative all in one. That’s why it’s crucial that your site’s design and functionality support your business goals. A redesign can help you keep your website current, brand aligned, and catering to the preferences of your audience, but it can also be challenging without a clear strategy.
To find out what makes a successful website redesign strategy, we spoke to Kim Samuelsen, director of delivery of studio at Domaine, a full-service web design and development agency. Let’s take a look at how you can redesign your website to bring in new customers, keep current ones, and increase revenue for your business.
What is a website redesign?
Website redesign refers to changing the functionality and visual elements of your existing site. It can range from a complete overhaul to merely changing a few layouts. Businesses might pursue a redesign to reflect updated branding, enhance mobile usability, boost conversion rates, or modernize outdated technology.
A redesign is an opportunity to analyze how visitors currently interact with your site, identify pain points, and rebuild with both user experience (UX) and search engine optimization (SEO) best practices in mind. A successful redesign keeps what’s working, fixes what isn’t, and positions your site to grow with your business goals.
What’s the difference between a redesign and a refresh?
The key difference between a website redesign and a simple refresh comes down to scale—whether the site structure or just the design elements are changing. Think of it as the difference between rebuilding a house versus simply repainting it.
-
Website redesign. Although “redesign” can be a catch-all term that refers to smaller tweaks, it typically refers to a full redesign—overhauling the site architecture, fixing issues with site performance, streamlining the user journey, and making aesthetic changes. Often, a redesign involves changing key user experience elements, like how users will interact with or navigate your site. During the redesign process, you alter the site’s internal structure and source code to provide a product that’s almost entirely new. “Nothing is off the table,” Kim says.
-
Website refresh. The less extreme alternative to a full redesign, a refresh keeps the bones of the site, while making smaller, more cosmetic changes to design elements or key pages. While the overall user experience may not change, a refresh will address things like typography, color scheme, or layout. “If you have a website that’s currently live, and you’re looking to refresh certain components, it doesn’t have to be this really long project,” Kim says. “You can itemize out some bite-sized pieces.”
3 steps to take before a website redesign
Before starting a website redesign project, analyze your current site’s performance, listen to your target audience and team, and make a solid plan. Without careful project management, the website redesign process can become unwieldy. Think missed deadlines, going over budget, or more drafts of your site than would’ve been necessary with more proper planning. Start with these three critical steps:
1. Analyze your current website
Don’t fix what’s not broken. Evaluate what is and isn’t working about your current site before you do anything else. “We always go through a site walkthrough to understand what our clients love about their current site,” Kim says. “And then, of course, what are the pain points?”
Focus on these elements:
-
Performance. If your site has a high bounce rate (i.e., website visitors come to your site and leave quickly) or low conversion rate (i.e., they don’t take the desired action), it’s probably time to rethink some features.
-
Traffic. If your site isn’t ranking highly in Google search results, it might be because your site’s design isn’t optimized for search. Without SEO, you’ll have to drive people to your site through paid advertising or marketing efforts.
-
Design. If your site is loading slowly, has an outdated design, or features have stopped working on certain browsers or operating systems, it’s time for a redesign.
2. Collect multiple points of view
An effective website redesign takes into account the needs of multiple stakeholders and finds a solution that benefits everyone. The only way to do that is to collect information.
Here’s what you should start paying attention to:
-
User feedback. The input of actual users will help you execute a site redesign that makes sense for your target audience. Whether you have a dedicated UX research team or not, make sure you gather feedback and conduct user discovery before embarking on your redesign.
-
Competitor research. Along with user testing, audit the top five or so competitors in your industry. Look at their websites’ functionality, how they organize their sites, what features they’re using to prompt users to convert, and the aesthetic branding decisions they’ve made to try to stand out.
-
Team needs. Mismatched tools or overloaded teams can derail timelines and blow budgets. To set your redesign team up for success, consider their individual skills, workloads, and existing tools. Assess whether you’ll need to hire freelancers or otherwise gather more resources. Kim believes website redesigns are two-way streets: “We want to make sites very easy for both customers to use and admins to manage,” she says.
3. Set goals
With user feedback, competitor insights, and team input in hand, you’re ready to define what success looks like. Setting appropriate goals and figuring out how to meet them in a timely manner is essential.
Here are some key strategies to keep in mind:
-
Define key targets. A website overhaul is comprehensive, but you still need to define specific targets. Choose a few key goals, decide how you’ll measure them, and stick to the plan even when tempted by distracted. So, if your goals are to have a more contemporary feel and improve brand awareness long term, you might decide that your focus will be on page layout, branding, and product photography, and that you’ll follow up your redesign with a brand awareness survey in a year.
-
Reaffirm your brand identity. Aligning on how brand guidelines will show up in a redesign is crucial to staying focused. Kim says one thing her team always audits is brand photography, which is often updated during a redesign, because they want to “make sure the new imagery matches and feels cohesive with the new look and feel that we’re putting together.” Whatever elements you decide need changing, Kim recommends using the company’s brand values as a guiding pillar to prevent getting sidetracked.
-
Align your team. “What can really make or break a redesign is whether a team is ultimately aligned on the vision,” Kim says. Make sure your developers, designers, and other stakeholders are all on the same page when it comes to pain points, goals, and process. Doing so will save a lot of time when the actual work begins.
How to redesign a website
Redesigning your website can feel like an uphill climb, but it doesn’t have to be overwhelming. Whether you’re updating your site internally or working with an agency, it’s beneficial to know where you’re heading.
If you’re redesigning on your own, Shopify makes it easy to customize your website with its Themes gallery, which is continually updated with cutting-edge designs for every industry. If you’d prefer expert help, you can hire designers and agencies—including Domaine—through the Shopify Partners Marketplace.
At Domaine, Kim and her team generally follow these steps for each redesign project:
Phase 1: Discovery
Kim’s team begins each client project with discovery: getting to know the brand and building a clear profile of the audience. Depending on the scope, the Studio team will sometimes loop in the user experience team to conduct customer research and dive into analytics.
Phase 2: Design and development
The actual web design phase starts with designers providing both clients and web developers with mockups and wireframes. That way, clients can sign off on changes and developers can offer feedback about functionality before coding the site.
The Domaine team typically presents the client with two concepts and asks them to choose one. “Sometimes that might look like someone saying, I really love this from concept one,” Kim says, “but I like this navigation from concept two, so let’s marry those two ideas together.” Once clients decide on what works for them, detailed design begins. Clients see mockups of priority landing pages—usually the highest-converting ones—before the concepts extend to lower-priority pages.
After the visual design phase, Domaine moves into developing technical aspects and functional specs—that is, how the site should work, including what happens when a user hovers or clicks, any animations, etc. At this point, web developers implement the changes through HTML, CSS, and JavaScript.
Phase 3: Quality assurance
This is the editing phase of the process. Your team or the agency you’re working with will comb through the redesigned site to ensure it matches the design files and that the new functionality is seamless. Quality assurance often includes testing mobile responsiveness, load times, interactive functionality, and hyperlinks.
Phase 4: User testing
Once QA is complete, Domaine sends the site over to the client for user acceptance testing—the final stage of user experience testing where actual potential customers test the site’s functionality. If users struggle to complete actions, that’s a sign you need to address certain issues before launch. Once you work out these kinks, the site is ready for launch.
Tips for redesigning your website
Once you’ve learned about the basics, take a look at some tips and best practices for a smooth website redesign:
Connect design and functionality
Don’t think of visuals and functionality as separate efforts. A button that looks beautiful but doesn’t clearly show when it’s been clicked still creates a poor user experience. A site that’s user-friendly and visually appealing is going to lead to more user engagement, which is the ultimate goal of any redesign.
Solicit honest and direct feedback
Kim says one way she sees redesigns go wrong is stakeholders not being honest or direct in their feedback for fear of hurting feelings. The inability to articulate creative feedback can hamstring the process before it even gets off the ground.
“We’re not going to be offended if you don’t like a certain direction,” she says. “It’s so much better if you say, ‘I don’t like this, I really prefer the other version.’ It allows us to make an appropriate revision so that you’re ultimately really happy at the end of it. Our main goal is making sure that people are getting what they want out of these redesign projects—they’re a large investment from a cost and time perspective.”
Leverage online tools
Knowing the full range of features offered by your CMS or ecommerce platform allows you to add new functionalities to your website. For example, Kim explains that Shopify allows for reusable blocks and sections, which makes it easy for Domaine to build parts of a site as a template that clients can drag and drop into new pages later.
“There’s a lot of flexibility in Shopify to duplicate any sort of template, which has been great,” Kim says. “It’s just really nice that they’re able to continue to leverage the work that we’ve done in collaboration with them.”
Website redesign FAQ
What is the 3-second rule in web design?
Studies, including one from Aberdeen Strategy & Research, have found that roughly 40% of users will abandon a site if it takes more than three seconds to load, proving the crucial importance of fast page load times
Can AI redesign an existing website?
AI tools are getting better each day at learning what designers and developers need, but they’re still best used in combination with human teams to ensure quality, accuracy, and stakeholder satisfaction. Shopify’s website builder helps you create a personalized storefront with AI-powered functionality.
What is the 60-30-10 rule in web design?
The 60-30-10 rule is a way to choose colors for your website. It suggests choosing three colors and using them each in different amounts: 60% for your primary color, 30% for your secondary color, and 10% for an accent color.
