Three best practices for when you have to redesign an existing website or webpage.
Adobe Stock / everythingpossible
The website redesign is something that most UX designers end up having to tackle at some point in their career. On one hand, there are benefits to not starting from scratch, but on the other, you’re not starting from scratch! It can be intimidating (and politically tense) to have to redesign something that already exists, and untangling what to keep and what to throw out is a challenge. Here are three things you can do to ensure the project goes smoothly.
Understand why
There are lots of possible reasons for a redesign, including new leadership with a new vision for a site’s purpose, a desire to increase conversions or have the site measure up better to KPIs (key performance indicators), or simply to freshen up the brand or site’s look and feel. The first step you need to take is gaining a robust understanding of the project sponsor’s desire to redesign — why redesign, and why now?
A collaborative UX strategy blueprinting session can uncover the objectives of the redesign project.
Go through a strategy definition exercise with your team or client. Jim Kalbach’s UX strategy blueprint is a great framework to use for a collaborative session. Print copies and get everyone to fill one out, or recreate a giant blueprint on the wall and collaboratively build it out with post-it notes. This will reveal assumptions and desired outcomes on the team.
Interview key stakeholders who have a connection to the redesign — the leader or project sponsor who has made the work a priority, the team who designed the site last time, or the product owner. Understand their priorities and objectives and what isn’t working for them today. Be sensitive to the fact that they may have had involvement in or be attached to the current version.
Gather information on how the site is currently performing. Site analytics are a great place to look for clues on what is working and isn’t, and key drop off points or popular pages. For more complex site redesigns, it is worth doing a round of in person usability testing to identify problem areas with key tasks users complete on the site
Take stock of what you’re working with
Once you’ve understood the goals of the redesign and how the site or web page is currently performing, it’s time to get a handle on what you are working with. What about the current site is on the table to change? What is off limits? Does the redesign need to completely rework content and information architecture, or is it more about minor tweaks?
Most existing sites have some kind of brand or brand guidelines in place. Asking for and reviewing the brand guidelines documentation will help you and the team to understand the boundaries of the visual style, feel, and tone of the redesign. It will answer questions about fonts, logo treatment, and brand colours. On the other hand, you might learn that no strict guidelines exist, and the redesign has flexibility to reinvent these elements. In this case, reviewing other existing brand material (print material, advertising) that the site needs to be in harmony with is useful.
A content audit will help you to get a handle on what content to tweak, keep, and discard, as well as cataloguing a site’s structure and IA. Image credited to UX Mastery.
Do a robust content audit. This process involves capturing all of the existing content, including navigation labels, headings, and all other site content such as videos and text, in a large spreadsheet. While this can be tedious, depending on the size of the site, it will put you in a great position to identify which content can be reused, needs a refresh, and should be removed entirely. It’s also a great way to get intimately familiar with what’s on a website already.
Explore the existing information architecture by creating an IA diagram. Take an objective look at whether this needs to change — don’t fix something if it ain’t broke! In many cases, the IA of a site may only need to change in minor ways to accommodate new content or links. Getting a sense of the existing structure in a visual format will help in making these decisions.
Get designing
You should now have a great jumping off point to design from, with clarity on the objectives of the redesign, the material you are working with, and what’s on and off the table to change. Working content first and designing with real content will set you up for success. During the design phase while you are creating wireframes, mockups, and prototypes, there are a few great approaches to help you and the team along. Always ensure to test early and often if possible, through prototype usability testing.
Style tiles are a great way to capture updated visual direction for a site, especially if the team is tweaking or redesigning the branding. These can be used to explore visual direction early, without having to flesh out a high-fidelity mockup. Work with the visual designer on the team to develop some options that will meet the redesigns goals.
Examples of style tiles for a redesign of The Washington Examiner from Samantha Toy’s portfolio website.
Site redesigns are a great opportunity to consider web accessibility, so build this in from the start of your design process rather than at the end. These can be simple tweaks to base font sizes, colour contrast, and the readability of content.
Take the opportunity to ensure any performance issues are being addressed — through designing a responsive site, paying attention to SEO and site speed. In many cases, this is a whole team effort — and collaboration with the developers, content strategists, and visual designers are key. As the UX designer, your role is to ensure these aspects of the site redesign are being considered, and that you are using UX best practices for modern web design.
Thunderbirds are go!
Once the site redesign is ready for launch, a continuous feedback loop including A/B testing or beta testing is a great way to ensure that the site or page is achieving the desired result. After all, you want to ensure that all of the hard work and effort that was put into the redesign is working!
As with any UX design work, a lot of the success of a redesign project hinges on a deep understanding of the project context, goals, and the user needs the site is serving.
You can control how Adobe websites use cookies and similar technologies by making choices below. But note that if you disable cookies and similar technologies entirely, Adobe websites may not function properly.
Cookies are small text files stored by your web browser when you use websites. There are also other technologies that can be used for similar purposes like HTML5 Local Storage and local shared objects, web beacons, and embedded scripts. These technologies help us do things like remembering you and your preferences when you return to our sites, measure how you use the website, conduct market research, and gather information about the ads you see and interact with.
You can make choices in the menu below about what cookies and other technologies you want us to use on Adobe sites when you visit them from this browser. You can always change those choices later by clicking on the Cookie Preferences link at the bottom of the page.
If enabled:
We can improve your experience by tailoring the site and the content to things we think might be of interest
We can better keep track of your preferences — like what language you prefer to use
We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud
If disabled:
We won’t be able to remember you from session to session so the experience may not be tailored to your interests
You’ll still have access to the content of the site but certain features that depend on cookies may not function
You’ll still see ads, they just may not be as relevant to you
General information
You can control how Adobe websites use cookies and similar technologies by making choices below. But note that if you disable cookies and similar technologies entirely, Adobe websites may not function properly.
Cookies are small text files stored by your web browser when you use websites. There are also other technologies that can be used for similar purposes like HTML5 Local Storage, web beacons, and embedded scripts. These technologies help us do things like remembering you and your preferences when you return to our sites, measure how you use the website, conduct market research, and gather information about the ads you see and interact with.
You can make choices in the menu below about what cookies and other technologies you want us to use on Adobe sites when you visit them from this browser. You can always change those choices later by clicking on the Cookie Preferences link at the bottom of the page.
If enabled:
We can improve your experience by tailoring the site and the content to things we think might be of interest
We can better keep track of your preferences — like what language you prefer to use
We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud
If disabled:
We won’t be able to remember you from session to session so the experience may not be tailored to your interests
We’ll still count your use of our site and services
You’ll still have access to the content of the site but certain features that depend on cookies may not function
You’ll still see ads, they just may not be as relevant to you
Operate the site and core servicesOperate site and measure engagement
Always active
These cookies are required, and they are used to enable the site and related services core functionality. Without them the site could not operate, so they cannot be disabled.
These cookies enable the site and related services’ core functionality and collect statistics about user engagement, such as counting active use to help us understand trends. These cookies cannot be disabled.
Measure performance
These cookies are used to analyze site usage to measure and improve performance. Without them Adobe cannot know what content is most valued and how often unique visitors return to the site, making it hard to improve information we offer to you.
These cookies are used to analyze site usage to measure and improve performance. Without them Adobe cannot know what content is most valued, making it hard to improve information we offer to you.
Extend functionality
These cookies are used to enhance the functionality of Adobe sites such as remembering your settings and preferences to deliver a personalized experience; for example, your username, your repeated visits, preferred language, your country, or any other saved preference.
Personalize advertising
These cookies are used to enable Adobe and our partners to serve ads more relevant to your interests. Without them you will still see ads, but they might not be as relevant to you.
