Executive Summary
In premium automotive, the first impression rarely happens in the showroom anymore. It happens on a phone, in a few seconds, long before a customer walks through the door. If the website doesn't feel as polished as the cars, the conversation is over before it starts.
MTK Auto is a premium automotive brand known for its curated, high-end vehicles and a distinctive black-and-white showroom identity. They needed a digital experience that matched that standard, let customers shop MTK Auto products online, and turned visitors into booked appointments and premium members.
Gunpowder Innovations designed and developed MTK Auto's new website in Framer with a fully integrated Shopify store, covering strategy, UX/UI design, development, e-commerce integration and launch.
Client: MTK Auto
Industry: Automotive, E-commerce, Premium Services
Platform: Responsive website and online store
Engagement: Strategy, design, development, e-commerce and launch
Stack: Figma, Framer, Shopify, Cal.com
Timeline: 2–3 months
The Business Context
MTK Auto's physical presence already did the talking: a striking storefront, a monochrome showroom floor and a carefully curated line-up of premium vehicles. Online, the brand needed to deliver the same confidence, sell its products directly, and make it effortless for customers to take the next step, whether that was buying online, booking a visit, making an enquiry or joining as a premium member.
The Challenge
Premium positioning. The site had to feel as considered as the vehicles and the showroom.
Two platforms, one experience. Framer's design freedom and Shopify's commerce engine had to feel like a single, seamless site.
Conversion, not just looks. Every page needed a clear path to buying, booking, enquiring or joining.
Frictionless booking. Customers should be able to schedule an appointment in a few taps.
Premium membership onboarding. A dedicated journey for customers signing up to premium services.
Mobile-first performance. Fast, image-rich pages that still load quickly on phones.
Easy to manage. The team needed to update content and products without developers.
Our Role
Brand and audience research
Conversion strategy and information architecture
UX/UI design and design system in Figma
Framer development and CMS setup
Shopify store setup and Framer integration
Cal.com scheduling and form integrations
Performance optimisation, QA and launch
Phase 1: Research & Strategy
We started with MTK Auto's business goals, target audience and premium service positioning. The aim was a high-converting experience that reflected the brand's professionalism, supported online sales, and simplified every customer interaction.
Key focus areas:
Premium automotive brand positioning
An online store that feels native to the brand
Lead generation optimisation
Simplified enquiry workflows
Premium membership onboarding
A responsive, performance-focused experience
Phase 2: Experience Design
The visual direction took its cue directly from the showroom: deep blacks, crisp whites and bold, confident typography that lets the vehicles and products take centre stage. Layouts were built around large, cinematic imagery, with calls to action placed exactly where intent peaks.
Design highlights
Clean, modern monochrome layout that mirrors the showroom
Product pages and shopping flow designed in the same premium style
Mobile-first responsive experience
Simple, predictable navigation
High-conversion call-to-action sections
A scalable design system for future pages
A brand with a face
Premium buyers buy from people they trust. The design gives space to the people behind MTK Auto, so the brand feels personal and approachable rather than corporate.
Phase 3: Development & Integrations
The website was built in Framer for speed, design flexibility and easy content management, with Shopify powering the store behind it.
Framer + Shopify integration
Shopify products, pricing and cart are connected directly into the Framer site, so customers browse and buy within the same premium design. Shopify handles inventory, secure checkout and payments, while Framer delivers the brand experience.
Appointment scheduling
Cal.com is integrated directly into the site, so customers can pick a time and book without leaving the page or waiting for a reply.
Premium membership onboarding
Dedicated premium membership forms guide new members through sign-up in clear, simple steps.
Lead capture
Contact and enquiry forms are placed throughout key pages and optimised for completion on mobile.
CMS-driven content
Framer's CMS handles site content, and Shopify's admin handles products, so the MTK Auto team can update both without touching code.
Performance
Images and pages were optimised for fast load times across devices, keeping the experience smooth even with rich visuals.
Key Features
Framer-powered website: modern, responsive and visually rich
Integrated Shopify store: browse, add to cart and check out within the brand experience
Secure checkout: payments and orders handled by Shopify
Cal.com scheduling: book appointments directly on the site
Premium onboarding: dedicated membership sign-up journey
Contact & lead capture forms: built to convert
Responsive experience: consistent on desktop, tablet and mobile
Easy management: content in Framer CMS, products in Shopify
Phase 4: QA & Launch
Before launch, every journey was tested end to end on desktop, tablet and mobile: product browsing, cart and checkout, booking flows, membership forms, enquiry submissions and page performance. We then handled deployment and a smooth handover to the MTK Auto team.
Outcomes
A new online sales channel through the integrated Shopify store
Improved lead generation with clear calls to action on every key page
Streamlined booking through integrated scheduling
Stronger premium positioning that matches the showroom experience
Optimised performance across all devices
Services Delivered
Research & Conversion Strategy
UX/UI Design & Design System
Framer Development
Shopify Store Setup & Integration
CMS Setup
Scheduling & Form Integrations
Performance Optimisation
QA & Launch
Technology
Design: Figma
Website: Framer with CMS
E-commerce: Shopify
Scheduling: Cal.com
Collaboration: Slack
Conclusion
MTK Auto's showroom makes a statement the moment you walk in. Now its website does too. By pairing a premium, monochrome Framer design with an integrated Shopify store, booking, membership onboarding and lead capture, Gunpowder Innovations delivered a site that looks the part and works hard for the business, turning first impressions into sales, appointments and long-term customers.
