Dreamify fick uppdraget att skapa en modern hemsida till en ny bilhandlare i Göteborg – Karmauto. Resultatet blev en snabb, konverteringsvänlig och effektiv webbsida skapad i Payload CMS och Next.js.
Ny hemsida till bilhandlare
Karmauto är en auktoriserad bilhandlare i Göteborg för Hyundai och Mazda samt en etablerad aktör inom begagnade fordon. Målet med projektet var att skapa en blixtsnabb, modern och fullständigt automatiserad webbplats som förenklar kundresan från första besök till bokat möte, samtidigt som den administrativa bördan minimeras genom smarta integrationer. Resultatet är en skräddarsydd webblösning som kombinerar elegant design med en kraftfull backend-arkitektur.
Design & Gränssnitt (UI/UX)
När man bygger en hemsida till en bilhandlare är fokus ofta på ett ”mobile-first”-tänk, vilket säkerställer en kompromisslös användarupplevelse oavsett om besökaren använder en smartphone, surfplatta eller dator. Så var även fallet med denna sajt. Med hjälp av Tailwind CSS har vi skapat ett skräddarsytt, stilrent och responsivt gränssnitt med optimerade media-queries. Layouten är uppbyggd kring fem primära sidtyper:
- Startsida: En välkomnande landningssida som lyfter fram aktuella kampanjer, erbjudanden och snabblänkar.
- Bilannonslista: En intuitiv och filtrerbar översikt över hela fordonsparken som finns i lager.
- Objektsida för bilannons: En konverteringsoptimerad och detaljerad informationssida för varje specifikt fordon med specifikationer och högupplösta bilder.
- Kontaktsida: En lättillgänglig sida med kontaktuppgifter, öppettider och ett integrerat kontaktformulär.
- Integritetspolicy: En dedikerad sida för GDPR-efterlevnad och datatransparens.
Headless Backend med Payload CMS & MongoDB
För att ge företaget maximal flexibilitet och full kontroll över sitt innehåll utan att tumma på prestandan, valde vi att bygga webbplatsen på en modern headless-arkitektur. Vi implementerade Payload CMS kopplat till en robust MongoDB-databas.
- Uppsättning av collections: Vi strukturerade databasen med skräddarsydda collections för media, pages och bilar inklusive all tillhörande metadata.
- Säkerhet & Validering: Admin-panelen har försetts med strikt autentisering och access control för att skydda känslig data. Kontaktsidan har ett säkert formulär med avancerad form validation både på klient- och serversidan för att säkerställa korrekt datainmatning och minimera spam.
Automatiserad XML-Import & Datahantering
Den tekniska kärnan i projektet är den helautomatiska hanteringen av fordon. Vi utvecklade en anpassad importmodul som via Payload API läser in externa XML-filer. Denna modul mappar automatiskt bilarnas data till rätt fält i databasens cars-collection. Systemet hanterar även bilddata på ett intelligent sätt; fordonens bilder laddas upp, optimeras och kopplas sömlöst till rätt bilannons helt utan manuell handpåläggning från Karmautos personal.
Infrastruktur, CI/CD & SEO
För en modern och avbrottsfri leverans har vi satt upp separata, speglade miljöer för utveckling (Dev) och produktion (Prod). Versionshantering sker via GitHub, och kodbasen distribueras automatiskt genom ett kontinuerligt CI/CD-flöde till Vercel. Detta garanterar extremt korta laddningstider och högsta möjliga driftsäkerhet via globalt CDN.
För att maximera synligheten på sökmotorer implementerades SEO-inställningar i kombination med automatiserad SEO-meta och schema-markup. När en ny bil importeras genererar systemet automatiskt unika, sökordsoptimerade titlar och metabeskrivningar, vilket ger Karmauto bästa möjliga förutsättningar att ranka högt på Google och i AI-söktjänster (ChatGPT, Google AI Overviews osv).