Before and After: Rethinking a Small-Business Website From the Ground Up
Introduction
A website can look modern and still fall short where it matters most.
Large photographs, animations, videos, and visual effects may create an impressive first impression, but they do not necessarily make a website fast, easy to navigate, or effective at turning visitors into customers. In some cases, these features can introduce unnecessary complexity, distract from important information, and contribute to poor performance—especially on mobile devices.
To demonstrate what a more intentional approach to web design can accomplish, Audubon Website Services selected an existing small-business contractor website and reimagined it from the ground up. The goal was not simply to give the website a new color scheme or make it look more modern. Every major design decision was reconsidered with usability, performance, accessibility, mobile experience, and customer conversion in mind.
Throughout this case study, we will examine several common problems found in the original website, explain why they can negatively affect both visitors and business owners, and show how the redesigned concept addresses them. From clearer messaging and simplified navigation to stronger calls to action and a more focused user experience, each change was made with a specific purpose.
The result is more than a visual makeover. It is an example of how thoughtful design and performance-focused development can transform a website into a clearer, faster, and more effective tool for a small business.
This independent redesign concept was created by Audubon Website Services for educational purposes. Identifying information from the reference website has been replaced with fictional branding.
The Starting Point: A Website That Looked Like Many Others
At first glance, the original website did not appear unusually outdated or poorly designed. In many ways, it looked similar to countless small-business and contractor websites found across the internet. It used large photographs, social media links, and customer reviews. Many of these elements are commonly associated with modern web design, and individually, none of them are necessarily a problem.
The website presented several opportunities for improvement. Its visual hierarchy made important information harder to prioritize, the page contained more content than visitors needed, and the underlying implementation placed a significant burden on performance. These issues were not always obvious from a quick glance, but they became much clearer when the website was evaluated from the perspective of usability, mobile experience, and technical performance.
The purpose of this redesign was not to criticize these features simply because they were created with a page builder or because the website followed familiar design trends. Instead, each element was evaluated according to a more practical question: did it help visitors understand the business, find the information they needed, and take the next step—or did it add friction, distraction, or unnecessary technical weight?
To understand where the greatest opportunities existed, we first examined the website’s performance, organization, messaging, and user experience. The results showed that the most important improvements would require more than changing colors or updating photographs—they would require a clearer strategy for how the entire website communicated and functioned.
How We Diagnose Website Performance
A website cannot be fully evaluated by appearance alone. While design plays an important role in creating trust and guiding visitors, many of the factors that shape the user experience operate behind the scenes. Loading speed, mobile responsiveness, accessibility, code quality, and search-engine visibility can all affect how effectively a website serves both its visitors and the business behind it.
At Audubon Website Services, we use Google Lighthouse as one of several tools for evaluating website quality. Lighthouse analyzes a webpage across four major categories: Performance, Accessibility, Best Practices, and Search Engine Optimization (SEO). It provides measurable insight into areas that may not be obvious during a quick visual review.
A Lighthouse score is not a complete judgment of a website, nor does a high score guarantee that a website will generate more customers. However, it provides a useful and repeatable way to identify technical weaknesses, compare improvements, and understand how design and development decisions affect the experience delivered to visitors. I'll give a brief mention as to what these four categories entail:
Performance
Performance measures how quickly a webpage loads, becomes visually stable, and responds to user interaction. Large images, video backgrounds, excessive scripts, third-party integrations, and inefficient code can all negatively affect this score.
Accessibility
Accessibility evaluates whether a website follows practices that help people with different abilities use and understand its content. This includes factors such as color contrast, descriptive image text, properly labeled controls, and a logical page structure.
Best Practices
Best Practices examines whether a website follows modern standards related to security, browser compatibility, image quality, and reliable development practices.
SEO
The SEO audit evaluates whether a webpage includes the technical foundations that help search engines discover and understand its content. This includes elements such as page titles, descriptions, mobile compatibility, crawlability, and descriptive links.
What a Lighthouse Report Looks Like
The Lighthouse report below provides a snapshot of how the original website performed across four key areas: Performance, Accessibility, Best Practices, and SEO. While no single score tells the complete story of a website, these results help reveal technical weaknesses that may not be obvious from appearance alone and provide a measurable starting point for identifying opportunities for improvement.
It's never good when you don't see any green. That means there's pleanty of room for improvement.
The obvious issue is the Performance score at 37. That's very low. Upon further inspection, some of the usual culprits of a low performance site were found, such as large and unoptomized images (oversized JPEGs in this case), lots of render-blocking JavaScript files (files that have to download and run before the browser is allowed to display the website), and an excessive amound of JavaScript files (lovely gifts from the page-builder), and some layout shifting issues as well.
Accessibiltity issued were also the usual ptoblems, namely poor contrast between background and font colors along with forgetting alt tags on some images (these are descriptions of the image that the developer should include so individuals using a screen reader can interpret what the image is).
Best Practices also highlighted some now outdated coding methods used that should be updated along with some coding practices that should never have been used.
SEO is a misleading category for people who don't know much about web development. A 100 SEO score does not mean that your website is going to rank #1 in search results. It only means that the underlying code of the website contains important information that the brower wants to see and is structured in a way that the browser likes. So as long as you just write the code correctly, SEO should be 100 always.
With the website's technical baseline established, the next step was to look more closely at the design and user experience decisions contributing to those results. The goal was not simply to increase a set of scores, but to create a website that was clearer, faster, easier to use, and better aligned with the needs of potential customers.
Looking Beyond Appearance: What Was Holding the Website Back?
A Lighthouse report provides valuable insight into what is happening behind the scenes, but numbers alone cannot tell the complete story of a website. A site can score 100s across the board, while still be confusing to navigate and visually unimpressive.
This is why Audubon Website Services looks beyond individual scores and evaluates how every part of a website works together. Does the visitor immediately understand what the business does? Is important information easy to find? Is there a clear path toward taking action? Does each design element serve a purpose, or is it simply adding more visual noise?
Problem 1: Dated website visual structure
In the original website, many of the biggest opportunities for improvement were found in these details. The site had an older style of design that was popular up until around 2010 called the boxed layout. It usually is not used anymore because it can make a modern site feel visually contrained, especially on larger desktop displays where substantial screen space goes unused. On the desktop view of the site, there's also a stray "skip to content" button that appears in the very top left on the background. This is certainly some kind of artifact from the page-builder that makes the site seem less professional.
Problem 2: Lack of a clear progression / Call-to-Actions
This is probably the biggest issue I see with this site (any many others). A strong business website should guide visitors through a logical progression. A potential customer arrives with a question or a need, learns what the company does, discovers why it may be the right choice, sees evidence that the business can be trusted, and is then given a clear opportunity to take the next step.
This site didn't have that clear progression. Rather than leading visitors through a deliverate journey, it presented minimal, vague information on the landing (home) page and didn't guide the visitor to any other pages nor to a contact form or "call us" button. These triggers to cause a customer to reach out to the company are called calls-to-action (CTAs). A visitor should never have to wonder how to request service, get a quote, schedule an appointment, or contact the business. These CTAs should appear at intentional points throughout the page—particularly after the website has given the visitor a reason to act.
Problem 3: Visual clutter
On the original home page of the site there is some visual clutter going on. They have a large banner image with their logo at the top, then there is a right panel on the page that has several links for different things like their BBB accredidted business tag, their FaceBook link, and a custom link they made for their emergency service calls. Those links are for different purposes, they are different sizes, and they have different color schemes. Therefore, they should be placed more intentionally instead of all crammed together in this right panel.
Our Redesign Strategy
With the major problems identified, the next step was not simply to give the website a more modern appearance. The redesign began, as it always does, by reconsidering the role of every section on the page and asking a simple question: What purpose does this serve for the visitor?
Our goal was to create a clear progression from the moment someone arrives on the website to the moment they are ready to take action. The redesigned homepage introduces the company and its services immediately, helps visitors understand why they should trust the business, provides evidence through completed work and customer testimonials, and ultimately leads toward a clear call to action.
At the same time, the redesign eliminates unnecessary visual distractions and prioritizes a lightweight, performance-focused approach. Rather than adding features simply because they are available, every design and development decision is made with clarity, usability, performance, and the needs of the business in mind.
What Changed, and Why it Works Better
With the overall redesign strategy established, the next step is to look more closely at how those ideas were put into practice. The redesigned website was not created simply to look newer or more visually appealing. Each section was reconsidered based on the role it plays in the visitor's journey—from making a strong first impression and communicating the company's services to building trust and ultimately encouraging the visitor to take action.
Let's take a look at what Audubon Website Services was able to do with this site redesign.
A Clear First Impression
A bold headline immediately communicates the company's value, while a strong visual establishes a professional first impression and helps capture the visitor's attention. Supporting text provides just enough additional context without overwhelming the page, and a prominent call to action gives interested visitors an immediate path forward.
Rather than asking visitors to interpret a busy collection of competing elements, the new hero establishes a clear visual hierarchy: first capture attention, then communicate value, and finally provide a clear next step. This creates a stronger introduction to the business and sets the direction for the rest of the visitor's journey through the website.
Navigation Built Around Customer Intent
The original website offered only three primary pages: Home, About, and Services. While these pages provided basic information about the company, there was no clear path for a potential customer who was ready to take action. The website did not include a dedicated contact page or inquiry form, and there was not even a prominent Call Us button to give visitors an immediate way to reach the business.
The redesign addresses this by building navigation around customer intent. Visitors can still easily learn about the company and explore its services, but they are now also given clear and convenient ways to make contact. A dedicated contact page provides a straightforward inquiry form for customers who prefer to reach out online, while a prominent Call Us button gives those with an immediate need a direct path to speak with the business.
These may seem like simple additions, but they address one of the most important purposes of a small-business website: turning interest into action. A visitor who has already decided to inquire about a service should never have to search for a phone number, hunt through a footer, or leave the website because there is no obvious way to get in touch. The redesigned navigation removes that friction and ensures that the path from browsing to contacting the business is always clear.
Services That Are Easier to Understand
A potential customer should not have to decipher a vague list to determine whether a business offers the service they need. The original website presented its services primarily as a simple bulleted list, providing little context about what each service involved or helping visitors understand which option was relevant to their particular needs.
The redesign transforms this information into six dedicated service cards, each focused on a distinct area of the company's residential and commercial electrical work. Every card combines a clear service title with a visual representation and a brief explanation, allowing visitors to quickly scan the section and develop a much better understanding of what the company offers.
More importantly, the service cards are not dead ends. Each one links directly to the corresponding section of the dedicated Services page, where visitors can find a fuller description and learn more about the specific work the company provides. This creates a natural progression from quick discovery to deeper exploration, without overwhelming the homepage with unnecessary detail.
The result is a services section that does more than simply list capabilities. It organizes information around the customer's needs, makes the company's offerings easier to understand at a glance, and gives interested visitors a clear path toward learning more and ultimately taking action.
Building Trust Before Asking for the Sale
Before a potential customer contacts a business, they are often asking themselves a series of questions: Can I trust this company? Are they experienced? Do they do quality work? Have other customers had a positive experience? A strong business website should answer these questions before asking the visitor to make a decision.
The redesign builds trust progressively throughout the homepage rather than relying on a single sales pitch. The Why Choose Us section highlights the qualities that set the company apart, including experienced electricians, fast response times, a commitment to safety, and a strong local reputation. These points help visitors understand not only what the company does, but why they should feel confident choosing it.
That confidence is then reinforced with tangible evidence. The Our Work section gives visitors a visual look at completed projects, allowing the quality of the company's work to speak for itself.
The Words From Our Customers section adds another layer of credibility by sharing the experiences of people who have already worked with the business.
Each of these sections serves a deliberate purpose in the visitor's journey. Rather than immediately asking for a phone call or quote before establishing credibility, the redesigned website first provides reasons to trust the company. By the time visitors reach the final call to action, they have already learned about the company's services, seen what makes it different, viewed examples of its work, and heard from previous customers.
A Stronger Mobile Experience
For many potential customers, the first, and perhaps only, interaction they have with a business's website will happen on a smartphone. A mobile website should therefore be more than a desktop design that has simply been compressed to fit a smaller screen. It should be intentionally designed around the way mobile visitors actually browse, find information, and take action.
The redesign creates a cleaner and more focused mobile experience, with readable text, appropriately sized buttons, intentional spacing, and a clear visual hierarchy that guides visitors naturally from one section to the next. Important information remains easy to find without forcing users to navigate through cluttered layouts or search through excessive content. The navigation has also been designed with mobile users in mind. Visitors can quickly explore the company's services, learn more about the business, submit an inquiry through the dedicated contact page, or call directly from their phone.
Most importantly, the mobile experience preserves the same deliberate progression as the desktop version. Visitors are introduced to the business, shown its services, given reasons to trust its expertise, presented with examples of its work and customer feedback, and ultimately guided toward a clear call to action.
Mobile design should not be an afterthought. It should deliver the same clarity, credibility, and purpose as the desktop experience and adapted specifically for the device in the visitor's hand.
Clear Designations at the End of the Page
A well-designed landing page should not simply run out of content and leave visitors wondering what to do next. After introducing the business, explaining its services, establishing credibility, showcasing completed work, and sharing customer experiences, the page should bring that journey to a clear and intentional conclusion.
The redesigned website ends with a prominent call-to-action section that gives visitors an obvious next step. By this point, potential customers have had the opportunity to understand what the company offers and why they should feel confident working with it. The final call to action builds on that established trust by providing direct options to get in touch, whether by requesting service online or calling the business directly.
This placement is deliberate. Rather than asking for the sale before giving visitors a reason to act, the page first answers their questions, addresses their concerns, and demonstrates the company's credibility. The final call to action then appears at the natural point when an interested visitor may be ready to make a decision.
A strong landing page should not end with a dead end. It should leave visitors with a clear destination and make taking the next step as easy as possible.
Measuring the Improvement
Results of the Redesign
To evaluate the improvement, we once again turned to Google Lighthouse and compared the redesigned website against the same categories used to assess the original: Performance, Accessibility, Best Practices, and SEO.
The redesigned website achieved a perfect score of 100 in all four Lighthouse categories: Performance, Accessibility, Best Practices, and SEO. Compared with the original scores of 37 for Performance, 67 for Accessibility, 77 for Best Practices, and 85 for SEO, the difference is substantial.
The most dramatic improvement came in Performance, where the score increased from 37 to 100. This reflects the performance-focused approach behind the redesign: eliminating unnecessary visual and technical complexity, prioritizing efficient assets, and building the experience around speed from the beginning rather than attempting to optimize an unnecessarily heavy website after the fact.
Our Standards at Audubon Website Services
At Audubon Website Services, our standard is straightforward: Accessibility, Best Practices, and SEO should score 100 whenever possible. These categories largely reflect fundamental aspects of how a professional website should be built. Proper color contrast, descriptive alternative text, secure and modern development practices, mobile compatibility, crawlability, and essential SEO metadata are not optional extras—they are part of delivering a complete, professionally developed website.
Performance is somewhat different. While we aim for the highest score possible, our standard considers any score of 92 or higher to represent excellent performance. Lighthouse performance scores can fluctuate slightly between tests due to factors outside a developer's direct control, including network conditions, device resources, server response times, browser activity, and third-party services. Even a well-optimized website may not receive precisely the same score on every test.
Performance can also involve legitimate tradeoffs. A website may need high-quality imagery, custom fonts, analytics, embedded maps, scheduling tools, or other functionality that provides genuine value to the business and its customers. The goal should not be to chase a perfect score at the expense of useful content or functionality, but to ensure that every resource earns its place and that unnecessary technical weight is eliminated.
For that reason, we view 92 or higher as an excellent performance result, while continuing to pursue 100 wherever practical. What matters most is that the website loads quickly, responds smoothly, remains visually stable, and delivers a strong experience across devices and connection speeds.
The difference between the original website and the redesign demonstrates what can happen when performance, accessibility, usability, and technical quality are treated as part of the design process from the beginning—not as problems to address after a website has already been built.
A better website should not only look better. It should be built better, perform better, and provide measurable evidence of that improvement.
What Small Business Owners Can Learn From This Website Makeover
The most important lesson from this makeover is that a website should be evaluated by more than its appearance. A modern-looking design may create a strong first impression, but visual appeal alone does not guarantee good performance, clear communication, easy navigation, or an effective path toward turning visitors into customers. Every element, from images and animations to headlines and buttons, should serve a clear purpose.
A strong small-business website should guide visitors through a deliberate journey. It should quickly explain what the business does, make its services easy to understand, establish trust through experience and customer feedback, and provide clear opportunities to take action. Visitors should never have to search for a phone number, wonder how to request service, or reach the bottom of a page without knowing what to do next.
Technical quality matters just as much as design. Speed, accessibility, mobile usability, SEO, and modern development practices all contribute to a better experience, even if visitors never see the work happening behind the scenes. Ultimately, the best websites are not necessarily those with the most features, but are the ones that most effectively connect visitors with the information they need and make it easy for them to become customers.
The Audubon Website Services Approach
At Audubon Website Services, we believe a great website begins with understanding its purpose. Before choosing colors, adding animations, or deciding how a page should look, we consider what visitors need to know, what questions they are likely to have, and what actions the business wants them to take. Every section should have a reason for being there and contribute to a clear, intentional experience.
Our websites are custom-designed and hand-coded with performance, accessibility, mobile usability, and SEO in mind from the beginning. Rather than relying on bulky page builders or unnecessary plugins, we take a streamlined approach that gives us greater control over how a website looks, functions, and performs. The goal is not to add complexity for its own sake, but to build exactly what the business needs—and nothing it doesn't.
Most importantly, we build websites around the needs of real small businesses and their customers. A website should clearly communicate what makes a company valuable, establish trust, make services easy to understand, and give potential customers an obvious path toward taking action. As this makeover demonstrates, good web design is about much more than creating something that looks professional. It's about bringing together thoughtful design, purposeful content, and strong technical development to create a website that genuinely works for the business behind it.
