Have you ever gotten halfway through a website, completely lost about what to do next? You know, the kind with buttons that don't make sense or lead you down confusing rabbit holes?
Yeah, me too. But I actually love these sites.
![Free Resource: Website Optimization Checklist [Download Now]](https://no-cache.hubspot.com/cta/default/53/00d9cc96-eff7-4cea-8ff3-583374c3dcd5.png)
Here‘s the thing: By learning from their mistakes, we can avoid them and craft a user experience that’s smooth, clear, and (dare I say) perfect.
In this post, I‘ll explain what makes a website "bad" and share examples to help you avoid these mistakes in your designs. I’ll also give you some tips on creating the best possible website for your business.
What makes for bad website design?
There are six things bad websites have in common. A cluttered layout, hidden navigation menu, lack of color contrast, non-responsive design, and inconsistent typefaces are a few hallmarks of bad website design. Still, the main issue with sites with poor design is a lack of user-centricity.
Visitors come to your website to make a purchase, learn about your product, sign up for a newsletter, or apply for a job. If they have difficulty accomplishing any of these tasks, bad UI design is likely to blame. Bad usability websites could cause significant frustration and even mean your visitors will exit quickly.
But, how can you tell if your site suffers from poor UI design? Website engagement metrics, like average time on page and bounce rate, can provide insights into user centricity by telling you where your visitors tend to go on your website, for how long, how often, and where the source they came from. You can use this information to get a better understanding of what your website’s user experience is like.
Consider implementing user testing if you want a more in-depth site design analysis. Completing this will help you gather actionable insights into obstacles visitors face on your site. Then, you can implement changes based on what you've learned.
Fortunately, there are plenty of user testing tools available to help. For instance, HubSpot's Website Grader will evaluate your website based on several factors, including mobile, design, performance, SEO, and security, and then offers tailored suggestions for improvement.
Another way to get a sense of what bad website design looks like is by checking out some examples. So, let's learn how to spot bad UX/UI quickly and examine some website designs to understand what went wrong.
How do you quickly identify bad UX/UI?
Cluttered Interface
According to Hotjar's research, 92% of people said cluttered layouts would make them switch to a competitor. Moreover, 84.6% of web designers agree that the biggest mistake many businesses make is having a cluttered website design.
If banner ads, flashing sales signs, and pop-ups obscure the actual products, the interface requires a makeover as soon as possible.
News websites like the Daily News rely heavily on advertising revenue. By cramming more ads onto the page, they want to increase their income, which makes sense. However, the cluttered design prioritizes ad space over user experience. Readers struggle to navigate the website and find the information they're looking for.
Navigation Nightmare
No one likes a website with a confusing user flow. Clicking a button leads you somewhere unexpected, and it's unclear how to get back to where you started. The lack of intuitive flow makes it hard for users to find what they came for.
For example, take the Awwwards site.
It's got a really slick design, no doubt about it, but navigating through it is a real mess. Menus are strewn all over the place, up top and in the middle, making it a pain to find what you need. I end up spending way too much time just trying to sift through all the options.
It's frustrating enough to make me lose my nerve whenever I visit it.
No Visible CTAs
38.5% of global designers flagged the lack of CTA buttons on landing pages as a common slip-up.
Visitors come to your site with a purpose, but if they can't find clear buttons or directions, be ready to lose them.
Without clear CTAs, they'll likely leave and find a competitor with an easier path to follow. CTAs guide users on what action benefits them most — subscribing, buying, or contacting the company.
That's why CTAs need to be placed prominently and clearly visible on your website.
.png)
Free Website Optimization Checklist
This website optimization checklist will help you perfect your website's:
- Performance
- SEO
- Security
- Mobile Performance
Download Free
All fields are required.
Overly Complicated Flow
The more steps there are, the longer it takes users to finish a task. That can be a big turn-off in today's world, where we all want things done quickly and easily. The easier and fewer the steps, the better.
I came across an awesome Hotjar case study on Every.org. They increased donations by nearly 30% just by making the donation flow easier.
The issue: Users clicked “Donate” without adding a card beforehand and got stuck because they couldn't add the card at that moment.
So, Dave Sharp, the Senior Product Designer, suggested a simpler flow — users add a card directly during checkout, then donate in the next step.
This simple change made a big difference.
With the clearer process and added clarity, users were happier and more willing to donate. This improvement was brilliant — Every.org helped raise over $16 million for nonprofits in their first two years!
Inconsistency Chaos
A website that uses different fonts and color schemes on every page is chaotic. Such inconsistency disrupts the user's flow and makes the experience feel disjointed.
For example, Blinkee.com.
It has too many different fonts and colors that don't make sense or match. Basically, nothing goes together here:
Waiting … Forever
If a website takes forever to load your account or process orders, it's a bad sign.
Your website needs to load fast, ideally within two seconds (or less), according to WebFX. More than half of users will leave if it takes longer than three seconds (guilty).
Slowness frustrates users and makes them question the platform's reliability.
Also, Neil Patel throws down a surprising stat: A one-second delay in loading times can decrease conversion rates by 7%!
Cryptic Error Messages
A form submission on a website fails, but the error message simply says “Error.” Sounds familiar?
Such messages provide no clues on how to fix the issue and what causes it, leaving the user confused and frustrated.
Instead, explain the problem in simple terms (avoid technical jargon) and create informative and helpful error messages.
It’s also a good idea to tie the error message to the specific action the user was trying to perform. For instance: “We can't add this item to your cart because it's currently out of stock. Would you like to pick something similar instead?”
Desktop-Only Disaster
A website that looks fantastic on a desktop but becomes unusable on a phone screen is a big no-no.
The buttons are too small to click, the text is unreadable, and everything‘s a mess. I’d be the first to bail out of there. Not being mobile-friendly pushes away a lot of users.
And if we consider the fact that 63% of people use their phones to search for something online, then it's obvious that mobile responsiveness is not an option anymore — it’s a must.
Pro tip: Use the HubSpot website optimization checklist to get your priorities straight — from SEO to performance, mobile optimization, and security.
Examples of Bad Website Design
- ZARA
- Wayfair
- eBay
- Lipton
- Madewell
- Paper Source
- The Room
- IMDb
- Fandango
- Yahoo!
- CNN
- The Daily Mail
- Yale School of Art
- NYU
- University of Louisiana
- Craigslist
- Hacker News
- New Century Chamber Orchestra
- ODC/Dance
1. ZARA
What it got wrong: Unconventional navigation.
Visiting ZARA‘s website is reminiscent of flipping through an editorial magazine. It’s visually attractive, but shopping itself — which is the goal of site visitors — proves difficult. Consider the homepage of its US site above. The text is small, and the navigation menu hides behind a hamburger button, so it's not immediately apparent to users what to do next.
I also noticed that there’s no explicit CTA, which can make visitors easily confused or frustrated.
The user journey is also difficult to follow on ZARA‘s mobile site. When I clicked on the hamburger menu on laptop, an unconventional navigation menu revealed itself. Notice that there’s no “Clothing” option. Instead, there’s a lengthy list that visitors have to sort through to find what they’re looking for:
Users who forge ahead will find no breadcrumbs or sort options to help them browse. As a result of this poor navigation, I think users might bounce to a more traditional ecommerce site instead of guessing where to click next.
How to Improve
A navigation menu is a central aspect of good usability and is a hallmark of successful websites. While I appreciate Zara's artistic approach to an ecommerce site, user experience should be the priority.
With a more straightforward navigation menu and simplifying the user journey, Zara could reduce visitor frustration. I recommend Zara make this navigation menu more visual with icons that add more direction to the browsing experience.
2. Wayfair
What it got wrong: Lack of visual hierarchy.
Landing on Wayfair‘s homepage might also leave users feeling paralyzed with indecision. Whereas Zara’s homepage didn‘t offer enough choices, Wayfair’s offers a plentiful — which proves overwhelming.
The main qualm is the lack of visual hierarchy. Visual hierarchy arranges and organizes website elements so that visitors naturally gravitate toward the most critical elements. Visual hierarchy aims to lead visitors to complete the desired action. Without it, figuring out what to do next is tricky.
I feel like the main problem with Wayfair's homepage is that almost every element is the same size and color and has similar copy and icons. So users are being told to shop for beds and mattresses, vanities, area rugs, outdoor seating, and bedding sets at the same time. Rather than decide where to click first, some users might leave the site.
How to Improve
By using principles relating to size, color, contrast, and more, Wayfair can influence how users interact with their website. Wayfair needs to determine what they want to draw attention to and the actions they want users to take. Or instead of telling users to shop for everything at once, it could lead them to one subcategory the company would like to boost.
3. Arngren
What it got wrong: Bad color scheme.
Some websites can show both good and bad UX design, but Arngren isn't one of them. This Norwegian e-commerce site has many problems. It breaks all the rules of modern web design, and not in a good way… The landing page reminds me of those old yellow ad pages from the 90s.
Firstly, Arngren uses random colors in product titles, with only the prices shown in red. The brand doesn’t even show their business vision. It's just a mess of products all over the page. Other bad design examples include no navigation and tiny text.
How to Improve
The best approach here is to add clearer product categories instead of squeezing them on the right side. Bigger font, single-color usage, and the addition of white space will also smoothen things up.
4. Ling’s Cars
What it got wrong: Chaotic content.
Alt text: Ling’s Cars bad UI design
The colorful and flashy design, reminiscent of the 70s with over 9 GIFs — it’s just too much.
Despite being a popular UK-based car rental business, the chaotic visuals don't do justice to its reputation.
The bright colors make it hard for users to read or stay on the page, even though navigation is smooth with working links and fast load times. All website elements don‘t align well together. Honestly, it gave me headaches and hurt my eyes, so I couldn’t stay for more than a few minutes.
How to Improve
This site should go easy on the GIFs, keep a solid or light background, follow a neat color scheme, and categorize offerings in a cohesive manner.
5. Madewell
What it got wrong: Unclear mobile navigation.
In just the second quarter of 2022, mobile traffic constituted nearly 59% of global web traffic. Therefore, having an easy-to-digest mobile site is a necessity. However, these sites pose a design challenge: you want to provide all the navigation options and information a visitor needs without cluttering the interface. Madewell‘s mobile site doesn’t quite strike this balance.
How to Improve
While I like that Madewell offers a clean user interface, it negatively impacts user flow. To provide an even better user experience, Madewell needs to make the website responsive on the different devices that visitors use.
6. Paper Source
What it got wrong: Outdated design.
Paper Source was founded in 1983, and, like many brands that have been around for decades, its website demonstrates outdated design. The layout features images, text boxes, and CTAs. As a result of this obsolete design, customers might think the products — and overall brand — are outdated and opt for a newer, trendier brand. In the above picture, you'll also notice six CTAs, which can be confusing for visitors.
How to Improve
Paper Source has to overhaul its website design. Too much information on the homepage leads to user paralysis. I would personally opt for simpler, less confusing designs. By reducing the clutter on the landing page, Paper Source could make this a significantly more visually appealing site.
Bad Website Design: Movies
Movie websites inform visitors about a film and possibly persuade them to purchase tickets or film rights. However, if a movie website appears outdated, unprofessional, or difficult to navigate, visitors may exit before they get the information they desire. Here are a few movie websites that could use some tweaks.
7. The Room - Official Movie Site
What it got wrong: Lack of credibility.
I really can’t figure out the intent of The Room's website. . Is it intentionally bad? Whatever the reason, it has many UX faults, most of which contribute to a lack of credibility.
The website doesn‘t have a navigation menu and instead is one very long homepage. Therefore, you’ll have to scroll endlessly through the site if you want to find something.
The items below the featured image look like navigation items, but if you click on them, they open up a new tab. Some are broken and open up a blank tab. So your only choice is to exit the site or scroll.
You‘ll see many images, GIFs, and hard-to-read text as you go. The media and info are only somewhat related to the film and ultimately distract from the site’s primary goal: to get consumers to buy rights to use the film.
How to Improve
The website looks like it was created in the early 2000s and hasn’t been updated since then. This certainly affects its credibility and drives visitors away. So by adding navigation, fixing broken tabs, and cleaning up the text, the site gets a significant boost.
Free Website Optimization Checklist
This website optimization checklist will help you perfect your website's:
- Performance
- SEO
- Security
- Mobile Performance
Download Free
All fields are required.
8. 123 Movies
What it got wrong: Outdated design and lack of visuals
The layout is too simple with just text and a search bar.
There are no images or videos on the homepage, which makes it look plain and boring. On top of that, the wall of text below the search bar is really overwhelming.
There's a button that says “Use the old 123Movies? Click here,” which redirects to a similar version of the site with visuals. This is confusing, unnecessary, and I really don’t see the point here. It totally ruins the user experience.
How to Improve
I'd replace the big text blocks with movie covers, trailers, and actor photos to improve the bad ux design. When you enter the site, new movies should appear immediately, instead of redirecting to another site to view them. People love visuals, and this will make the site more inviting and attractive.
9. Fandango
What it got wrong: No clear CTAs
Like Zara, Wayfair, and the other sites discussed above, Fandango lacks a clear path for users. The problem: while an explicit CTA instructs visitors to buy movie tickets, there's no live link that brings them to a place where they can checkout. This leads to confusion, as guests are unsure where to buy tickets. Furthermore, the muted color scheme results in a lack of visual interest.
How to Improve
Fandango presents information without telling users what it wants them to do next. Fandango can enhance its website UX by making its primary CTA — buy movie tickets — feature a live link so visitors can rapidly take action and purchase their tickets.
Bad Website Design: News
The primary goal of a news website is to get people to consume as much of your content as possible. The trick is to promote a variety of your content without overwhelming or confusing the user. Here are a few that miss the mark.
10. Yahoo!
What it got wrong: Whitespace.
I appreciate that Yahoo! has thousands of articles in dozens of categories to offer. But in an attempt to showcase this variety of content, its homepage becomes overwhelming.
One problem is the excessive use of whitespace. This, combined with the small font size, affects the readability of the homepage. Various ads also contribute to a feeling of claustrophobia and confusion. As a result, instead of browsing the different content on the site, users might decide to exit and go to another news site.
How to Improve
Yahoo should be more mindful about the amount of whitespace it uses. Furthermore, ads take up a lot of space and make scrolling down to see what matters to users — the news — more cumbersome.
11. CNN
What it got wrong: Slow load time.
Think of slow load time as a website's enemy. Like Yahoo!, CNN is designed to showcase a wide variety of content, including images, videos, and text.
However, the page is heavy and slow to load. So slow that it's listed as one of the top slowest sites on the internet by Speedmonitor.io. Because load time is essential to the user experience and search engine rankings, CNN is likely losing visitors and positions on search engine results pages (SERPs) due to its speed.
How to Improve
CNN’s vast content library is weighing it down and making it load slowly. The site could enjoy a quicker load time by reducing the amount of text, images, and video.
12. The Daily Mail
What it got wrong: Too many ads.
Ads are a necessary evil because they ensure websites can provide free content to visitors while generating revenue from affiliate and product sales. Because eliminating ads is impossible, the goal becomes displaying them in a way that disrupts user experience as minimally as possible.
The Daily Mail does not meet this objective. The ads clutter the main body of the web page and both sidebars, pushing the content down and making it more difficult to read. They also significantly slow down the website's load time.
How to Improve
The sheer number of ads makes visiting this website an unpleasant experience. Readers just want to read the news, and covering most of the screen and disrupting the user is counter-productive. Designers should reduce the number of ads and adjust their placement to be less invasive.
Free Website Optimization Checklist
This website optimization checklist will help you perfect your website's:
- Performance
- SEO
- Security
- Mobile Performance
Download Free
All fields are required.
Bad Website Design: Education
An educational website informs visitors and provides them with the necessary resources about the institution. Therefore, a website that uses animations, colors, or other design elements in an unconventional way risks distracting attention from the content. I’ve shared some examples that fall short of this goal.
13. Yale School of Art
What it got wrong: Inconsistency.
It makes sense that Yale School of Art would want its website to make a bold impression. That could mean breaking some web design conventions — but in this case, it's at the expense of user experience.
While a vivid background can add more personality and depth than a solid background, it distracts from the rest of its content. The inconsistent use of colors, fade effects, borders, and font styles (uppercase, lowercase, italicized, bold, underlined, and regular font) is distracting.
How to Improve
For a school of art, this website has one of the most inconsistent layouts and styles I’ve seen. Yale should focus on creating a website that doesn’t negatively affect user experience. I recommend that it removes the distractions that affect readability.
14. NYU
What it got wrong: Color.
NYU‘s homepage has three major components — a navbar, a body section with a unique grid layout, and a footer — all of which are purple. Although they are slightly different shades of purple, there’s not much contrast, so separating one section from another is difficult. This is confusing and makes navigating the site more difficult.
Also, since the grid layout has some images but is mainly blocks with a solid background color and some text, it looks like the web page isn't fully loaded. More pictures would help prevent this misconception and provide valuable context to readers.
How to Improve
NYU should improve the contrast on its website. While the grid layout is unique, it makes the site feel squeezed and slightly claustrophobic. The site could benefit tremendously by using visual hierarchy principles instead of a grid and using color more sparingly.
15. UVIC
What it got wrong: Visual clutter.
You don’t expect bad UX design from one of the Canada’s premiere education institutions but sadly, I had to include University of Victoria in this list.
While the idea of including magazine covers on the website has potential, it‘s simply too much here. Cramming too many covers onto a single page doesn’t work.
Also, the homepage has a lot of information and due to too colorful background text is barely visible at some parts.
How to Improve
I’d replace the background full of magazine covers with something cleaner. Also, I’d highlight key info with a better hierarchy and contrasting colors.
Bad Website Design: Community
A community website is where people turn to get their news, find popular content and products, and hang out. Ideally, this website should make it easy for readers to browse casually and find exactly what they're looking for on any device. Here are a few community websites that fail to meet these requirements.
16. Craigslist
What it got wrong: Non-responsive design.
Craigslist is notorious for its bad website design (although there are also proponents who defend it). While it's not pretty, it does allow users to browse, sell, search for something specific, and connect.
The major problem I notice is that the site isn't responsive. So, if you open up Craigslist on your desktop or laptop and try to resize the window, it will hide a bunch of the content. Its mobile site works well, but nowadays, users expect to be able to access a website on nearly any device and screen size.
How to Improve
Craiglist’s website is not responsive on different devices, which affects the amount of traffic it attracts and retains. By enriching the mobile website experience, Craigslist could see an uptick in traffic and a lower bounce rate, as people will be more likely to visit and stay on the site.
17. Hacker News
What it got wrong: Readability issues
Hacker News is the go-to source for tech coverage and breaking news related to cybersecurity. Although it's a widely-read publication, it has some readability issues.
For example, each item in the list provides an action to upvote, sort by website, view the submitter's profile, sort by the time they posted it, comment, or go to the story. But the small and muted color of the font and lack of whitespace, icons, and hover effects makes it hard to tell that these are available and separate actions.
How to Improve
Changes in typography, color, placement, and whitespace would vastly improve the readability and scannability of this site.
Bad Website Design: Arts
An arts organization’s website aims to offer a space where patrons and supporters find information regarding upcoming events, buy tickets, and make donations. The most effective ones provide all the details visitors might need about performances, staff, volunteering, and more — while keeping the layout sleek and straightforward so it's intuitive. Here are a few art websites that could benefit from improving their design.
18. New Century Chamber Orchestra
What it got wrong: Inconsistent branding.
The New Century Chamber Orchestra has an awesome logo of three colors: pink, blue, and yellow. These colors appear throughout the site — but in different shades. For example, the headings, opt-in email form, and footer on the homepage are all different shades of blue (none of which match the blue in the logo). Across the site, there are CTA buttons that are neon pink, yellow, and blue.
How to Improve
Some of these choices seem inconsistent and unintentional, which injures the user experience and dilutes the brand's identity. The New Century Chamber Orchestra would benefit from sticking with one cohesive color palette.
19. Riverside Arts Center
What it got wrong: Messy and dull layout.
This website is shockingly uninspiring for an art center.
The color circles look like random blobs, the layout lacks any discipline, the logo is outdated, and the background is boring.
Also, the website doesn‘t stretch across the entire screen, leaving distracting white space on the sides. It’s so “old-school”.
And on top of everything, there’s “RIVERSIDE ART CENTER” section which repeats twice.
How to Improve
This site needs a total redesign. It should have a modern artistic approach, showcase some art, and have a better overall structure. Fonts should be aligned, and I’d definitely remove white spaces for a full-screen effect. And of course, they should remove all redundant/repeated parts.
The Showcase of “Bad” Websites
All sites above are examples of “bad” website design because they don't focus on the user.
Some have accessibility issues like poor color contrast, while others overwhelm users with too many choices or a messy layout. But there is still something good in this bad — you can learn from these mistakes and make sure to avoid them to give your visitors the best experience possible.
For instance, what I've learned is that, as with many other things — less is more.
The clearer the design, messages, and navigation on the site, the better the overall UX will be.
Editor's note: This post was originally published in December 2018 and has been updated for comprehensiveness.
![10 Best News Site Designs [+ What I Like About Them]](https://knowledge.hubspot.com/hubfs/best-news-site-design-1-20240911-3382426.webp)
![25 React Website Design Examples We Love [+ How to Make Your Own]](https://www.hubspot.com/hubfs/react-websites-design.png)
![19 Awesome 3D Website Examples [+ How To Make Your Own]](https://www.hubspot.com/hubfs/3d-website.png)