eCommerce store’s user interface (UI) is the first thing that visitors will face and fall in love with! The ones that create an impactful first impression can go a long way. Of course, the products, services, and user experience (UX) will gain you brownie points and are equivalently important, but the primary thing will always remain what look and feel the website is providing! If you’re considering a website redesign, there are certain parameters you need to keep in mind. A vague makeover will not provide the desired ROI and all the efforts can go in vain. Thus, a few website redesign best practices need to be followed. Brace yourself as this definitive guide to website redesign will help you do the job easily.
Step #1: Audit Current Website and Assets
The first step of our website redesign checklist is all about reviewing where you currently stand. By reviewing what collateral is popular, what pages are frequented, and what might be missing, you’ll get a sense of what can be repurposed and refreshed or what needs to be created from the ground up.
By going through your analytics to see user trends, you may be shocked to find pages no one felt were important are generating a decent amount of traffic.
The next step here is to note these pages and save them for later to do some user testing with. You’ll want to find out exactly what’s appealing, aside from the obvious.
Is there a campaign pushing traffic to them? Are users going there because the content is awesome? Or, on the other hand, are they going there only to leave because the messaging isn’t what they were expecting?
Understanding where your weak points allow you to know where your biggest effort needs to be made.
The pages that are strong, generate traffic, and convert well, however, need to be kept intact, and optimized further, if possible. Keep both of these sets in mind as we go into the next phase of the website redesign checklist.
Step #2: Analyze the Competition
Taking what you’ve uncovered in your site audit, start envisioning what you ultimately want your website to look like, branding aside.
Do you need a store? What types of imagery will work for your users? What layouts are the best for your industry?
Gathering website inspiration and analyzing your competitor’s websites help you get a view of industry best practices and where you can shake things up a bit (as long as it benefits the user).
I recommend taking your top two or three competitors and spending roughly 2-4 hours on their websites.
What common threads are you seeing? Do they talk about pricing? Are they utilizing specific visuals or videos? Refer back to the list of pages you made in your audit. Are you noticing any similarities on your competitors’ sites?
While you’re reviewing different sites for inspiration, bookmark things you find interesting and you feel will help your user get a better sense of what you do. It could be something like layout, use of a testimonial, juxtaposition of an image with content…really anything that catches your eye.
These pieces of inspiration will help your team, or agency, understand what you’re looking for and work with you to craft the best design for your users.
Step #3: Create / Review Brand Guidelines and Styles
Next, it’s important to review your brand guidelines and styles so you can create a cohesive design.
Begin by having your team review where the current branding guidelines stand.
Does it feel dated? Are the fonts hard to read? Is there a font hierarchy? Is your brand’s tone accurately depicted by this style?
The reason why this step warrants attention is so that everything designed will be consistent and showcase your company as envisioned. Make sure all brand colors allowed have accurate portrayals, including different values such as CMYK, RGB, and Hex.
Other key items to include in your guidelines are logo usage, fonts, button styles, iconography, and image examples (in some cases).
The goal of this is to give direction to anyone who designs for your brand, and create consistency across all media whether it be web, print, or video.
On another note, adding in a button hierarchy that corresponds to different levels of the marketing funnel usually helps the user in their journey. Aligning specific button colors with particular stages gives consistency across the site that can clarify your user journey and improve their experience.
Understanding that orange, for example, is always a button to request a consultation or take another bottom-of-the-funnel action, while light blue is for learning mores and top-of-the-funnel offers can provide a more seamless user experience.
Once your guidelines are in order, it’s time to begin thinking about the time frame the entire website redesign needs to be completed.
Step #4: Realistic Timeline
The next step in our website redesign checklist is one that’s often overlooked –creating a realistic timeline.
Remarkable websites take time. To make sure you’re hitting the mark not only for your brand but for your users, there is a good amount of strategy and research that must be taken into consideration long before you start to code.
Depending on the size of your website, and your goals, plan to spend about 2-5 months on the process.
There are ways to expedite the timeline, like reducing the size of your site (do you really need those 300 pages with 1 paragraph of text on each?) or taking a Growth-Driven iterative approach, focusing on the most important pages to the user journey for your redesign then updating the rest of the website in stages.
Regardless, you’ll want to make sure you’re dedicating a decent amount of time to working with your team or agency, to provide feedback on design direction, help with content creation (which we’ll talk about below), and ensure everything is as it should be.
When deciding on a deadline, It’s important to consider when you’ll need your new website by. Are there any events coming up? Tradeshows? If there is something pressing, get started as early as possible so you’ll have adequate time to get the quality website you desire.
Time constraints are the enemy of quality.
Step #5: Goal Setting
With the amount of money and effort that goes into a website redesign, knowing if it’s a success is critical. Creating realistic goals for your site to reference and measure your success is extremely important.
This is where understanding where your current site stands come in handy. If your current site has a steady stream of traffic, but the leads aren’t pouring in, you may set a starting goal of increasing your conversion rate by 1%.
Whatever goals you set should be communicated to those, working on the redesign so they can be in front of mind while the site is planned, designed, and developed.
Keep in mind that a website redesign isn’t a magic wand that fixes everything.
Your website redesign should, if properly planned and strategized, improve your stats and get you on track to hit your goals, but you’ll want to track this over the first few months after launch. Don’t expect to see stats jump on day one.
Now that you’ve got some goals under your belt, it’s time to start focusing on the people that really matter…your users!
Step #6: Understand the User Journey
Quite possibly the most important step in this website redesign checklist is understanding the user and the user journey.
Understanding what the user is looking for, what questions they need to be answered, and how they’ll look for it on your website is the only way to really set yourself up for success.
There are a few ways you can go about obtaining the information you’ll need, for example, interviewing your users and asking them questions about their experience.
Questions like “What made you decide to purchase product x?” and “Did anything on the website frustrate you?” are great for digging into what actually helped them convert.
A few important questions to ask yourself as you review your redesign plans are “What content does the user need to make their purchasing decision?” and “Are there any holes in the journey?”.
You can also set up user testing and ask your audience to perform a task on your current website or your newly developed site before it’s going to launch.
This will allow you to see first-hand how a potential customer interacts with your brand and where you need to solve for their frustrations. After all, the goal is to reduce the friction as much as possible to give them an expedited path to the goal. What better way to improve the journey than by actually asking them?
It’s also important to gather data from users after the site is launched
By focusing on the user journey and reducing any friction, you’ll be setting your redesign up to generate real results. Now that you’ve determined what you need to improve on, it’s time to start working on content to fuel your redesign.
Step #7: Content First
A few years ago, Tom wrote about writing your content first when doing a website redesign. This is still a critical part of any website. Without content your site is just a bunch of pretty pictures –and that helps no one.
By creating your content first, you’ll be able to get all your ideas out and fine-tune them without risking design revisions or pushing deadlines back. Again, not helping anyone. 😉
Your content should be as concise as possible, and always user-focused.
Many companies fall into the age-old trap of creating “brochureware” websites that only talk about themselves and drone on for endless paragraphs. Your users don’t care about “you” they care about how you’re going solve their problems.
By focusing on the user, you’ll help deliver the real value of your organization instead of coming off as salesy or self-serving.
Another positive of putting content first in the design process is that it gives your designer the ability to create a tailored layout to highlight the copy in the best possible way.
Step #8: The Designing
Now, with your content in hand, it’s time to bring in the design team to create your page layouts and design mockups.
It’s important your designer uses data you’ve gathered from the previous steps –otherwise, all the work you did was just wasted effort.
For example, do your users rely heavily on social proof like testimonials? Then it makes sense to have a very strong section designed for this. Consider including client logos that have seen success with your company, and make sure you give context with a descriptive header which could be “Companies we’ve helped…” or something to that effect.
Using best practices, your designer will also take the brand guidelines you compiled or updated and implement them into all of the designs being created. You’ll begin to see how the button hierarchy and other elements take shape and guide the user to specific information.
After this step, it’s important that you and the designer are fully aligned on these mockups before moving into development. Any uncertainty can lead to misalignments that may cause delays in development, especially if new information comes to light that makes a revision necessary.
Once you have your designs finalized and approved, you should do your best to have real users review them.
Step #9: User Data
Now that the designs have been created, we’re ready for development right? Wrong!
Looking at your freshly made designs, it’s important to go back to your users (usually the ones that helped you in the beginning research stage) to see if your new designs will hit the mark for them.
You can create interactive versions of your designs using a tool like InVision to allow your users to experience what the final developed site will be like.
Create hotspot links to other page designs and ask your users to navigate through them to the end goal. If you see any confusion, hesitation, or something doesn’t seem to “click” you may need to go back and rework the designs — but that’s okay!
Now is the time to make your changes, before you move into development and changes can be a bit more costly and time-sensitive.
Since you’ve gotten “user approval” on your new designs, it’s time to get into development and get the site ready for the limelight in Step 10.
Step #10: Develop Your eCommerce Site
Development is typically the final stretch for any redesign, and our website redesign checklist is no different.
It’s been a long process to get to this point, so there’s usually an anxious feeling that goes along with this step, ut rushing development can be a recipe for disaster and delays.
Dedicating ample time for the site to be coded out cleanly, following SEO and industry best practices, is a necessity. In this step, your team, internal or external, will transfer the flat design mockups that were created, into HTML, CSS, and other languages.
There’s also a decent amount of testing that will go into this step.
Checking cross-browser functionality to ensure a consistent experience for any user is key before launch. This gives you peace of mind that no matter what browser is used, your site will display exactly as intended.
The same goes for mobile devices — going through the variety of screen sizes takes time. Typically it’s a good idea to determine the most popular devices at the time and test on those. This gives you a realistic snapshot of what your site looks like on different devices, again ensuring a consistent user experience that won’t frustrate anyone.
So, now your site is developed, and you’re ready to launch! It’s time to kick back and watch the leads flow in, right? Wrong again!
Pro Tip: Experiment, Then Rinse and Repeat (Steps 6-10)
Your brand new website is developed and launched, but the fun doesn’t stop there! Now you have to start collecting and reviewing your user data on the new designs.
Work with your team to plan experiments to A/B test different layouts, or features, to help improve the user journey. Focus on the most important pages on your website first, and go through Steps 6-10 as many times as necessary until you ultimately hit your goals (then set new ones!).
These tests and the subsequent changes will only help improve your website’s user experience and its lead generation.
That’s our website redesign checklist! It’s not always easy to follow it by the book, especially when there are tight deadlines or time constraints potentially truncating some steps, or skipping them altogether.
However, following it as closely as you can assist in making your new website the traffic driving, the lead-generating machine you’ve always wanted.