Menu
Breaking down three arcade bar websites to reveal lessons in responsive design, optimal layouts, and brand presence.
When was the last time you got to play Space Invaders, shoot some pool, and drink your favorite local beer in the same night? These three local arcade bars - Uptown Alley Manassas, Continental Pool Lounge, and Carpool Herndon - provide all the entertainment and atmosphere for a good time.
But what about their online presence? A great website shouldn’t just reflect the venue’s vibe but must provide helpful information like game offerings, food and drink menus, and upcoming events. In this article, we’ll compare each of their websites to evaluate design, usability, and overall effectiveness.
The time it takes for users to form an opinion about a website is just 0.05 seconds. The hero section for Uptown Alley Manassas is very compelling and attention-grabbing. There are background images of food, drinks, and smiling guests with the bold logo and words “Strike up the Fun” front and center.
If you continue to scroll and scan the headers - “All Under One Roof” and “Innovative Eats” - and take in the close-up shots of wings and chicken tenders, you can’t help but feel excited! There are elements of sizing and layout that could be cleaner, but overall they do a good job with the copywriting and presentation.
To improve this first impression, the site should do away with the “Home” label at the top. You’ll notice this extra header at the top left of a lot of their pages. Not only is this redundant with the larger centered header below, but it creates awkward overlap with the logo and also contributes to an unnecessarily large white space at the top (I’ll dive more into this in the next section).
If you only have a split second to make a strong first impression, then you want to make sure that every detail is perfect.
There are so many things to consider when building a website. Ensuring the same quality experience when viewing a website on a phone and a computer is no easy task. This site looks fine on mobile, but on desktop sizes you begin to notice a few issues, both minor and major ones.
We’ll start with the minor one. While there’s no hover state for mobile, that’s one consideration that must be given for desktops. All of these images on the homepage are links to other pages, and visitors are bound to mouse over and click on them.
You can see that all of these have title attributes set to them. Title attributes are typically displayed as a tooltip when a user hovers their mouse cursor over an image. These numbers don’t provide any meaning, and this is one of those overlooked details that the developer was unaware was also visible to users.
Now on to the major issue that’s definitely hurting the website’s effectiveness. You can’t see the navbar at all on larger screen sizes!
You don’t have this problem on mobile devices because the site uses a hamburger dropdown menu. But on any device bigger than a tablet, the navbar is expanded. You’d never know it was there unless you caught your cursor changing from the default state to a pointer or happened to scroll over one of the links with a dropdown.
This highlights the importance of testing on all screen sizes because user behaviors and information displayed can be drastically different.
Occasionally you’ll see websites use iframes. An iframe allows you to embed another web page within your own page, effectively creating a window or frame within your page. Here’s an example from Continental Pool Lounge’s homepage.
There are cases where doing this is okay, such as embedding a YouTube video or Google Map to your site. But the use cases are limited. In this instance, it looks clunky because you have a floating box with its own scrollbar and content squeezed into a narrow window.
Style aside, there are SEO problems with iFrames. Because the content belongs to another website, it can’t be indexed or drive keyword traffic to your site. That also means that you can’t account for any third-party content, so if there were unwanted comments or security vulnerabilities with that site, then those would be passed on to yours as well.
My guess was that this option was chosen to eliminate any upkeep on this site, but many Content Management Systems allow you to easily post announcements once the infrastructure is set up. That would be the more ideal solution for both look and functionality.
I like the vibe that this arcade bar is going for, and they showcase it well on their site. They lean into the main orange brand color well, and all of the photos of their interior space show a vibrant and tropical palette that is both inviting and laid-back.
However, both the above and below images appear blurry and that cheapens the perception of this venue. It’s more apparent when viewing on a desktop.
One thing to note is that the image size is not actually the culprit. Both of these images are 2100x1050px which is adequate. However, the problem arises when they’re “zoomed in” and the resolution at that zoomed in level is insufficient. In essence, there aren’t enough pixels to represent the magnified image details. Here you can see the original photos with boxes to indicate just the part of the image that is used to stretch the full width of the screen.
For a simple landing page with not too much text, the reliance on imagery to set the tone makes it that much more crucial to deliver with high-quality photos.
This website for Carpool Herndon is clean and simple, yet it does a wonderful job articulating their brand. It’s the clean layout, consistency in the color scheme, and candid, authentic shots that all contribute to crafting a compelling pitch.
The main header image shows off the venue in all its classic retro vibe. You can see the old-school signage, license plates décor, and the many shuffleboard, billiards tables and dart boards in the space.
The homepage flow also makes a lot of sense:
What really stands out to me are the Happy Hour banner promos. They are well-designed and eye-catching.
It would be nice to be able to click on each of them to expand in a modal, since some of the text on the banner is rather small. Instead of just reading off deals in a menu, these banners add a good amount of flair in a fun way - 99 cent wings, 1/2 price burgers, 20% off all drafts - I’m in!
It sounds simple but users want to, and expect to, see photos of real customers in the space. Pictures of crowds having fun builds that confidence that when they go, the place won’t be empty and lackluster. It takes all of three seconds for me to scan the entire homepage and conclude that the space is nice and customers have fun there.
There are two common ways to display text with images - in an alternating layout (also known as zigzag layout) and an aligned layout.
The Nielsen Norman Group has a great article on best practices when choosing between these two design patterns. The main takeaway is that having meaningful images that support the text works well in both layouts. Users tend to ignore decorative images that offer little value, like cute illustrations/icons or stock photos, so having these in a zigzag layout is disruptive.
In this case though, I think the alternating pattern works well since the images are authentic and complement the text.
The last suggestion for an improvement is to keep the same styling for the headers across the homepage or introduce clear section breaks.
It’s a little unclear what this section is about or whether it’s actually two sections. There are three phrases that could each be a title, some text is centered while others are left aligned, and without a clear section break, it comes across a little disorganized.
One simple fix could be to increase the margin between the About paragraph and the “Happy Hour Carpool Style” heading and change the background to some complementary color or style.
Overall, this site has a clean design and a small adjustment to the layout for that section can enhance it even further.
A well-designed website isn't just about aesthetics. It’s about making an immediate impact, ensuring seamless functionality across all devices, and maintaining a polished, professional look. By prioritizing clarity, high-quality visuals, and a strong brand presence, you create a site that engages visitors and leaves a lasting impression.
If you're a business owner looking to refine your website this year, please fill out the contact form and mention that you'd like a website review in the project description. I'll personally evaluate your site and provide a consultation with tailored feedback and a plan of action.
