M2TOIT: Brand Identity and Conversion Landing Page

For a roofing company, trust is earned before the first interaction. When a homeowner discovers a leak, displaced tiles, or moss growing on their roof, they look for a professional who is serious, responsive, and reassuring. The entire challenge of this project lay in translating that seriousness into a brand and a webpage capable of transforming a concern into a quote request.

M2TOIT is a roofing company with 20 years of experience, specializing in moss removal, cleaning, repair, and renovation of roofs. They operate across Vienne, Indre-et-Loire, and Deux-Sèvres, throughout Nouvelle-Aquitaine. At launch, the company had no existing brand image: no visual identity, no website, no digital presence. I took charge of the project from start to finish, from brand strategy to launching a landing page designed for a Google Ads campaign.

‍

The Challenge: Inspire Trust and Generate Quotes

From the outset, three priorities emerged:

1. Establish credibility for a company still invisible online

Without a brand or website, M2TOIT had no way to reassure a prospect before a call. It needed an image that matched its expertise, one that was immediately professional.

2. Convert paid traffic into qualified leads

The page needed to be designed for a visitor coming from Google Ads: someone with strong intent, little patience, and a quick decision to make.‍

3. Build a scalable brand foundation

The identity and design system needed to be extensible to a full website later, without starting from scratch.

‍

‍

‍

Building the Brand from Scratch

Before touching the page design, I created the entire brand identity, starting with the logo. I designed a geometric monogram inspired by the shape of a roof, punctuated with a yellow accent, paired with the name "M2TOIT" in a strong and legible typeface. The logo was built to stay recognizable everywhere: on light or dark backgrounds, from a favicon to utility vehicle branding, business cards, and administrative documents. A tagline anchors the positioning: "Expertise that measures up."

‍

An Art Direction Focused on Conversion

Every visual choice was made with a simple goal: inspire trust and guide users toward action. The palette is built on a deep navy blue, conveying seriousness and reliability, two qualities that matter when a homeowner is entrusting their roof to a tradesperson. A bright yellow brings it to life, used exclusively as a signal color: it draws the eye to buttons, badges, and key points, without ever dominating the layout.

Bold, all-caps Montserrat gives titles an assertive and direct tone, balanced by Inter for body text, which is softer and more comfortable to read. The full system was formalized in a comprehensive brand guide (logo, colors, typography, usage rules), ensuring perfect consistency across every medium, online and offline.

‍

‍

Designing a Persuasive Landing Page

The design process followed a structured approach: zoning, wireframing, then high-fidelity design in Figma. I didn't treat the page as a simple showcase, but as a persuasive journey where each section addresses a specific stage in the visitor's decision-making process.

The hero section immediately addresses the roofing problem and offers an instant call to action: request a quote or call. This is followed by a "causes" section that names the situations visitors actually experience (moss, grime, damaged tiles, leaks), building recognition before presenting the services. The before-and-after visual makes the result tangible, the company block with its 20 years of experience builds legitimacy, and customer testimonials lock in trust just before the decision point.

‍

Developing on Webflow

The design was fully developed on Webflow, delivering a responsive, fast, and easily maintainable page. Particular attention was paid to mobile, where the majority of local ad traffic lands. The quote request form was implemented with all the essential fields (first name, last name, phone, postal code, message) and GDPR consent, capturing leads without friction while staying compliant.

‍

‍

Optimizing for Google Ads Traffic

The entire page was built around a single objective: getting a quote. The form sits at the top of the page to immediately capture the warmest visitors from ads, and the calls to action ("Request a Quote" and "Call") repeat at every scroll stage to keep the user focused on conversion. In parallel, reassurance cues (free quote, no commitment, personalized diagnosis, fast response, 20 years of experience) address decision barriers one by one.

‍

The Result

A consistent, professional, and entirely conversion-focused landing page, backed by a custom brand identity and launched to support a Google Ads acquisition campaign. In a single project, M2TOIT went from zero digital presence to a lead generation tool ready to deliver qualified quote requests.

‍

‍

What's Next

The full website is currently in development, covering all pages (detailed services, about, service areas, contact), building directly on the visual identity and design system established with this first landing page.