Rotary Norge · Nytt rotary.no
Rotary Norge: nytt rotary.no
Kort oppsummert
Utfordring: Rotary Norge slet med et utdatert nettsted, synkende medlemstall og manglende visuell og redaksjonell styring på tvers av rundt 260 klubbsider.
Løsning: Et skalerbart designsystem i Figma og en klikkbar prototype i kode, bygget med kunstig intelligens (Cursor, Claude, ChatGPT) på kun 60 timer innenfor et lite budsjett.
Kunderespons: «Dette var gøy å se. Her har du virkelig stått på Sona.»
Rask prototyping med kunstig intelligens: Fra konsept til en fungerende, interaktiv prototype i kode på 60 timer.
Effektivt designsystem: Et solid fundament i Figma først gjorde det enkelt å skalere opp og spesifisere 22 fleksible Umbraco-komponenter sammen med utviklerne.
Styring og merkevarekontroll: Utfordringen med 260 uavhengige klubbredaktører ble løst med stramme rammer som sikrer én felles identitet.
Utfordringen
- Utdatert profil og fallende medlemstall: Rotary Norge opplevde synkende medlemstall over flere år, og den eksisterende nettsiden fremsto utdatert og lite tiltrekkende for nye målgrupper.
- Manglende struktur og merkevarekontroll: Rundt 260 klubbredaktører publiserte innhold helt uten felles retningslinjer. Dette førte til ulik visuell oppførsel, variert språktone og mulig forvirring hos brukerne når de navigerte mellom ulike klubbsider.
- Nasjonal styring på lite budsjett: Nasjonale redaktører manglet verktøy for å håndheve Rotarys globale merkevareretningslinjer. Målet var å skape en ensartet opplevelse på tvers av landet innenfor et stramt budsjett.
Menystruktur: pragmatisk og fleksibel opprigging
Det ble ikke gjennomført et eget innsiktsarbeid i denne fasen. Oppgaven handlet derfor om å legge til rette for en fleksibel struktur som kunden selv kan teste og tilpasse over tid:
- Enkel anbefaling framfor overkomplisering: Vi anbefalte å holde menyen ren og ukomplisert i første omgang, fordi det var for tidlig å vite nøyaktig hva brukerne søker mest etter.
- Anbefalt hovedfokus: Vi foreslo noen nøkkelpunkter for hovedmenyen. «For medlemmer» ble flyttet til bunnteksten, og «Finn en klubb» ble løftet fram som en primær handling på forsiden.
- Redaksjonell frihet til testing: Redaktørene har fått en fleksibel menystruktur der de selv kan justere innholdet og teste hva som fungerer best i praksis, etter hvert som brukerdata samles inn.
Designprosessen: utforskning i Figma og valg av retning
Designarbeidet startet med en utforskende fase i Figma, basert på kundens ønsker og Rotary Internationals faste merkevareretningslinjer og farger:
- To visuelle retninger: Jeg utarbeidet to ulike stiler i Figma, én varm og én kald retning.
- Tidlig avklaring: Begge ble presentert for kunden, som falt for den varme fargepaletten.
- Låst visuelt fundament: Med den varme retningen valgt lå det visuelle fundamentet fast før vi gikk videre til oppbygging av enkeltsider og komponenter.
Prototyping og kodebygging med kunstig intelligens
For å holde framdriften oppe på det lave budsjettet tok jeg i bruk en arbeidsflyt drevet av kunstig intelligens:
- Sømløst verktøysamspill: Jeg kombinerte Cursor, Claude og ChatGPT til idéutvikling, arkitektur, oppsett av instrukser, bildeanalyse og koding av prototypen.
- Levende prototype: I stedet for å bruke tid på statiske Figma-skisser for alle sidetyper, ble det bygget en fungerende prototype i kode der både kunden og teamet kunne klikke seg rundt.
Gevinst: Med denne arbeidsmetoden var hele designleveransen ferdigstilt på kun 60 timer.
Designsystem og komponenter: skalering og teknisk spesifikasjon
- Rask skalering via designsystemet: Ved å starte med et grunnleggende designsystem ble det svært effektivt å bygge ut nye sider og utlede nye komponenter basert på de grunnleggende elementene.
- Forankring og nedbrytning: Så snart kunden hadde godkjent prototypen, satte vi oss ned med utviklerne for å bryte ned løsningen og definere de faktiske Umbraco-komponentene.
- 22 definerte komponenter: Vi endte opp med totalt 22 standardiserte komponenter, der vi definerte nøyaktige innstillinger og parametere for hver enkelt. Dette sikrer at de 260 klubbsidene får nødvendig fleksibilitet, samtidig som merkevaren holdes stram og enhetlig.
Resultat og læring
- Effektiv leveranse: Designet var ferdigstilt på 60 timer.
- Tilbakemelding fra kunden:
«Dette var gøy å se. Her har du virkelig stått på Sona.»
- Funksjonell klarhet: Den interaktive prototypen gjorde det betydelig enklere for både kunden og utviklerne å forstå de små, viktige detaljene rundt funksjonaliteten, og hva brukerne vil møte på det ferdige nettstedet.
Hva jeg tok med meg videre
- Prototyping i kode gir dypere funksjonell forståelse: Å la kunden og utviklerne klikke seg gjennom en levende prototype fjernet usikkerhet om samhandlingsmønstre og detaljer langt bedre enn statiske skisser ville gjort.
- Kode fra kunstig intelligens krever rammeverk for gjenbruk: Verktøyene leverer kode som fungerer utmerket for å demonstrere brukeropplevelsen, men koden blir ofte for kompleks for direkte bruk i produksjon. Skal utviklerne gjenbruke prototypekoden neste gang, bør det settes opp felles regler for koden i prosjektet fra dag én.