Selected Work

Design + Development

Marketing Website

Website Design / Frontend Development

InspectionPal

Turning a specialized dealership platform into a clear, credible digital presence.

I independently designed and developed a new website for InspectionPal, organizing supplied product information into a structured experience designed to explain the offering, establish credibility and support dealership inquiries.

Role

Designer + Developer

Ownership

Design → Development

Technology

Gatsby

Status

Live Website

Current Website

InspectionPal

Designed + Developed Independently

inspectionpal.com

InspectionPal website homepage designed and developed by Victoria Benoit

Starting Point

A new website with room to define the direction.

The previous website was no longer functional, creating an opportunity to rebuild the company's digital presence from the ground up.

The client provided the business and product information, while the website's visual direction, content organization, interface design and frontend implementation were left largely to me.

Project Ownership

From supplied information to a complete production website.

Organize

Content + hierarchy

Design

Visual direction + UI

Build

Responsive frontend

Ship

Live website

Project Focus

The challenge was not inventing the product.It was giving the information structure, hierarchy and visual language strong enough to communicate it.

Information Design

Organizing the Message

Structure before decoration.

The website needed to make a specialized offering easier to understand before asking visitors to get in touch.

The client supplied the product and business information. I organized that material into related groups, established the hierarchy between them and designed the page around a clearer progression from introduction to inquiry.

Content Transformation

From supplied information to a page with direction.

Input

Client-Supplied Information

Platform InformationDealership BenefitsSafety + ComplianceProduct FeaturesSupportCompany InformationContact Details

Group

Prioritize

Sequence

Output

Website Hierarchy

Introduce

What is InspectionPal?

Establish Value

Why it matters to dealerships

Explain

How the platform supports the work

Build Confidence

Capabilities + support

Convert

Move toward an inquiry

Homepage Rhythm

Each section had a job to do.

Position

Introduce the platform

Value

Surface the benefits

Explain

Break down the offering

Reassure

Build credibility

Action

Invite the inquiry

Design Decision

Explain first. Ask second.

For a specialized offering, the contact action is more useful after the visitor has enough context to understand what the company provides. The page hierarchy progressively introduces the offering, its value and its capabilities before ending with the inquiry path.

Information Design

I didn't need to become the subject-matter expert.I needed to understand the relationships between the information well enough to give it hierarchy.

Design Evolution

Revisiting the Work

The idea held up. My execution caught up.

About eight months after the original build, I came back to the project with a much stronger design eye.

The website still worked structurally, but the visual execution no longer reflected the standard I was capable of producing. I chose to redesign it without discarding the parts that were already doing their job.

Homepage Evolution

Same purpose. Stronger visual judgement.

The redesign focused less on restructuring the site and more on refining hierarchy, colour, spacing, consistency and overall visual confidence.

Version 01Original Design

Earlier Work

What held up

The overall content structure and many of the original ideas remained useful enough to carry forward.

Version 02Current Design

Refined Work

What changed

The visual system became more restrained, intentional and consistent while preserving the core purpose of the page.

What Stayed

Good decisions did not need replacing.

Structure

The general information hierarchy continued to support the page.

Purpose

The site still needed to explain the offering and support inquiries.

Content Grouping

Related information remained organized into distinct, scannable sections.

What Changed

The execution became more deliberate.

Colour

The palette became more cohesive, using greens derived from the logo alongside complementary blue and neutral tones.

Hierarchy

Stronger contrast and clearer visual pacing improved how the page directs attention.

Spacing + Consistency

Layout rhythm, component spacing and repeated visual patterns became more controlled across the website.

Second Comparison

The redesign extended beyond the homepage.

The same visual refinement carried into the contact experience, helping the site feel like one cohesive system rather than a collection of independently styled pages.

Before

Original Contact Page

Original InspectionPal contact page design

→

After

Current Contact Page

Current InspectionPal contact page design

Months Later

The redesign wasn't about replacing the concept.It was about bringing the execution up to the level of the idea.

Design Maturity

Revisiting earlier work is part of the process.Being able to recognize what still works, what no longer does and where better judgement can improve the result is just as valuable as designing something new.

Visual System + Frontend Craft

Building the Language

One identity, repeated with intention.

The logo provided the starting point. The rest of the interface needed a visual system capable of carrying that identity across an entire website.

I expanded the existing green into a broader palette, introduced complementary blue and neutral tones, and used repeated card, icon and spacing patterns to create consistency across pages.

01 / Colour

Start with the logo. Build outward.

PrimaryDeep Green

Brand foundation

SecondaryGreen

Brand continuity

SupportLight Green

Sections + accents

ContrastBlue

Complementary depth

FoundationNeutral Grey

Structure + balance

The exact palette grew from the logo rather than introducing an unrelated visual identity.

02 / Interface Language

Familiar patterns, consistent treatment.

Repeated patterns help visitors move through a content-heavy website without relearning how each section works.

✓

Icon Anchors

Simple icons give feature-heavy sections quick visual anchors and reinforce the practical character of the brand.

Card Patterns

Reusable card treatments create consistency across benefits, services and supporting information.

Clear Hierarchy

Scale, spacing and contrast separate major messages from supporting detail.

Consistent Rhythm

Repeated spacing patterns help long pages feel intentional rather than endlessly stacked.

03 / Interaction

Enough movement to feel alive. Not enough to get in the way.

Feature

✓

Dealership Support

Repeated interface elements use subtle hover movement to make interactive content feel responsive.

Learn more →

↑

Subtle lift on hover

The interface does not rely on animation to communicate meaning.

Small hover transitions, including a slight lift on cards, add responsiveness without distracting from the site's primary job: communicating information clearly.

Interaction PrincipleMovement supports the interface.

It does not become the interface.

04 / Responsive Behaviour

Same system. Different space.

Desktop

Expanded composition

→

Mobile

Compressed hierarchy

Responsive behaviour preserves the visual hierarchy while allowing multi-column layouts, cards and supporting content to reorganize for smaller screens.

The goal is consistency of experience, not identical composition.

Design + Frontend

The visual system became part of the implementation.

Repeated colours, spacing, cards, icon treatments and interaction patterns were implemented as reusable frontend patterns, making it easier to extend the website without redesigning its visual language each time a new page was added.

Website Expansion

Growing the Website

The system held as the site grew.

The website continued to expand after the redesign.

New training and product pages were introduced alongside the existing homepage and contact experience, extending the site without requiring a new visual direction each time functionality or content was added.

Current Site

Different destinations. One visual language.

Training

External Pathway

Connect visitors with training.

The training page gives the offering its own place within the website while directing visitors toward the appropriate training destination.

Products

External Pathway

Extend the product offering.

The products page creates a clear path from the main InspectionPal website into the related product offering while maintaining the site's established visual language.

Contact

Inquiry Pathway

Bring the journey to an action.

The contact experience supports the site's primary business goal by giving interested dealerships a clear place to continue the conversation.

System Continuity

New content didn't mean new design rules.

Shared hierarchy

Page headings, supporting copy and calls to action follow the same visual relationships throughout the website.

Reusable patterns

Existing cards, spacing, icon treatments and section structures provide building blocks for additional pages.

Consistent navigation

New destinations could be introduced within the existing site architecture without changing how visitors move through it.

Website Growth

Same foundation, broader reach

Core Website

Explain + establish credibility

Training

Connect to learning resources

Products

Extend the offering

Contact

Support inquiry

Design + Development

A useful design system does more than make the first version consistent.It gives the next page somewhere to belong.

Project Wrap-Up

Reflection

Growth became part of the work.

InspectionPal became a project I could revisit with sharper judgement rather than simply move on from.

The redesign gave me the opportunity to preserve the ideas that continued to work, refine the parts that no longer reflected my abilities and extend the finished system into new pages without losing cohesion.

Information Design

Give complex content hierarchy.

Organizing supplied information into clear groups and page progression made a specialized offering easier to navigate.

Design Evolution

Keep the idea. Improve the execution.

Revisiting the original work showed that refinement does not always require rebuilding the underlying concept.

Frontend Craft

Build patterns that can continue.

A repeatable visual language made it easier to introduce new pages while keeping the website cohesive.

What this project represents

InspectionPal reflects a different part of how I work:organizing unfamiliar information, defining a visual direction, building it into a responsive website and being willing to revisit my own work when I know I can make it stronger.

Want to see more?

Explore the broader InspectionPal project.

View on VRB

Next Project

03 / 03

VRBWeb Design and Development

A book keeping and business operations platform designed to track invoices, payments, expenses and client services with a clear user experience.