Case study · 2026
Connecta: en terapinettside, bygget på nytt fra bunnen.
Connecta tilbyr terapi og veiledning på nett. Den gamle WordPress-siden var informativ, men treg, tung å lese og litt anonym. Jeg gikk bort fra WordPress og bygde en rask, moderne nettapp med et rolig «mykt klinisk» uttrykk: samme innhold, men løftet design, tilgjengelighet og ytelse. Dra i glidebryterne under for å se forskjellen.
Utfordringen
Mye god informasjon, men tungt å ta inn
Den opprinnelige siden var en aldrende WordPress-løsning som lente seg på lange tekstavsnitt, generiske bilder og en flat, blå fargepalett. Viktig informasjon som priser, tjenester og hvem terapeutene er lå begravd i tette tekstblokker uten tydelig hierarki. For en besøkende i en sårbar situasjon ble det vanskelig å finne svar raskt, og siden skilte seg lite fra andre i bransjen.
Tilnærmingen
Slik gikk jeg fram
Innholdet først
Jeg gikk gjennom alt innholdet, samlet det som hørte sammen og kuttet det som ikke trengtes, før jeg begynte på designet.
Mindre biter
Lange avsnitt ble brutt ned i korte, nummererte steg, kort og oversikter som er lette å skanne.
Et helhetlig uttrykk
En varm og rolig fargepalett, tydelige overskrifter og gjennomgående komponenter gir siden ett sammenhengende språk fra forside til kontakt.
Førsteinntrykket
En roligere, tydeligere forside
Forsiden gikk fra et mørkt stockbilde med tekst oppå til en lys, rolig inngang. Tre korte trygghetspunkter og en tydelig «Bestill time» gjør det klart hva siden tilbyr og hva du gjør videre.
Lesbarhet
Tette tekstseksjoner ble lesbare biter
Tjenestebeskrivelsene var én lang tekstvegg. Nå er de delt i nummererte seksjoner med luft rundt, så du finner det som gjelder deg uten å lese alt.
Behandlingsprosessen lå som et tett avsnitt med fargede punkter. Den er nå fire tydelige steg i hvert sitt kort, så det blir lett å se hva du kan forvente.
Struktur
Informasjon som er lett å skanne
Terapeutene ble presentert som avkuttede tekstkolonner. Nå har hver terapeut et profilkort med bilde, fagfelt som merkelapper og kontaktinfo samlet på ett sted.
Prisene lå som punktlister som var vanskelige å sammenligne. De er nå ryddige priskort med tydelige beløp og «Spar»-merking på pakkene.
Kontakt
Fra kontaktskjema til konvertering
Kontaktsiden var et nakent skjema midt på en blå flate. Nå står skjemaet sammen med åpningstider og kontaktinfo, så terskelen for å ta kontakt er lavere.
Designspråket
Ett uttrykk fra forside til kontakt
Det nye uttrykket er «mykt klinisk»: en rolig palett i blått, teal og salvie med en gyllen aksent som går igjen på knapper og detaljer. Overskrifter i Lora (serif) gir et trygt, personlig preg, mens Raleway (sans-serif) holder brødteksten lett å lese, og korte tekster i god lesebredde holder fokus. Alt er bygget av de samme komponentene, kort, merkelapper og knapper, så siden føles som én helhet.
Teknologi
Bygget fra bunnen, ikke på en mal
I stedet for å lappe på den gamle WordPress-siden bygde jeg en helt ny, rask nettapp. Her er verktøykassa bak.
Kjerne
- React 19.2 + TypeScript Komponentdrevet UI med full typesikkerhet.
- Vite 8 Byggeverktøy og utviklingsserver med umiddelbar HMR.
- React Router 7 Klientside-ruting for en flersides følelse uten full lasting.
- Tailwind CSS 3.4 Verktøydrevet styling basert utelukkende på egne design-tokens.
UI og interaksjon
- Framer Motion 12 Sideoverganger, scroll-animasjoner og mikrointeraksjoner som respekterer redusert bevegelse.
- Lucide React Lett og konsistent SVG-ikonsett.
Verktøy og kvalitet
- ESLint 10 + typescript-eslint Linting og kodekonsistens på tvers av prosjektet.
- sharp Bildeprosessering ved bygg (delingsbilde og logo-rasterisering).
Hosting
- Netlify Statisk hosting med CI/CD, Netlify Forms, SPA-omdirigering og sikkerhetshoder.
Arkitektur
Prinsippene bak koden
Én kilde til sannhet
All tekst, overskrifter, priser, FAQ, omtaler og kontaktinfo ligger i én typet datafil. Komponenter hardkoder aldri tekst, så innholdsendringer rører aldri markup.
DRY-komponentsystem
Gjenbrukbare byggeklosser (hero, seksjoner, reveal, CTA, karusell, faner, trekkspill) setter sammen hver side. Dukket markup opp to ganger, ble det en komponent.
Design-tokens, ikke tilfeldige verdier
Et eget Tailwind-tema definerer hele det visuelle språket. Komponenter refererer tokens som «clinic.blue» og «font-heading», ikke rå hex-verdier.
Mobil først og fullt responsiv
Bygget fra minste skjerm og opp, testet ned til 375px uten horisontal scroll, med 16px+ brødtekst og touch-mål på minst 44×44px.
Høydepunkter
Det som gjør siden solid
Tilgjengelighet (WCAG)
Full tastaturnavigasjon, fokusfanget mobilmeny med Escape og fokus-retur, synlige fokusmarkører, ARIA-roller, ekte skjemaetiketter, «hopp til innhold», sveip + tastatur på karusell og faner, og kontrastsjekkede farger (AA).
Ytelse
Kodedeling per rute med lazy loading og Suspense (hver side sitt eget bundle), animasjoner kun på transform og opacity, og lang cache på hashede filer.
SEO
Tittel, meta og canonical per rute, Open Graph- og Twitter-kort med generert delingsbilde, JSON-LD strukturerte data (MedicalBusiness), samt robots.txt og sitemap.xml.
Robusthet
React error boundary, egne lastetilstander med merkevare, en egen 404-side og SPA-fallback, så dype lenker aldri knekker.
Ekte kontaktskjema
Koblet til Netlify Forms med statisk skjemadeteksjon og honeypot mot spam, klientsidevalidering, tilgjengelige feil- og suksess-tilstander og telefon, SMS og e-post som alternativ.
Personvern og sikkerhet
Utkast til norsk personvernerklæring og sikkerhetshoder (blant annet CSP) konfigurert på hosting-nivå.
Prosess
Fra stillas til lansering
Arbeidet fulgte en tydelig progresjon: stillas, innholdsmodell, felles layout og bevegelsessystem, sider, responsiv gjennomgang, DRY-refaktorering, tilgjengelighetspass og produksjonsherding (SEO, sikkerhet, feil- og lastetilstander), før lanseringsforberedelse med skjema, personvern og deploy. Alt ble committet i små, beskrivende commits, og repoet har egen CLAUDE.md og STYLE_GUIDE.md, så designspråket holder seg konsistent over tid.
Resultatet
Enklere å bruke, raskere å forstå
Resultatet er en nettside som er enklere å bruke, raskere å forstå og som ser profesjonell og imøtekommende ut. Innholdet er det samme, men nå er det organisert slik at besøkende finner svar med en gang, og Connecta fremstår like gjennomtenkt som tilbudet deres.
Lignende prosjekt?
Har du en nettside som fortjener et løft?
Enten det er en full omstart eller en opprydding av struktur og innhold, hjelper jeg deg gjerne. Ta kontakt for en uforpliktende prat.