Skip to content
← Back to work

WebsiteDelivered

A first visit to the studio, starting on mobile

A landing page for a Hot Mat Pilates studio in Canning, with classes, linked schedules and direct contact, based on CONTRAST3's brand identity.

Client
MAT Pilates
Year
2026
Role
Web design, Development, Content organisation
Deliverables
Studio landing page, Class catalogue, Weekly schedule, Location and contact
MAT Pilates' Spanish-language landing page with studio photography, purple lighting and the logo over the image

The context

MAT Pilates is a studio in Canning offering mat-based classes and movement in a warm environment. For someone arriving from Instagram, the website needed to answer the questions that come before a first visit: what the studio offers, which classes are available, when they take place and how to get in touch.

The landing page has supported the business since its opening. We organised the public presentation around the studio's confirmed information and a path from initial interest to direct contact.

The scope

We developed a landing page introducing the Hot Mat method, a class catalogue, weekly schedules, a studio gallery, location details and WhatsApp links. VNT designed and developed the complete website. The studio supplied its brandbook, developed by CONTRAST3, as the identity reference.

Turning the identity into an interface

The palette, logos and Neue Montreal typography form the visual system's foundation. We defined their use across headings, body text, buttons and backgrounds, with adjustments for desktop and mobile.

Photography shows the studio and its equipment, while expandable sections let visitors explore information without displaying every detail at once. Motion supports those interactions and respects the device's reduced-motion preference.

Connecting classes and schedules

The catalogue brings together four classes, each with a description, intensity and environment. Each class includes its days and times. Visitors can move from a class to the weekly schedule and from the schedule back to the class details.

The same schedule data supplies both views. Desktop uses a weekly table; mobile uses expandable days. Changing a time does not require updating multiple independent copies of the information.

MAT Pilates' weekly schedule on desktop, with Spanish-language class names organised by day and time
The weekly schedule links back to each class's details. The client interface is in Spanish.
MAT Pilates' Spanish-language landing page on a phone
The mobile experience for discovering the studio and exploring its classes. The client website is in Spanish.

Keeping classes and schedules connected

Classes and schedules have a structured representation on the website. Descriptions and links from the timetable use consistent class names so visitors can connect each class with its times and review its details. That shared structure also supports updates when the schedule changes.

Ending the journey with a conversation

Each class's call to action opens WhatsApp with the selected class name. The gallery, address and directions link complete the journey before visitors make an enquiry.

Arranging the first class continues directly with the studio through that channel. The landing page brings the public information together; bookings and payments are coordinated through the business's own channels.

The result

The first website stage is complete and has been in use since the studio opened. It brings together the public information and lets visitors explore the offer across screen sizes. The management platform considered during discovery was not developed.

The next follow-up will look at enquiries from the landing page and which classes visitors ask about. There are no measured results yet that would allow us to attribute bookings or studio growth to the website.

Technology

Next.js, React, TypeScript, Tailwind CSS, Motion

What does your project need to solve?

Tell us how your business works and what you would like to improve. We can start with a conversation.

Let's talk

Next project

A website to explore the workshop's work See all projects