Opgaven: Redesign af en hjemmeside.

Processen

Til Kick-off skulle vi gå i sammen i gruppen (forudbestemt af underviseren) og her skulle vi udfylde gruppekontrakten for projekt 1, samt aftale nærmere omkring, hvordan vi skulle gribe projektet an.

Projektbeskrivelse samt udfyldt gruppekontrakt:

Rosa havde været i gang med at researche på forskellige hjemmesider allerede dagen før Kick-off, og på baggrund af hendes research valgte vi i fællesskab Næsby Skoles hjemmeside, da vi kunne se at der flere muligheder for at lave forbedringer på den.

Jeg havde lavet en oversigt over designprocessen for at give os et overblik over de ting vi skulle igennem:

Vi aftale at vi skulle mødes 2-3 gange fysisk på skolen og resten af tiden mødes online. Vi var meget enige om at arbejde intensivt fra starten af, ligesom vi aftalte at have deadline torsdag, dagen før endelig aflevering, bare for en sikkerhedsskyld i.f.t. om der kunne være problemer med f.eks. print, programmer, internet.

Så vi gik i gang med en brainstorm i.f.t. hvad der kunne forbedres på hjemmesiden i håb om at det også var det vores brugerundersøgelser ville vise.

Rosa har tegnet nedestående tegninger for at illustrere gruppen og vores tanker omkring ændring af hjemmesiden.

Vi aftalte hvilke spørgsmål vi ville stille i.f.m. brugerundersøgelsen af nuværende hjemmeside og på baggrund af dette lavede jeg test-script og testplan. Rosa udførte 2 brugertest og Pavi 1 brugertest.

På baggrund af brugerundersøgelsen kunne der udarbejdes persona og tone of voice:

Vi besluttede os for at lave styletile og Lo-fi wireframes i Figma. Pavi lavede 3 Lo-fi wireframes og jeg lavede resten for også at lære Figma at kende. Dennis var behjælpelig med at guide mig, når der var noget jeg ikke kunne få til at fungere. Derefter gik Rosa og Denis i gang med at udarbejde udkast til redesignet i programmet Figma. Rosa stod for den kreative del og Denis for programmering/kodning. Vi var løbende i dialog online omkring udseende, tekst, placering af knapper osv. Der var nogle ting vi ikke kunne få til at fungere på hjemmesiden i.f.t. navigationsmenuen, men vi konkludede, at det er fordi vi ikke har lært at kode endnu, men også at det ikke betød så meget, da det kun var en prototype af redesignet vi arbejdede med.

Derefter skulle der laves en klientrapport i InDesign. Jeg lavede et udkast til opbygning af klientrapporten i Word og præsentere det for gruppen, og vi blev enige om rækkefølgen og hvad der skulle være på de forskellige sider. Dennis og Rosa gav mig en hurtig introduktion til hvordan man arbejder med InDesign. Udfordringen med InDesign er, at der kun er én af gangen der kan arbejde i programmet/filen. Det blev så til at det var mig der lavede rapporten med input primært fra Rosa og Dennis og på den måde fik jeg lært basis i InDesign. Pavi havde lidt korrekturlæsning sidste dag hvor vi arbejdede med rapporten.

Efter at have redesignet hjemmesiden valgte vi at udføre en brugerundersøgelse af vores prototype, og der var positiv feedback fra testdeltagerme:

Dennis stod for at lave markedsføringsvideoen og vi gav feedback til ham i.f.t. om der var noget der skulle ændres.

Feedback fra studiemakker på tværs

Vi havde ikke så meget tid til feedback, men de sagde at det så fornuftigt ud, at der var lidt skønhedsfejl, men at det var helt normalt, da vi jo lige er startet på uddannelsen.

Efter aflevering af projektet skulle vi fremlægge det for klassen og vores klient (underviseren), hvor vi også fik feedback på selve fremlæggelsen. Vi havde opdelt fremlæggelsen i 3 dele – intro, farver, design.

Refleksion

Der var en klar rollefordeling fra tidligt i processen, hvilket betød at alle umiddelbart vidste hvad de skulle gå i gang med. Gruppen udviste også åbenhed overfor hinandens ideér og ønsker i.f.t. at lære f.eks. programmer.

God daglig kommunikation, så vi hele tiden var opdateret med hvem der gjorde hvad og hvor langt vi var med de forskellige opgaver.

Deadlines blev i det store hele overholdt.

Vi erfarede også at der er forskelligheder i.f.t. hvordan vi arbejder og hvordan vi prioriterer og at de skrevne ord også opfattes forskelligt.

Jeg følte, at vi tabte en af gruppemedlemmerne kort efter start, en problematik jeg vendte med underviseren under en vejledning.

Feedback på klientrapporten

Bemærkninger til:

Forsiden: Brugervenlig og godt at linket virkede. Indholdsfortegnelse: Brug nogle andre ord – den var ”skoleagtig”. Indledning:

God opstilling med keywords – fremhævning af de vigtigste ting vi ville fokusere på i rapporten. Vi havde ikke behøvet at skrive om Næsby Skole og heller ikke om deres målgruppe – som klient ville de jo vide disse ting.

På side 5-8 anbefalede Anni at vi brugte større billeder og mindre tekst, men opsætningen var god i.f.t. at vi sammenligner nuværende med vores forslag. Vi kunne godt sprede det ud på flere sider. Fokus bør være på billederne ikke så meget teorien.

VI nævner testdeltagerne sidst i rapporten – dette kunne godt flyttes frem til f.eks. prioriteringssdelen.

I konklusionen skal vi igen passe på med sproget (skoleagtigt) – og vi bør ikke kalde det en konklusion men noget andet, da det er vores ”salgstale” til klienten, og her kunne vi afslutningsvis have skrevet noget a la… ”så tag kontakt til xxxxx”

Opsummering: Vi havde mange gode tiltag i rapporten, den er let-læselig, pænt sat op, brugervenlig. Vi skal passe på sproget – det bliver lidt skoleagtigt – Selve klientrapporten er vores “salgsrapport” til klienten, så vi skulle overveje at bruge andre ord end f.eks. formål og konklusion. Karaktermæssigt omkring middel.

OPGAVE: Dating app

Målgrupper:  1) Børn 2) Hunde 3) Unge mennesker (18-25) eller 4) Ældre mennesker (70+)

I løbet af workshoppen skal hver gruppe gennemløbe 3 iterationer af en løsning på et multimedieprodukt. For hver iteration skal produktet testes og herefter forbedres i forhold til feedback fra testen. 

Mulige spørgsmål til bruger-test: 

1. Henvender produktet sig til målgruppen? Hvis ja, hvordan? Hvis nej, hvorfor ikke?
2. Er indholdet intuitivt forståeligt? Hvis ja, hvordan? Hvis nej, hvorfor ikke?
3. Er produktet struktureret på en brugervenlig måde? Hvis ja, hvordan? Hvis nej, hvorfor ikke?
4. Hvad fungerede godt på produktet?
5. Forslag til forbedringer?

Processen fra hver iteration visualiseres.

Til workshoppen valgte vi at der skal laves en App til unge mennesker i alderen 18-25 år, hvor det ikke er billedet der er afgørende for . Herunder ses vores brainstorm – lavet i Figma:

På baggrund af feedback ville vi have ændret følgende:

• Gøre teksten større
• Tilføje forklaringer på forsiden og på “I nærheden af mig…”-siden
• Give en anden farve til Call-to-Action-knappen

Gruppen har ikke formået at mødes efter denne workshop for at gøre opgaven helt færdig.

Brochuren skal handle om UCL og multimedieuddannelsen. Folderens layout er forudbestemt i.f.t. antal sider og størrelse på siderne.

Der er ligeledes en designmanual som skal følges i.f.t. logo, typografi, farver, grafiske elementer og billedstil.

Der henvises til tekst fra UCL’s hjemmeside: https://www.ucl.dk/uddannelser/multimediedesigner#multimediedesigner

Min største udfordring var at den installerede Adobe InDesign var på dansk og ikke engelsk, så det var svært at følge med i tutorials og i.f.t. opstart af brochuren. Selvom jeg havde indstillet de sproglige præferencer til engelsk kunne jeg ikke få programmet installeret på engelsk, men det hjalp underviseren mig med inden vi selv skulle i gang med at udforske programmet.

På selve dagen for workshoppen nåede jeg ikke så meget, da jeg brugte det meste af tiden på at finde ud af hvordan jeg skulle navigere rundt i programmet, så nåede kun at oprette siderne og lege lidt med farver.

Jeg har efterfølgende udarbejdet en papirskitse, oversigt over de ting jeg vil bruge fra designmanualen samt hovedpunkterne i.f.t. indholdet i brochuren:

Refleksion

Det er et svært program at navigere rundt i, men ligesom alt andet, øvelse gør mester og desto mere man leger med programmet desto bedre bliver man til at navigere rundt i det.

Efter projekt 1 fik jeg mere mod på at gribe opgaven an i.f.t. at udarbejde brochuren, da jeg i.f.m. projektet opnåede et rimeligt kendskab til InDesign, da vi skulle udarbejde en klientrapport i programmet.

Jeg har efterfølgende valgt at printe brochuren og samle den for at se om der var småjusteringer der skulle foretages. Jeg kunne konkludere følgende der skulle rettes:

• Side 1-2 var for korte i.f.t. resten af siderne.
• Nogle steder skal baggrundsfarven justeres så det er på linje med resten af siden.
• Tekstbokse under “Ansøgning” og “Optagelse” var for brede og det samme gør sig gældende for tekstboksene under “Hvad vi forventer af dig”.
• Elementboksen med billede af adresse/lokation bør også justeres ind, så den ikke ses når brochuren er lukket.
• Det vil klæ’ brochuren at få indeks-tekster langs kanterne så man bare kan slå op på den side man vil læse noget om, f.eks. økonomi.
• Tekstboks under “Hvad du kan forvente” skal justeres så den passer med tekstboksen på modsatte side.
• Overskrifter i tekstboksen “Økonomi” skal have afstand til tekstboksrammen.
• Tekstboksen under “Studieudgifter” skal opdeles i 2 bokse, så de kommer på linje med boksene på modsatte side.
• Dertil flere steder hvor orddeling ikke var korrekt.
• Små justeringer af tekststørrelser og indrykning.

Opgavebeskrivelse:

Produktet var foruddefineret og derfor skulle vi forholde os til Konceptet og Indhold/Tone og Voice:

Persona blev defineret af AI: https://founderpal.ai/user-persona-generator

Efter at have fremlagt vores idéer til en anden gruppe og fået deres feedback skulle vi forholde os til selve indholdet / Tone of Voice:

Vi lavede ligeledes en SWOT-analyse for at vise virksomhedens styrker, svagheder, muligheder og trusler. SWOT-analysen bruges som et strategisk værktøj til evaluering af den nuværende situation og kan bruges til at udvikle strategier og forbedre præstationer og opnå nye mål:

Refleksion

En rigtig sjov opgave, hvor vi kunne tænke ud af boksen og nå at videreudvikle på grundidéen og bruge teorierne bag konceptudvikling og Tone of Voice. Havde der været mere tid på selve dagen, ville vi have haft mulighed for at nå at visualisere vores “nye” produkter i Photoshop.

Jeg har efterfølgende arbejdet med lidt billedredigering i Photoshop og Paint 3D for at lave en prototype af vores ide om en limited edition af Hello Kitty i Heavy metal outfit. I skitsen havde vi ikke udstyret Hello Kitty med accessories, men jeg syntes at det gav god mening at give hende en guitar i poterne. Her er så resultatet:

Udfordringen med Photoshop

Jeg har forsøgt om jeg kunne strække støvlerne fra opgavebeskrivelsen så de blev længere, og jeg har forsøgt om jeg kunne lave en tykkere sål, hvilket ikke lykkedes. Så jeg skal i gang med nogle flere turtorials omkring Photoshop, da det ikke er et program jeg tidligere har arbejdet i. Så her er der plads til læring.