Pareto principle in web design - design a more effective website with the 80/20 rule

The problem of being a perfectionist in web design

Perfectionism can be a challenge for many graphic and web designers. Striving for excellence is admirable, but it can lead to some frustration with endless changing and tweaking until every element of the website is perfect. For many designers it is easy to get swept up in the design process and lose track of time while choosing typefaces, color palettes, and mulling over hundreds of pixel-perfect design decisions. Sure, it is important to deliver great work, but as a designer it is easy to lose focus of what this means? A website should not be about the designer's goals, it should be about meeting the desired outcome of the client, and at the same time balancing the limitations of time, resources, and energy. With no constraints in place, a website can easily end up over-engineered, slow, with too many elements and features that confuse the users. It is also hard to fit all the features in the limited time, so the designer might simply run out of time, and failing to deliver a good website by the deadline is very stressful for everyone involved.

What is the Pareto Principle?

The "80/20 rule," sometimes called the Pareto principle, states that 80% of the effects come from 20% of the causes. The Pareto principle was first introduced by an Italian economist named Vilfredo Pareto in 1895 when he observed that 80% of Italy's wealth was owned by only 20% of its population. He also noticed that 20% of pea pods in his garden produced 80% of the peas! The Pareto principle suggests that a few key elements are responsible for producing most of a given outcome. Since then, it has been applied to many other areas including business, economics, psychology and can even be practical for everyday life.

This translates well to smaller-scale examples as well; have you ever noticed that most of your income comes from a handful of the same steady clients? Or that you always seem to wear the same items of clothing while most of your wardrobe doesn't get used? While the ratio is not always exactly 80/20 and there are always exceptions, it is a great tool to help people identify which actions have the greatest impact on their success and prioritize these accordingly.

The Pareto Principle in web design and digital marketing

The Pareto principle applied to web design, assumes that most results will come from a small number of key features. In marketing, some campaigns will do much better than others. To reach the best outcome, it makes sense to focus on these small number of key features first and ensure they get the most attention, while the less important parts can be done quicker. One way to use the Pareto Principle is by focusing on user experience and usability - by paying attention to how users interact with your online content and ensuring they can find what they need, you are likely to reap greater rewards than if you were simply focusing on aesthetics alone. It teaches us that perfection isn’t always necessary, and that it is possible to achieve an even more effective website by optimizing the important 20% of features.

As an example, we just looked at the traffic data of a small ecommerce store that sells hand-made products and noticed several Pareto trends. For example, almost all their visitors access the site through mobile. Most product sales are from a small number of categories. Facebook was their biggest source of social media traffic. When examining a heat map of the product page, some areas get more engagement. The typical F pattern can be somewhat observed, with clusters of interactions in the top row and down the left side of the page.

What can be done with this information to improve sales for this client?

In this example, the quickest win would be to improve the mobile experience of this website, which was originally built for desktop. Heatmaps of all pages could be examined to learn more about the user preferences. For example, the most clicked questions from the FAQ section could be moved to the home page instead of hidden away. High-profit products could be featured in the page areas where the most clicks are likely to occur.

Always start with the 'Why'

(Image Source: Envato Elements)

From my experience in the industry, I've noticed that many designers are happy to accept the brief and start working on designs, even if they are missing key pieces of information relating to the purpose of the project. Perhaps the person compiling the brief thought this information was implied, or the client did not verbalize it concisely. Take a moment to step back before you start working. Without a clear understanding of why you’re doing what you’re doing, your web design will lack direction. Your website might look good to you and even to the client, but despite your many hours, the result will be disappointing if it does not achieve the client's anticipated results.

Ask yourself: Why does this website exist? Who will be the end-users of the website and how will they interact on the website? How will the website create value and success for your client? How will the client measure this success? How will the website attract visitors and capture leads? When you can answer these questions, and you understand the 'Why', it will make it easier to prioritize the 'What' and 'How' of the design elements. When you can visualize the desired outcome, it will help you concentrate your energy on the most important areas to achieve this.

Embrace the minimum viable product approach in web design

With so many decisions to make when designing a website, it can be difficult to know where to start. The minimum viable product (MVP) approach involves building only the core elements of a website right away and then continuously refining them through customer feedback over time. It is usually done to save costs and time, or when a business idea is based on many assumptions. Instead of attempting everything at once, developers can prioritize features based on customer needs and create prototypes as soon as possible. Even when you are not time or budget pressure, embracing the website as an MVP is a fantastic way to apply the Pareto principle and to combat perfectionist tendencies. Mentally, it helps to know that you could always add more features later, but that you should focus on the most important elements for now.

Designing for mobile-first can help you simplify your website

When designing a website, you want to give users an effective and intuitive experience. The best way to achieve this is to design with a “mobile-first” design approach. This concept involves creating websites that are optimized for mobile devices first, rather than desktop websites that are adapted for mobile. Why is this necessary? In 2022, according to techjury.net, mobile phones generate 60.66% of website traffic, while desktops and tablets together are responsible for 39.34%. This might vary in different industries and on different websites, but the trend is worth noting. By focusing your design on the mobile version of the site you can stack the odds of success in your favor.

Once you start designing for mobile devices, you will quickly notice there is less space for wording and clutter. It is quite hard to adapt, if you have been designing for desktops for a long time. But this approach fits in well with the Pareto principle, since it helps you choose the content with the biggest impact. This has two benefits: your site will be optimized for the mobile platform preferred by the users, and when you adapt it for desktop it will visually look modern and clean. You will still need to adapt your website to desktop later, but when working from the mobile-first approach it becomes much easier since you have already a simplified design.

Do research and analyze competitor websites

When it comes to web design, we often think of research as looking at other inspiring websites or templates with beautiful design elements. But research for web design goes beyond just admiring the aesthetics of other websites. It is necessary to understand how people use the web, how users interact with different designs, and how content is organized to create an effective website. By asking for any analytics data the client can provide or using a monitoring tool like Ranktracker, we can better identify areas of opportunity for improvement for a better performing website.

Research should include examining existing industry standards, target audiences and users’ preferences through competitor analysis. You can find competitors by asking the client, or by doing your own searches and seeing which websites rank at the top. Once you have identified some competitors, you need a reliable source for data on them. One of my favorite features of Ranktracker is the ability to add your own identified competitors and it will display the competitor performance in a column next to your own domain results. If a competitor is outranking you for your own keywords, it is worth while to analyze their website to learn from them. To add a competitor, you simply paste in their URL.

Click for a great in-depth article about how to conduct a competitive analysis.

While you do all your research, make a 'dream list' of all possible features and elements you could include (don't worry, you will narrow these down, but it is helpful to have all the ideas together).

Planning: Identifying Key Design Features

(Image source: Envato Elements)

The design of a website should be based on its intended purpose. Look at all the elements/features from your dream list and choose the ones you think will help your client achieve their goal. Take some blank paper and start drawing some rough wireframes for your website. On your wireframes, connect each element you plan to include to an outcome: if you cannot find a clear purpose for it, scrap that section. Don't think about design aesthetics, focus on what is best for the user experience and usability.

Contrary to popular belief, your first wireframes do not need to be designed with fancy design software. The analog approach of a pencil and paper will work just fine, and sometimes even better as you are not distracted by the software itself. Paper is more forgiving and less permanent; it is quicker to use which might help during the creative process. If you need to present wireframes to your client, this can be done more professionally once you have worked through the rough drawings.

Do a mock-up first, do not design in the web platform to save time

There is an old saying that you cannot fly an airplane while you're building it. This is true for web design: trying to build a website while you are still figuring out decisions about content, features, and design, is a recipe for frustration. To keep things efficient, you need a plan. Creating a mock-up of every page seems time consuming and counter-intuitive here, but it serves many purposes and will save time in the long run. Mock-ups enable your client to visualize the website before the web development even starts. They can experience the different color and font options, and easily anticipate what needs to be changed. Discussing a mock-up creates a lot of opportunities for discussion and questions. It increases the chances that your client will be happy when they see the live site for the first time. Most importantly, working with a mock-up allows you to build the website much faster once you get to the development stage as almost all the creative decisions have already been made.

Work with content that will rank well on Search Engines

Sometimes, a client will insist that you start designing with 'placeholder text' as they think your role is only to design the aesthetic elements. If possible, avoid doing any design work with generic placeholder text. While your designs might look beautiful, your website would lack purpose if you neglected a key ingredient such as well-written content.

A website is only valuable if it gets visitor, and Search Engine Optimization (SEO) is how search engines find your website organically. The wording choices using on a a page is critical for SEO, and the design elements should support the wording. If you know what the keywords are upfront, it gives you extra insight. If you are working with a copywriter for your content, ensure they are familiar with SEO. Even if you are not an SEO expert, become familiar with this topic so you can be more aware of this during your web design process.

Some keywords search tools are complicated (especially if you are new to SEO) but the Ranktracker Keyword Finder is very simple and intuitive: you simply add the keywords to a list and it displays the results color-coded by keyword difficulty. For good SEO you want to choose keywords with low competition but adequate search volume, so it is very helpful that the search volumes are displayed right there.

So, before you start, try to get at least a draft of the wording. If you are a standalone designer, it is likely you will also need to help the client figure out where the wording fits best on the website. A reality of the design process is that this wording might change a few times but having something to start with is so much better than nothing at all.

Simplify choices about fonts, colors, hierarchy, and visual elements

If you are a less-experienced designer or would just like to save some time, it is helpful to work with templates and use them as a foundation. For a CMS like WordPress, there are thousands of great templates at reasonable prices. These already have fonts, colors, hierarchy, and visual elements designed in a cohesive style. If you are concerned about originality, rest assured that your result will look different to the template since you are adapting it to your wireframes. Having some design assets and a general style to start with can really help you find direction and reduce the decision-fatigue. Don't include too many colors: you can safely limit your website colors to 2 colors or a maximum of 3. Check out The 20 Best Color Combinations to Try on Your Website for some great ideas and trends when choosing website colors.

Conclusion: Maximizing Impact

Knowing where to focus, can help a designer manage their perfectionist tendencies while still achieving success. The Pareto principle is a rule of thumb in web design that states 80% of the user experience can be achieved with 20% of the effort. This means web designers need to focus their efforts on optimizing content, on-page design elements, usability, and other factors to create an effective website that will rank well on search engines.