Screenshot of completed web design.

Kozyra Construction’s website has been featured as one of 10 amazing Duda website examples you absolutely must see. 👏🏽

Kozyra Construction were looking to provide an updated user experience that showcased the dozens of custom modular home floor plans they can build for their customers. This is a case study of a local construction company’s web design project.

Their website also needed to communicate they a reputable Modular Home Construction Company in Massachusetts, and that they also provide Septic Design Services, and Excavation Services for home owners and businesses.

The challenges with this construction company website included:

  • Not being mobile-friendly or responsive
  • Missing an SSL certificate
  • Visitors must download PDF files to view floor plans
  • Pages were not indexed for search
  • Website was super slow 🐢

Below is a screenshot of the floor plan page of the original website 👇🏽

Screenshot of Kozyra Construction's old website.

More Floor Plans Please

Creating a responsive website and adding an SSL certificate are standard features of any good web design project.

What was going to be more of a challenge, is how to make their 120+ floor plans easy to navigate, view, and print for visitors. Especially from a mobile device since that is where a majority of traffic will come from.

Below is an example of the detailed floor plans that visitors can download and print out from the website.

Floor plan for a modular home.

The Approach

Since Kozyra had 120+ unique floor plans to showcase on their website, we had to take a different approach than creating each page one-by-one manually.

This is where using Duda’s dynamic pages to feed content from a library or database will be a perfect solution for this project.

Graphic showing how Duda's dynamic pages work.

All the data regarding Kozyra’s floor plans will be stored in a table that is hosted with Airtable and used Airtable’s API to connect. That table will feed each element on every floor plan page.

You can see in the screenshot below, each column is connected to a particular element on each of the floor plan pages. Any adds, moves or changes done here will automagically be reflected on the website.

Screenshot of an Airtable database.

What about descriptions and unique content within the website? Great question!

That’s where Airtable’s formulas come in and populate the content with data that is unique to each floor plan. Let me show you in the screenshot below.

Screenshot of an Airtable formula.

In the above example, this column pulls data from the {Type} and, {Bedrooms} columns allowing for the content to include unique data about that particular floor plan.

 

What about those PDFs?

Each and every floor plan was given to me in a PDF format. Each had to be converted into a JPG or PNG in order to render them on the website properly and in a mobile friendly fashion.

This is where PDF to Image was a HUGE help! And because each page inside the PDF generates a separate image file, those larger floor plans needed some extra care to merge the images back into a single file. 😫

 

What was the end result?

Mobile view of Kozyra Construction website.

A mobile friendly floor plan website!

For those who still wish to print out those PDFs, you can click on the Print button and open a PDF copy of the floor plan and print it out or save it. 🥳🖨

Lastly, the website is optimized for search by doing the following:

  • Adding the SSL certificate
  • Google indexes mobile-first and the site is now mobile friendly
  • Adding schema markup to the website
  • Relevant keyword use in titles and descriptions for every page
  • Improved site speed and usability

PageSpeed Insights before and after 👇🏽

Completed Web Design Project

The initial challenges for Kozyra Constructions website project were that the site was not mobile friendly, there was no SSL certificate, only PDF only versions of each floor plan, and the site was not optimized for local search.

Screenshot of completed web design.

Kozyra Construction is a local business that is benefitting from having a responsive website optimized for local search. If you’re interested in learning more about this project, please feel free reach out.