Case Study - Transforming Monument Selection with an Interactive Web Gallery and 3D Models

We developed a custom website for Port Perry Monuments featuring an intuitive gallery that helps users navigate different monument types and colours. Additionally, we created a section displaying various granite types using 3D models built in Blender. These enhancements streamline the customer experience and boost the company’s SEO.

Client
Port Perry Monuments
Year
Service
Web Development
  • Web Development
  • Branding
  • UI/UX
  • 3D Modeling
  • SEO

Project Overview: Streamlining a Local Service Business's Online Presence

We developed a new website and digital experience for Port Perry Monuments, a local service business that designs monuments for loved ones who have passed away. The website features a custom gallery that showcases their products and services. Additionally, it features a section that displays various types of granite using 3D models created in Blender. These personalized additions allow customers to conveniently browse granite types and monument styles online, eliminating the need for in-person visits.

Optimizes performance and enhances rendering efficiency.
Next.js
Ensures type safety and improved code readability.
TypeScript
Enhances responsive design and simplifies dynamic styling.
Tailwind CSS
Built with React, a modern web development framework.
React

Meet the Client

Port Perry Monuments, a family-owned business with over 25 years of experience, specializes in crafting custom monuments from high-quality granite. Their mission is to create memorials that honor the unique spirit of loved ones, providing comfort and lasting solace for families.

Challenges with the Existing Website

Port Perry Monuments needed to improve customer navigation on their website. Initially, the site consisted of a single page featuring a few pictures and contact details. It hadn't been updated in over 20 years. As a granite monument builder, the company offers a wide selection of materials and styles for customers to choose from. This made it difficult to effectively showcase their options in a user-friendly format, especially with their very outdated site. To address this, we needed to develop a custom solution that aligned with their business model.

The Solution: Building a User-Centric Website

Our goal was to develop a new website that was not only user-friendly but also resonated with the compassionate nature of the business. To achieve this, we developed a custom website from scratch, incorporating intuitive features and thoughtfully crafted content.

By developing a custom gallery and 3D granite models using Blender, we made it easy for users to view the various monument types and colours offered by the company. An added benefit of creating these tailored sections on the website was our ability to target specific keywords, resulting in a significant boost in the company's organic search rankings.

Step 1: Establishing the Website's Branding

We collaborated with the owner of Port Perry Monuments to develop a fresh, modern colour palette for the website. We selected the Poppins typeface for its clear letterforms and generous spacing, which ensures readability even at smaller sizes. This choice not only enhances readability but also complements the overall design, which is particularly important as the website primarily caters to an older audience.

Step 2: Developing a Custom Website with an Intuitive User Experience

When developing the new website for Port Perry Monuments, it needed to meet specific criteria. As the website was for a locally owned monument maker, their business focuses on creating memorials for individuals who have lost family members.Therefore, we structured the content and messaging in a way that both reflected the company's values and was compassionate, as visitors would be going through a personally challenging time in their lives.

The website also features an intuitive online gallery, which allows customers to easily explore various granite types and styles from the comfort of their homes, eliminating the need to visit the showroom. To enhance the website further, we created a custom section to showcase the granite stones, helping customers visualize the final product more effectively. This approach not only aided customers in finding preferred monument styles and colours but also boosted the website's SEO.

Step 3: Creating High-Quality Granite Visuals Using Blender

When we began building the website, the owner only had a PDF with small rectangle images used to showcase the different types of granite he offered. These images were too low in quality for the web and didn't accurately reflect the granite's appearance in person. To solve this, our team decided to create custom granite images for the site.

We used Photoshop to recreate the granite colours, ensuring they closely matched the originals. Then, we imported these textures into Blender, a 3D modeling software. By applying the colours to a 3D sphere and adding a light source, we were able to replicate the natural shine and appearance of the granite. This gave customers a realistic representation of how the granite appears on the monuments in person.

Creating a Dedicated Section to Showcase Granite Options

We designed a dedicated section on the website to showcase the variety of granite colours, allowing customers to easily view and compare the available options. The previous images were blurry and failed to capture the true colours of the granite. Our solution not only improved the image quality but also provided a more accurate and visually appealing representation. If you want to see this in action, check out the granite colours page.

Boosting SEO with Tailored Landing Pages

To improve their SEO, we created separate landing pages for each granite colour. Our keyword research revealed that many people searching for memorials and monuments were specifically looking for certain granite colours. This approach helped target those searches more effectively.

Users start on the dedicated colours page, which showcases all the available granite options:

https://portperrymonuments.com/colours

When a user clicks on a colour, they are redirected to its dedicated landing page:

https://portperrymonuments.com/colours/ruby-red

On each landing page, we include the granite's name, a description of its appearance, and the region where it was mined. We also display a larger 3D model of the granite with a matching background to enhance its three-dimensional effect.

By creating landing pages for each granite colour, the site now ranks for various additional high-intent keywords. This significantly boosted the company's organic SEO, with these pages now generating nearly 20% of the total site traffic!

Step 4: Building a Custom Portfolio to Showcase Products and Services

We needed a solution to showcase the various types of monuments the business offered, along with the available granite colour options. The answer to this was developing a custom gallery section on the website.

To make this work effectively, we had the owner provide every image they had from past projects. We labeled each image, categorized them by monument type and colour, and recorded their locations. Additionally, we edited each image in Photoshop to remove the names on the monuments for privacy.

The gallery served two main purposes: making it easier for users to find examples of the different types of monuments available and improving the site's SEO.

Enhancing User Navigation

To help users easily find the monuments they were looking for, we created a gallery showcasing past projects. The gallery allows users to filter by monument type and granite colour, or they can search for specific attributes directly.

Additionally, users can save monuments they like, with the information stored via cookies. When they return to the site, their saved monuments are available in a personalized folder for easy reference.

Streamlining Contact Form Inquiries

We also added a feature allowing users to attach a monument image directly to the website's contact form. If users found a monument they liked or had a question about, they could simply click the email icon. This would redirect them to the contact form, with the selected monument image automatically attached.

From there, they could complete the form as usual. This streamlined the business's internal processes by allowing customers to provide the exact monument image they were referring to, making it easier for the company to assist with inquiries.

Improving SEO with Additional Landing Pages

We could have left the gallery as it was, but we wanted to further improve the organic search rankings across the site. So, we created dedicated landing pages for each project in the gallery. When users click on any of the projects within the gallery, they are taken to a landing page specific to that memorial.

While these pages don’t contain a lot of information, they do include key details such as the local area, monument type, and granite colour. You can view one of the gallery landing pages here. This approach helps improve Port Perry Monuments SEO, ranking them for additional keywords that they otherwise would not have captured.

Client Testimonial

The team at Modall Media was great to work with. They were very professional and delivered a great product.

Jeff B
Owner of Port Perry Monuments

The Results: Bespoke Web Development that Boosts SEO and Drives Customer Engagement

Thanks to our custom web development efforts, Port Perry Monuments now has a revamped digital presence that helps customers find and design the perfect memorial for their loved ones. The custom gallery section allows customers to easily contact the company about specific monument types and colours, streamlining the process for both users and the business.

As a result of creating landing pages for each service, granite colour, and past project in the gallery, we significantly boosted their SEO. Even though this is a niche industry with very low keyword volume, they are generating more organic search queries than ever before.

Optimizes performance and enhances rendering efficiency.
Next.js
Ensures type safety and improved code readability.
TypeScript
Enhances responsive design and simplifies dynamic styling.
Tailwind CSS
Built with React, a modern web development framework.
React

Tell us about your project

Ready to take your online presence to the next level? Contact our team for a free consultation and discover how our website development services can transform your business today.

Other case studies

176% Boost in Google Reviews: How Our Automated System Drives Growth

Discover how Modall Media developed a custom review management system and automated digital marketing strategy that resulted in a 176% increase in Google review submissions across PizzaForno's 70+ locations.

Read more

$30,000+ Revenue in 4 Months: Building a Mobile Car Detailing Brand from Scratch

Detaild approached us as a brand-new local business looking to establish itself and attract clients in a competitive market. We crafted a comprehensive digital and physical marketing strategy from scratch to rapidly build their customer base and enhance internal business operations.

Read more

Implementing a 3D Virtual Showcase to Enhance Customer Engagement

Discover how we leveraged cutting-edge 3D technology to transform PizzaForno's digital sales strategy and enhance customer engagement. By implementing an immersive 3D virtual showcase, we enable potential buyers to explore the intricate features and functionalities of various vending machine options, from anywhere, at any time.

Read more

600+ Emails Collected: How Facebook Chatbot Automation Drove Lead Generation

Learn how our automated Facebook Messenger chatbot enhances B2C lead generation for PizzaForno, efficiently capturing user information and distributing targeted coupon codes through our automated system.

Read more

Tell us about your project

Get in touch with us

  • Uxbridge
    9 Bascom St
    Uxbridge, Canada