Del for TV-aksjonen
En delingsside og administrasjonsløsning som gjør det enkelt å spre budskapet til NRK TV-aksjonen på sosiale medier
- Rolle
- UX-designer, Computas
- Varighet
- Juni – Juli 2024
- Team
- 1 UX-designer, 4 utviklere
- Ansvarsområder
- Workshops, brukertesting, wireframing og prototyping
Bilder og informasjon om TV-aksjonen blir sendt manuelt til fylker, skoler og organisasjoner, men privatpersoner har ingen enkel måte å dele budskapet på.
Som eneste UX-designer i et team med fire utviklere fra Computas designet jeg Del for TV-aksjonen. Løsningen er en mobile first-nettside der alle kan laste ned bilder i riktig format og dele dem i sosiale medier, og en administratorside der NRK TV-aksjonen styrer innholdet selv.
01
Resultat
Del for TV-aksjonen ble satt i produksjon og er i bruk. Privatpersoner laster ned bilder i formatet de trenger og deler dem i sosiale medier, mens administrasjonen styrer innholdet fra admin-siden.
'%3e%3cpath%20id='Vector'%20d='M1.76994%207.08135H0.884777C0.395912%207.08135%20-0.000390625%207.47765%20-0.000390625%207.96651V9.73685C-0.000390625%2010.2257%200.395912%2010.622%200.884777%2010.622H1.76994C2.25881%2010.622%202.65511%2010.2257%202.65511%209.73685V7.96651C2.65511%207.47765%202.25881%207.08135%201.76994%207.08135Z'%20fill='black'/%3e%3cpath%20id='Vector_2'%20d='M6.19501%205.31084H5.30984C4.82098%205.31084%204.42467%205.70714%204.42467%206.19601V9.73668C4.42467%2010.2255%204.82098%2010.6218%205.30984%2010.6218H6.19501C6.68387%2010.6218%207.08018%2010.2255%207.08018%209.73668V6.19601C7.08018%205.70714%206.68387%205.31084%206.19501%205.31084Z'%20fill='black'/%3e%3cpath%20id='Vector_3'%20d='M10.6225%202.65568H9.73732C9.24845%202.65568%208.85215%203.05198%208.85215%203.54085V9.73702C8.85215%2010.2259%209.24845%2010.6222%209.73732%2010.6222H10.6225C11.1113%2010.6222%2011.5077%2010.2259%2011.5077%209.73702V3.54085C11.5077%203.05198%2011.1113%202.65568%2010.6225%202.65568Z'%20fill='black'/%3e%3cpath%20id='Vector_4'%20d='M15.0475%20-8.13802e-05H14.1624C13.6735%20-8.13802e-05%2013.2772%200.396222%2013.2772%200.885086V9.73676C13.2772%2010.2256%2013.6735%2010.6219%2014.1624%2010.6219H15.0475C15.5364%2010.6219%2015.9327%2010.2256%2015.9327%209.73676V0.885086C15.9327%200.396222%2015.5364%20-8.13802e-05%2015.0475%20-8.13802e-05Z'%20fill='black'/%3e%3cpath%20id='Vector_5'%20d='M26.5548%202.8325C28.1581%201.46112%2030.1986%200.70752%2032.3084%200.70752C34.4182%200.70752%2036.4587%201.46112%2038.062%202.8325L36.9113%204.07174C35.6286%202.97463%2033.9963%202.37175%2032.3084%202.37175C30.6205%202.37175%2028.9882%202.97463%2027.7055%204.07174L26.5548%202.8325ZM28.8563%205.31097C29.8182%204.48814%2031.0425%204.03598%2032.3084%204.03598C33.5743%204.03598%2034.7986%204.48814%2035.7606%205.31097L34.6098%206.55021C33.9685%206.00165%2033.1523%205.70021%2032.3084%205.70021C31.4645%205.70021%2030.6483%206.00165%2030.007%206.55021L28.8563%205.31097ZM31.1577%207.78944C31.4784%207.51516%2031.8864%207.36444%2032.3084%207.36444C32.7304%207.36444%2033.1385%207.51516%2033.4591%207.78944L32.3084%209.02868L31.1577%207.78944Z'%20fill='black'/%3e%3cpath%20id='Vector_6'%20d='M44.7017%200.442546H56.2088C57.6754%200.442546%2058.8643%201.63145%2058.8643%203.09805V7.52389C58.8643%208.99048%2057.6754%2010.1794%2056.2088%2010.1794H44.7017C43.2351%2010.1794%2042.0462%208.99048%2042.0462%207.52389V3.09805C42.0462%201.63145%2043.2351%200.442546%2044.7017%200.442546Z'%20stroke-width='0.885167'%20stroke='black'%20stroke-opacity='0.4'/%3e%3cpath%20id='Vector_7'%20d='M55.764%202.21305H45.142C44.4087%202.21305%2043.8143%202.80751%2043.8143%203.5408V7.08147C43.8143%207.81477%2044.4087%208.40923%2045.142%208.40923H55.764C56.4973%208.40923%2057.0918%207.81477%2057.0918%207.08147V3.5408C57.0918%202.80751%2056.4973%202.21305%2055.764%202.21305Z'%20fill='black'/%3e%3cpath%20id='Vector_8'%20d='M60.457%203.54033H60.3684C60.0262%203.54033%2059.7488%203.81774%2059.7488%204.15995V6.46139C59.7488%206.80359%2060.0262%207.081%2060.3684%207.081H60.457C60.7992%207.081%2061.0766%206.80359%2061.0766%206.46139V4.15995C61.0766%203.81774%2060.7992%203.54033%2060.457%203.54033Z'%20fill='black'%20fill-opacity='0.4'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_0_13'%3e%3crect%20width='61.9617'%20height='10.622'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=small}
02 Innsikt
Workshops med kunden
Oppgaven var todelt, så jeg valgte to metoder til workshopene med kunden. Med user journey mapping kartla vi dagens prosess, og med crazy 8 fikk vi raske idéer til hvordan delingssiden kunne se ut. Workshopene ga fire tydelige behov som ble grunnlaget for resten av designet.
Fire behov fra workshopene
-
Brukeren
Brukervennlig
-
Brukeren
Informativ
-
Brukeren
Få klikk
-
Administratoren
Intuitiv admin
03 Delingssiden på mobil
Færre klikk, tydeligere formater
Raske skisser for å utforske designvalg
Jeg skisserte flere raske løsninger og laget to lavoppløselige skisser som jeg presenterte for kunden. Tilbakemeldingene pekte mot faner, da formatene ble tydelige og antall klikk holdt seg lavt.
-
Skisse med faner -
Skisse med filtrering
Fra skisse til løsning
Vi testet fane-løsningen internt i flere runder. I den endelige versjonen justerte vi fargebruk og knapper, og byttet ut ikoner med tydelige tekstbeskrivelser slik at flyten ble lettere å forstå.
-
Info-knappen forklarer hva en story er og hvor den kan deles -
Forslag til postetekst som deleren kan kopiere
Brukerreisen på mobil
Brukeren vil ha mulighet til å laste ned bilder og videoer i enten en story- eller innleggformat. For innlegg er det forslag til bildetekst.
-
01 Åpne nettsiden
-
02 Velg format og last ned
-
03 Takk for at du deler
-
Bildet deles
Som story eller innlegg på Instagram, Facebook, Snapchat, TikTok eller X.
04 Del på sosiale medier
04 Admin-siden
En løsning for flere admin-brukere
Admin-siden skulle brukes av flere administratorer med ulik teknisk kompetanse, og vi valgte derfor en løsning med faste maler. Redaksjonen redigerer innhold i enkle tekstbokser direkte på siden uten å endre oppsettet, slik at administratorene med en gang kan se hvordan endringene blir på nettsiden. Markedsansvarlig i TV-aksjonen ønsket også å kunne bytte mellom bilder, så vi la til arkivering slik at bilder kan hentes frem igjen.
-
Iterasjon 1
Lo-fi skisse
-
Iterasjon 2
Lik nettsiden
-
Iterasjon 3
Ferdig versjon
Slik styrer redaksjonen kampanjen
Fra innlogging til redigering, arkivering og sletting av bilder. Før et bilde arkiveres, gjenopprettes eller slettes, ber siden om en bekreftelse.
-
01 Opprett kampanje -
02 Oversikt over aktiv kampanje -
03 Rediger innhold -
04 Arkiver bilde -
05 Gjenopprett bilde -
06 Slett bilde
05 Refleksjoner
Jeg har lært å...
Å finne min rolle som designer
Fra å jobbe med flere designere til å være eneste designer i et team var en læringskurve. Jeg lærte hvor viktig det er å avklare forventninger tidlig, og samarbeidet med TV-aksjonen og utviklerne ga meg nye perspektiver på hvordan en løsning henger sammen fra start til slutt.
Inkludere kunde og team
Dette var mitt første prosjekt med en ekstern kunde. Ved å jobbe smidig og dele fremdrift jevnlig med teamet og NRK TV-aksjonen fikk både kunden og teamet trygghet på hverandres arbeid.
