Analyzing competitors' products

It’s easy to make designs that make sense to you. It’s hard to make designs that make sense to everyone else. Analyzing others’ solutions to the same problem, lets you zoom out and it gives you a more holistic view that provides insight into creating a simple design.

There are four steps:

First, make a list of 7-10 competitors/companies who solve similar problems and analyze their solutions.

Second, go to each product, create an account (if you can), and take screenshots.

Third, place the screenshots in Figma and start grouping them based on patterns you observe. Come up with titles for each group.

Finally, after you've organized everything into groups, rate each screenshot based on which provides the most elegant design.

These screenshots give you a high-level view of how competitors solve a similar problem. Also, you’ll have an archive of your competitor’s IA and UI elements, which provide a great reference and can help provide support for your designs.

Go to the Analyzing the competition tab in the Figma workbook.

Then, look up AllTrails, Gaia, and WTA (Washington Trails Association). Start with these and if you need more, you can always look at other companies who solve similar problems.Log in to each product and take screenshots of the competitor’s experience that relate to your problem. Once you have all your screenshots organized into groups, rate each solution based on what you believe to be the best solution. When rating, ask yourself: Which solution solves the problem the best? Which is the simplest? Which is the most complex? Rate each screenshot: 0: No-go, 1: Poor, 2: Okay, 3: Good, 4: Excellent

When you're new in UX, it's really easy to design a highly complex solution, which is not what you want.  

Usually, your designs only make sense to you.  

That's why a great practice is to analyze competitor's solutions.  

And in this video, we'll show you how to do just that so you can gain inspiration and design solutions that make sense to everyone.  

Before we get started, you'll notice an exercise and the Figma workbook under the analyzing the competition tab.  

So, if you don't have your Figma workbook yet, go download it at kickassux.com under the free UX course page.  

All right, let's get started!  

Analyzing competitors and even non-competitors that have a similar problem, will help you fast track your design thinking.  

That's because it helps you gain inspiration from how other companies have solved a similar problem.  

Don't get us wrong.  

Looking at your competitor solutions doesn't mean that you can't be creative.  

Doing this will kickstart your creative process.  

It's worth mentioning that not all competitors have strong design standards.  

Companies that don't invest in UX usually create highly complex solutions.  

Even still, it's helpful to see how they solved the problem so you can find an opportunity to do a better.  

Additionally, their designs might be tapping into a known mental model for users. So you want to make sure you understand what they've created, just in case your users have the same mental models.  

Up until now you went through the research and understanding phase, which means that you know what problem you're solving and who your users and competitors are.  

Now it's time to take screenshots of how others tackle the problem.  

Here are the four steps:  

First using the problem you framed in the framing the problem lesson, make a list of seven to 10 competitors.  

If you've been following along, you already created the list of the three most direct competitors in your competitive analysis.  

Add other companies that solve similar problems to the list.  

For example, let's say you have an all online product and you're trying to make it work offline.  

Look at competitors who already have an offline mode and see how they designed it.  

Don't limit your list to only direct competitors because they might not have an offline feature.  

It's more about the feature than the competitor.  

Find other products that have an offline mode so you can capture as many screenshots as possible and see how it's done.  

For example, even though it does, let's say that Spotify didn't have an offline mode.  

On one hand, you would find out how direct competitors like Apple Music or Tidal make the offline feature work.  

On the other hand, you could look at other products that already have a similar feature such as Dropbox or Google Drive.  

Looking at outside of direct competitors broadens your perspective and provides you with insight and creative ways to solve your problem.  

Second, now that you have a list of competitors log in to each product and take screenshots of the competitor's experience that relate to your problem.  

While it might seem straightforward at first, the problem that you tackle has a lot more components to capture than you might expect.  

Using the same offline feature example, many surrounding components related to the problem might appear.  

For instance, how do competitors educate users about the offline feature?  

Does a banner up here telling you that you're offline?  

Does it stay on screen the whole time or does it come up once and then disappear?  

Is there a no banner at all?  

What happens to the controls that aren't available offline?  

Are they still enabled or disabled?  

Or are they completely removed?  

There are a lot more screenshots to capture than you think.  

You need to think of everything that might apply.  

Third, once you've collected your screenshots, import them into Figma or Figjam so you can look for insights and gain a high level view.  

Group these screenshots based on the patterns that you observe and then come up with labels for each group.  

This should feel really familiar because you're basically creating an affinity diagram with your screenshots.  

If you haven't yet watched the lesson on affinity diagramming, make sure to check it out and apply what you learn here.  

For example, imagine that you've collected a bunch of screenshots.  

At this point, you haven't identified patterns.  

After you've spent some time organizing them based on the patterns you observe, your collection of screenshots would go from something like this, to this.  

At this stage, your screenshots are organized in distinct groups.  

Once your groups are formed, label them.  

In the offline feature example, the first group might be called "offline feature education," the second "available offline folder," and the third offline banner.  

Now for the fourth and last step.  

After you've organized all of your screenshots into groups, rate each screenshot based on which provides the most elegant design.  

When rating them, ask yourself, which solution solves the problem the best and why.  

Which is the simplest?  

Which is the most intuitive?  

Rate each screenshot from one to four.  

With one being poor. Two, okay. Three, good. Four, excellent.  

These screenshots give you a high level view of how your competitors solve a similar problem.  

Also you'll have an archive of your competitors' IA and UI elements, which provide a great reference.  

To recap, you can fast track your design thinking by looking at other solutions.  

Doing this will give you a starting place for your creative process and help you discern how to tackle the problem in the simplest and most intuitive way.  

Beware, not all competitors have strong design standards.  

Companies that don't invest in UX usually create highly complex solutions.  

Finally we covered the action steps to take from capturing, categorizing, rating the screenshots of competitor solutions, and that basically what you're creating is an affinity diagram.  

This method will help you start your designs on the right foot.  

It can prevent you from creating a highly complex solution that's not user-friendly.  

And again, you're trying to create a product that fits users existing mental models.  

This helps ensure that you're considering all design patterns so you can create a solution that feels intuitive and familiar to users.  

And this analysis is useful throughout the design process.  

Referring back to this as you go through the rest of the UX process will continually inspire your information architecture and visual design.  

Now it's your turn.  

Go to the "analyzing the competition" tab and the Figma workbook and start adding screenshots of competitors.

Normally you'd take screenshots of seven to ten competitors or similar products, but for this free course, you just need to look at three products, AllTrails, Gaia, and WTA (the Washington trails association).  

And as one last reminder, if you don't have your Figma workbook yet, go download it at kickassux.com under the free UX course page.  

Happy analyzing.