A UX Designer’s Guide to a Website Redesign

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.

For UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter!