UX-design
UngKlima, NTNU
UngRedaksjon
Publiseringsplattform for klimaartikler tilpasset ungdom.
Kort om prosjektet
UngRedaksjon er nettsidene og publiseringsplattformen til NTNU-redaksjonene UngEnergi og UngKlima. Målet er å øke ungdommers engasjement og bevissthet rundt fornybar energi, bærekraft og klima. Dette arbeidet vi mot med skolebesøk, foredrag, tekstskriving og sosiale medier.
Jeg arbeidet for UngKlima fra oppstarten sommeren 2021 til november 2023. Mine oppgaver var design av nettside, utvikling (HTML, CSS, JS, PHP), grafisk design, videoproduksjon og å holde foredrag.
Mål: én selvdrevet plattform og god UU.
Bakgrunnen for prosjektet med ny redigeringsløsning var innføringen av tilgjengelighetserklæring UU i offentlig sektor.
I tillegg var det svært krevende for redaktørene å publisere eller redigere innhold. Redaktørene var strengt tatt ansatt i én redaksjon, men arbeidet ofte på tvers av begge systemer. Dette gjorde at man måtte lære to verktøy, og konstant tittet på gamle guider.
Samtidig ønsket vi å vise at redaksjonene har et tett samarbeid gjennom å bruke felles designtrekk.
UngEnergi.no
Innhold fra 2013-2023
Bygget på Wordpress, utdaterte plugins og supplert med egenskrevet kode
Vanskelig for ansatte å redigere innhold
Manglet flere WCAG-krav
Mye funksjonalitet i redigeringen
Separat system for versjonskontroll
Ungklima.no
Egenskrevet kode for redigeringsverktøy i ren HTML, CSS, JS og PHP
Lite innhold (kun artikler fra 2021-2023)
Færre funksjoner i redigeringsverktøyet
Innebygget versjonskontroll
Brukere av offentlig side
Tilfeldige
Finner sidene gjennom søk relatert til fornybar energi eller bærekraft. UngEnergi dukker f.eks opp som lenket side på SNL-artikler eller NDLA.no.
Overiskt over kategoriene på ungenergis nettsider
Bilde fra en av rundene med kortsortering
Informasjonshierarki
Felles identitet
For å skape et felles uttrykk mellom sidene, og gjøre utvikling enklere valgte vi å kun skille sidene ved bruk av farge og illustrasjoner.
Hovedsidene til begge redaksjoner består i hovedsak av tre "nivåer": Landingssiden, sider for de ulike temaene, og artikler. I tillegg kommer sider for "om oss" og booking av foredrag.
Skisser for forside, én kategori og artikkel
For å gjøre det enkelt for gruppa utvikle siden, lagde vi en detaljert nok Figma-prototype til at vi kunne starte utvikling parallellt. Vi var likevel åpne for endringer dersom det viste seg å gjøre koden enklere.
Hensyn til enkel kode var spesielt viktig, da alt skulle skrives i standard HTML, CSS, JS og PHP. Vi trengte nemlig at en enkelt skal kunne forstå koden selv med begrenset kunnskap, siden redaksjonene utelukkende ansetter VGS-elever og studenter i tidlig studieløp.
Designsystem
Etter å ha valgt overordnet stil for nettstedene, dannet vi oss et bilde av hvilke komponenter innholdet krevde for å implementeres.
Fra før hadde vi etablert en enkel grafisk profil med skrifter og farger. Vi tok derfor utgangpunkt i denne, og justerte fargene til å oppfylle nødvendige kontrastforhold.
Redigering av redigeringen
Målet med redingeringsløsningen var å minimere behovet for fremtidig koding og separate verktøy. Vi valgte derfor å jobbe med å gjøre nettstedet tilpassbart fra adminpanelet.
Ansattsiden
Ansattsiden samlet alle funksjonene som tidligere hadde vært spredt rundt om i wordpress-grensesnittet hos Ungenergi. Her finner man alt fra tekstoversikt, versjonslogger, brukere, og bildebank. Hadde man status som "utvikler" kunne man også oppdatere siden fra UTV-miljøet via ansattsiden.
Kategorier
Egen side for å opprette og endre kategoriene tekster kunne deles inn i.
Redigering I
Teksteditor med tips til skriving, versjonsvelger, og verktøylinje med plugins vi selv hadde skrevet.
Redigeing II
Etter å ha skrevet en tekst kunne redaktøren enkelt plassere den i en kategori og angi nødvendig info om forfatter.
Synlighet
Vi implementerte også to sider hvo man kunne velge hvlike kategorier som var synlige på artikkel-siden og forsiden uten å endre koden.