How Do You Know if Your Website Needs a Redesign?

I answer three questions when deciding whether or not to redesign a website:

Does the design look outdated?

Are my conversions/sales decreasing?

Have I received complaints about user experience or design-related issues?

If I answer yes to any of those questions, a website redesign is necessary.

It’s also important to consider branding. For instance, I recently bought Uber suggest, a keyword suggestion tool to which I’m adding more functionality.

Before I bought it, the site looked like this:

7 elements of a website redesign process

Interviews

Inspiration hit after those interviews—I felt like I knew everything there was to know about the product. So writing vision and mission statements, brand guidelines, a project brief, and website copy all came easy. Our website needed to better convey information so that people could have that same aha moment.

Project briefs

Before diving into the project, we wrote a project brief to keep everybody on the same page. We updated it as needed so it always reflected the current state of the project.

Some questions a project brief might answer:

What are we trying to achieve?

How will we know the project is a success?

What do we need to do?

Why do we need to do it?

What are the must-haves?

Who are we doing this for?

How will they know about it?

Who’s on the project team?

What’s our deadline?

Competitive analysis

We looked at what else is out there. I started with a list of competitors, then moved on to businesses that serve our target audience outside the ecommerce field.

We compared competitors’ strengths, weaknesses, and opportunities and highlighted areas we wanted to draw attention to—and features we wanted to avoid.

Our competitive analysis document

We compared competitors’ strengths, weaknesses, and opportunities and highlighted areas we wanted to draw attention to—and features we wanted to avoid.

Information architecture

Information architecture is the practice of organizing content so it’s easy to understand. In web design, structural diagrams map the relationships between all the screens of a site, giving you a high-level overview of your site’s components.

I drew an information architecture diagram of our old site that showed the relationships between the screens. I evaluated the content, our goals, and traffic before updating and suggesting changes. The diagram helped us define the scope of our project releases and acted like a checklist as we wrote, designed, and coded all the pages.

Wireframes

I used wireframes throughout the redesign to help think through problems and get approval for ideas. Some were sketched on napkins and shared face-to-face, and others were drafted and shared online.

An unexpected bonus of wireframes: they help you write content. Just writing in a document makes it tough to visualize how everything will fit together, but pasting content into wireframes gives you a clear sense of the flow of the page and how each piece of content relates to another.

High-fidelity wireframe used for the Shopify Plus Redesign

Inspiration boards

My inspiration boards showed my vision of what our new brand might look like. They were my way of getting early buy-in from the team.

I used Pinterest, and instead of letting ideas get lost in the abyss of a single board, I created several boards dedicated to specific areas like navigation, animations, and typography.

I sketched ideas in Illustrator as I researched, combining words, images, and colour swatches into something that looked like an ad. The same elements appeared in all the sketches, but their placement and appearance changed from sketch to sketch.

Mock-ups and prototypes

Many people don’t pay attention to wireframes or web designs if they’re printed on paper. Showing a design on a screen is fine, but it’s always best to see a design through the eyes of your audience.

I started developing interactive mock-ups early on in the wire framing process. We shared them with our customers and the team throughout the project until most of the site was coded.

I asked people to say their thoughts out loud as they browsed so I knew what they were thinking as they interacted with the mock-ups. That feedback highlighted problem areas and validated design choices so we could finalize the project.

While some organizations may stick to a particular order for their redesign process, mixing up these 7 steps worked for us. Using a strategy that fits into your workflow is an essential part of a successful redesign.