How to Perform Competitive Analysis in Web Design. A Step-by-Step Guide

For a designer, competitive website analysis is an essential planning stage. It’s a way to get both indispensable info and inspiration.

The problem is that many designers only tend to notice the visuals. They make a critical assessment of design and consider the analysis done. This approach is a waste of time.

Competitive analysis requires a dispassionate investigation. The goal is to put together an objective picture of a given company’s success, not to choose the best design and creatively reinterpret it. Investigating your competitors should help you answer some pretty specific questions:

- What exactly makes this company / product / service unique?

- How does the company achieve its goals?

- How do the users achieve their goals?

- What advantages and disadvantages does the competitor’s website have?

Below, we lay out a simple but effective method of analysis. It saves you lots of time while ensuring you get all the salient information.

1. Limit your analysis time

‍

‍

The duration of analysis depends on how complex the project is and also on whether you work alone or in a team. In any case, you should limit your time to avoid getting sucked into it or skipping through it too quickly.

The obvious advantage of teamwork is that you spend hours checking out your competitors instead of days. But it’s not the only one. A designer working in a team is less likely to get stuck in analysis or, conversely, to do it superficially. Different viewpoints provide more objective findings, whereas one person’s vision is by definition subjective and limited. If you work alone, make every effort to learn other people’s opinions.

2. Stay on target

‍

‍

Remember what you want your analysis to accomplish. Let’s say your goal is to present a high-quality product. Analyze how your competitors do it but then try to improve certain features. Also look for any weak spots so that you can avoid repeating their mistakes. Ultimately, you can showcase the improvements you’ve made as an advantage, a unique feature of your product.

It’s more useful and important to look for advantages rather than disadvantages. Your number-one goal is to understand what makes a competitive website popular, fun, and preferable to the users.

Find what works for your competitors!

You might not even like a competitive website as a designer, but ask yourself: what is it that makes it effective? Switch off your designer mode and go full-on Sherlock Holmes on them.

3. Open your case

‍

‍

Typically, designers create a virtual pinboard to collect screenshots of pages and elements. It’s a useful way to see the big picture, but it still leads to the same problem: designers automatically start to analyze the visuals. Sherlock Holmes dies a premature death.

Is there a way to avoid it?

Sure there is! Create a folder with the following subfolders: Competitors List, Structure, Usability, Navigation, Content, Design (which is where you put that pinboard with screenshots and collages). A good idea is to add a Flaws subfolder. Finally, create a folder for Findings or Highlights.

‍

‍

Now let’s find good solutions for every category and sort the corresponding screenshots and examples into the folders. This is useful for several reasons:

- It’s a good reminder to analyze specific parameters, not just design.

- It helps you avoid being distracted and missing something.

- It compartmentalizes the analysis and encourages a comprehensive approach.

- It allows you to choose a “perfect competitive website.” A website that will hit every subfolder must be studied with utmost attention.

Just don’t forget to structure the contents of the folder. You can change the subfolders depending on your current project and the parameters that are especially relevant to it.

4. Look for competitors

‍

‍

- where should you look?

The exact answer depends on the type of your business. Generally, the best places to look are search engines, social media, and professional platforms (LinkedIn, Upwork, Clutch, Dribbble, Behance, etc.). Search in private mode to avoid getting personalized results. Put the search results into the Competitors List folder.

- how to choose the best examples?

You need to determine which competitors are in high demand instead of wasting your time looking at all of them. This can be done by relying on Forrester or Econsultancy reports. A user survey is another good way to learn what products and services are the most popular. Remote testing tools such as usertesting or whatusersdo will allow you to see how well a competitive website works.

Do not limit your search to direct competition only. Study the companies operating in related sectors. Many companies copy similar design solutions off each other. Studying your “neighbors” will expand your options and can lead to interesting and useful ideas.

Put the search results into the Competitors List folder.

5. Analyze layers

‍

‍

Layers: Competitors List, Structure, Usability, Navigation, Content, Design, Flaws, Findings.

Here are the most important characteristics that designers use to analyze a website:

- Page Structure

- Usability

- Navigation

- Content

- Design

Read more: How to Evaluate Design Quality

No, we’re not going to pile it all up and create a pinboard collage like in a bad cop movie. That’s not what Sherlock would do. We have folders for every occasion, don’t we?

Take one parameter and focus on it. Examine everything that has to do with this parameter only. For example, compare navigation at websites 1, 2, and 3, disregarding everything else for the moment. Put the info you’ve collected into the relevant section of your Navigation folder. Mark the solution that would be optimum for your current project.

Now move on to the next parameter, and so forth.

Examining information pertaining to only one feature is the best way to avoid distractions. You’ll be able to quickly and easily determine what works and why it does.

6. Integrate your findings

‍

‍

Sherlock Holmes had the inductive method: from particulars to generals. You have the Findings folder. This is where you put the best examples for each parameter. And now the real analysis starts.

You have gathered the best solutions, but let’s not forget that they are the best for the companies that employ them to reach specific goals pursuant to their own objectives and design. You can only use a similar solution if you have determined how and why it works for your competitors. Mindlessly copying something without really understanding it is never a good idea.

So you’ll have to think really hard about the last folder. The best is what works. But what will work in your case?

If you go layer by layer, asking this question every time and mentally applying the successful solution to your project, you will probably have a proper vision and understanding of what you need by the time you get to the Findings stage. As a result of all this hard work, you’ll have a conceptual model of a “perfect website.”

Improve with caution

‍

‍

Normally, users aren’t too happy about any radical improvements. They expect your design to resemble the one they’re used to. Be wary of making creative improvements that can ruin the familiar user experience or disrupt the existing trends and patterns.

Get to it

‍

‍

If you want to learn the inner workings of a thing, looking it over won’t be enough. You will need to dismantle it, examine each part, study the functions of the parts and the whole. And that’s what this method is about: dismantling and examining each isolated element to discover how it all fits together. Then you assemble it into one conceptual model. It will help you create your own thing, except better.

Give this method a try and you’ll leave the competition far behind!