Indhold og visuel kommunikation for Odense Renovation | MMD Modul 4 – Digitalt indhold

Modul 4 digitalt indhold var en opgave der dækkede over at udvikle indhold og visuel kommunikation på baggrund af ikke-digitalt materiale.

I modulet blev der udarbejdet:

  • En projektplan
  • Individuelle budskabsdesign opgaver
  • Individuelle forslag til visuel kommunikation
  • Interaktiv prototype (bestående af HTML, CSS og JavaScript)
  • Prototype udviklet i Adobe XD
  • Logbog
  • Informationsgrafik
  • Animeret video
  • Video egnet til Sociale medier
  • SEO optimeret side

Gruppekontrakt

Opgaven blev udviklet i et samarbejde mellem:

  • Max Festersen Hansen
  • Louise Beisner Öberg
  • Anton Storm Wich
  • Lucas Kofoed Lynge
  • Emma Engel
  • Viktor Kongskov

Viktor Kongskov agerede som projektleder.

Interaktiv prototype

Løsningen

Løsningen er en underside for Odense Renovation, der fortæller om hvordan affald skal sorteres i hjemmet jf. den nye affaldsordning.

https://www.maxfest.dk/odense-renovation/private/

https://www.maxfest.dk/odense-renovation/private/hvordan-affald-sorteres-i-odense-komune.html
https://www.maxfest.dk/odense-renovation/private/hvordan-affald-sorteres-i-odense-komune.html

Valg af løsning

Der blev taget udgangspunkt i beskrivelsen for hvordan man skal sortere på Odense Renovations hjemmeside.

I en usability analyse, NUG analyse, SEO analyse og brugertests performede undersiden ikke godt.

  • Brugere havde svært ved at finde siden, både via søgemaskiner og ved at navigere på siden. Deres behov blev ikke dækket af sorteringsguiden alene.
  • De brugere der besøgte siden klagede over at indholdet var mangelfuldt og billeder svære at tyde.
  • I en rundspørgelse og efterfølgende tests fandt vi frem til at brugere ikke fandt den information om plastik sortering de ønskede fra siden.

Forbedringer

  • I prototypen har siden fået mere deskriptiv titel, beskrivelse og billede.
  • SEO optimeret. Siden anvender semantiske tags. Meta tags er forbedret.
  • Ikoner og billeder er nu mere genkendelige.
  • Kontrasten på siden er blevet optimeret til flere brugere (før var noget tekst svært læseligt.
  • Fokuseret design re-implementeret. I den oprindelige side var det blevet fjernet, men nu er det implementeret igen, så brugere kan se hvad der fokuseres på.
  • Billeder har fået tilføjet alt tags.
  • Mere visuelt tiltalende. Ikoner og tekst kan bedre læses. Indhold kan nu tilgåes i en interaktiv oversigt, samt statisk på siden.

Udvikling

Vi startede med at lave en SEO side, for at teste hvordan SEO indhold kunne udvikles til en kampagne side. Dette var også formålet i en workshop gruppen deltog i, under modulet.

I forbindelse med udviklingen af den interaktive prototype, blev der udviklet:

  • lo-fi wireframe
  • Style tile
  • hi-fi wireframe
  • Github side
  • XD prototype
  • Protype med kode

Først relativt sent blev der tegnet en lo-fi prototype. Den blev udviklet på baggrund af indsigter for hvad Odense Renovation manglede. Der var en del uenighed omkring sidens indhold og opsætning, men gruppen blev enige.

Style tyle, hi-fi wireframe og XD prototype blev igangsat samtidigt. Som de enkelte elementer blev færdige, tog de inspiration fra hinanden til det endelige design.

Trello og SCRUM

Max Festersen Hansen agerede som Scrum-master.

Trello board kan ses her.

Scrum metoden blev anvendt lidt løst. Trello boardet har løbende været anvendt til at fordele arbejdsopgaver. Møder blev afholdt siddende, men næsten dagligt.

Opgaverne har været indelt i Design thinkings 5 faser. Discovery, Iterpretation, Ideation, Experimentation og Evolution.

Opgaven har desværre ikke været optimal at faseindele. Der har været meget tid til at arbejde med dataindsamling og formulering. Desværre så var der få øjeblike hvor idéer kunne skabes, og relativt lidt tid brugt på faktisk udvikling i Experimentation og Evolution.

Der er løbende blevet testet. Det har været en stor succes. Vi kunne tilpasse opgavens forløb til de data og indsigter vi løbende har fået skabt os.

Budskabsdesign opgave for Max

Beskrivelsen var særdeles ringe, og nem at misforstå. Rammerne var bredt defineret, hvilket ikke var meningen. Det ledte til meget tvivl omkring hvordan den skulle se ud. Jeg havde misforstået opgaven, men udført den alligevel. Ganske få elever jeg har snakket med havde opgaver der var indenfor de tiltænkte rammer for opgaven.

Eleverne gav hinanden feedback. Det førte til meget selvsigende kommentarer med meget lidt værdi. Ingen lærer har, af hvad jeg ved, set på opgaverne. Det var i mine øjne en meget skuffende oplevelse.

Budskabsdesign er meget essentielt. At kunne forstå andres budskab, og formulere sit eget er en evne enhver designer bør have.

Individuelle forslag til visuel kommunikation af Max

Mine forslag til den visuelle strategi omhandlede social medier.

Moodboard

Odense-renovation-moodboard

Facebook post

facebook-post-eksempel