Brugergrænseflade & Content

Redesign af Hjemmeside - Logo redesign

Det færdige redesign af logo for May'C restauranten, som vi udviklede i Adobe Illustrator.

Opgavebeskrivelse

Det originale logo for May'C restauranten, som vi ville redesigne.

Formålet var at bevare restaurantens oprindelige identitet, samtidig med at logoet skulle appellere til målgruppen og tydeligere kommunikere, at der er tale om en moderne sushi-restaurant.

Arbejdsproces

Målgruppen blev defineret gennem persona og segmentering med udgangspunkt i Gallups moderne segmenter. Vi brugte This person does not exist, til at generere billeder til vores personaer. Herefter lavede vi research på lignende logoer og vektorer, for andre sushi restauranter, og fandt en gennemgående tematik i fisk, spisepinde og sushiruller. Baseret på det gik vi i gang med skitsefasen, hvor vi tegnede forskellige idéer og muligheder for logoets form og udtryk.

Billede af skitser til logo redesign for May'C restauranten.

Ud fra det brugte vi i Adobe Illustrator til at lave fire udkast af vores logo redesign. Via pen-tool, line-tracing og kombination af udvalgte stock-vektorer, fik vi udarbejdet fire logoer, som kan ses herunder. Ud fra dem, valgte vi og finpudsede det endelige logo.

Fire udkast af logo redesigns til May'C.

Læring

Opgaven gav mig en bedre forståelse for, hvordan man kan arbejde med at videreudvikle et eksisterende logo uden at miste genkendelighed. Jeg lærte, hvordan man bevare identitet og stadig tilpasser udtrykket til en ny eller mere præcis målgruppe.

Vi kunne med fordel have inddraget brugertests af det opdaterede design, såvel som det gamle. F.eks. en Likert-test eller en 5-sekunders test, kunne have givet os konkret data på, hvorvidt vores redesign havde nået de målsætninger vi havde sat os for, og om der set udefra overhovedet var brug for at redesigne logoet. Har helt sikkert fået større bevidsthed om værdien af test, også i mindre delopgaver.

Redesign af Hjemmeside - Projektstyring

Billede af vores Trello board, som vi brugte til at styre vores gruppeprojekt. Klik her for at komme til selve boardet. Bemærk at det kræver en Trello-konto at få adgang.

Opgavebeskrivelse

For mig var projektstyring det mest essentielle område, og det var jeg hvor jeg lærte mest igennem gruppeopgaven med redesign af en hjemmesiden. Fokus var på, hvordan man arbejder effektivt i grupper, planlægger sin tid, fordeler opgaver og løbende følger op på gruppens fremdrift. Målet var at skabe en fælles struktur, der kunne understøtte både samarbejde og produktion gennem hele projektet.

Arbejdsproces

Vi startede med at udarbejde og underskrive en gruppekontrakt, hvor vi blev enige om bl.a. ambitionsniveau, samarbejdsform, rollefordeling hvordan vi håndterer uenigheder eller udfordringer i gruppen.

Til den løbende projektstyring brugte vi to konkrete værktøjer. Trello blev anvendt til at skabe overblik over opgaver, ansvar og status, imens Scrum blev brugt som ramme for opgavefordeling. Her forsøgte vi, ved at arbejde med story points og roller som scrum master og project owner, at ligge en fast dagsorden. Kvaliteten af vores møder varierede dog meget afhængigt af, hvor stor vægt dagens scrum master lagde på projektstyring som redskab. Gruppearbejdet var også præget af mange aflysninger på grund af arbejde, sygdom og andre eksterne faktorer.

Vi var gode til at bruge Trello og Scrum i projektets opstartsfasen, men efterhånden som vi nåede til kodningsdelen, gled projektstyringen i baggrunden. Det var ærgerligt, da netop denne fase havde haft stor gavn af mere struktur, blandt andet for at undgå overlap i arbejde.

Læring

Forløbet har fået mig til at indse, at projektstyring kun fungerer, hvis alle i gruppen er enige om både formål og arbejdsform. Det er ikke nok at introducere værktøjer som Trello og Scrum, hvis de ikke bruges konsekvent gennem hele projektet, og det er ikke relevant at blive enige om at redskaber skal bruges, hvis det ikke er indforstået i hvilket omfang de skal bruges i.

Set i bakspejlet ville det have været en fordel at sikre en fælles forståelse af projektstyring fra start og fastholde en ensartet arbejdsgang hele vejen igennem. Da vi f.eks. lavede dobbeltarbejde, så en stor del af koden blev irrelevant lærte jeg, at god projektstyring ikke er en ekstra opgave ved siden af det kreative arbejde, men et vigtigt redskab, der kan spare tid, mindske frustrationer og forbedre samarbejdet.

Redesign af Hjemmeside – Styletile & Mockup

Billede fra Figma, af vores Hi-fi Mockup af hjemmeside til May'C.

Opgavebeskrivelse

Som en del af opgaven skulle vi udvikle et styletile og en mockup, som efterfølgende skulle brugertestes. Derudover skulle vi udarbejde et moodboard baseret på udvalgte nøgleord, som det visuelle udtryk skulle repræsentere.

Arbejdsproces

Vi startede med desk research af lignende løsninger på markedet, herunder større platforme som Wolt og JustEat, for at opnå en bedre forståelse for branchens opbygning af menukort, kurv og bestillingsflow. Samtidigt udarbejdede vi en segmenteringsanalyse og personaer med udgangspunkt i restaurantens målgruppe.

Billede af vores personaer.

Herefter lavede vi et moodboard ud fra nøgleordene ”atmosfære, kultur & fælleskab”, og derudover kollager af hhv. billedestil. Der var lidt uoverensstemmelser i gruppen ifht. brug af segmentering, så selvom vi havde analyseret os frem til det moderne segment, passede vores nøgleord ikke helt spot-on. Endnu en læringsmulighed ifht. gruppearbejde og kommunikation fremadrettet.

Ud fra moodboardet valgte vi de elementer der passede bedst til målgruppen, og lavede forskellige styletiles udfra målsætningerne: moderne & professionel, minimalistisk og brugervenlig.

Vi brugertestede vores styletles med en likert test, for at se om vi havde ramt de målsætninger vi havde sat for vores projekt. Efter vi havde fået en tilpas mængde testresultater, valgte vi at gå med det mørke styletile, da det fik den højeste score på 3,89. Selvom det samlede testresultat kun lå omkring middel, opnåede vi gode resultater på de parametre, vi selv vægtede højest, herunder brugervenlighed.

Herefter var det bare at designe siden ud fra den data vi allerede havde. Til dette brugte vi Figma, hvor vi havde fokus oversættelsen af styletile til funktionel side, og samtidigt holde fast i de værdier vi havde lagt vægt på. Vi arbejde hhv. på mockup af en mobil- og desktopversion. Mobilsiden kan ses herunder og desktopversionen i toppen af dette afsnit.

Læring

Forløbet gav mig en bedre forståelse for, hvordan research, segmentering og brugertest kan bruges aktivt til at kvalificere designbeslutninger, men også at det ikke bare et noget der skal overstå, men noget man i højere grad end vi gjorde under projektet bør inddrage i forløbet. Jeg har lært, at det er afgørende, at nøgleord, målgruppeanalyse og visuelt udtryk hænger sammen, da uoverensstemmelser hurtigt kan skabe uklarhed i designprocessen.

Derudover blev jeg opmærksom på, at en Likert-test er et nyttigt redskab til at sammenligne visuelle udtryk, men eftersom testen vægter alle parametre lige højt, vil jeg inddrage flere testtyper i fremtiden, som f.eks. 5 sekunders test. Generelt kan man sige at processen havde stået stærkere i dag, hvis vi havde suppleret den med flere brugertests, eksempelvis af mockuppen i de senere faser, for at validere brugeroplevelsen yderligere.

Redesign af Hjemmeside - Kodedel

Opgavebeskrivelse

Opgaven bestod i at omsætte vores hi-fi mockup fra Figma til en funktionel, kodet hjemmeside. Vi ville gerne sidens funktioner ved hjælp af JavaScript, så brugeroplevelsen ikke kun var visuel, men også fungerede i praksis.

Arbejdsproces

Arbejdet tog same sagt udgangspunkt i en vores mockup fra Figma, som vi første oversatte til HTML og CSS. Herefter brugte vi JavaScript til at tilføje interaktion og funktionalitet. Opgaverne blev opdelt i gruppen, så nogle arbejdede med navigation, andre med funktioner som kurv og “book bord”, mens andre stod for indholdssiden “Om os” osv. Sitet blev dermed bygget op af individuelle løsninger og senere samlet til én løsning. Vi arbejde selvfølgelig over gitHub, med forskellige branches.

Jeg vil nu demonstrere et par eksempler på eksempler på hvordan vi bruge javascript til løsningen. Her blev JavaScript brugt til at vise og skjule forskellige dele af menukortet baseret på brugerens valg. Løsningen gjorde det muligt at navigere mellem retter uden at reloade siden og gav en mere app-lignende oplevelse, som var planlagt i mockuppen:

Nælste kode blev brugt til at gemme brugerens valgte produkter i localStorage, så indholdet i kurven kunne bevares på tværs af sider. Kurven blev opdateret løbende med antal og pris og fungerede som en simulering af et bestillingsflow uden backend. Desværre virkede det ikke på andre computere end den hvor vi brugte til at samle koden på. Mere om det i læring.

Læring

Forløbet gav mig en grundlæggende forståelse for, hvordan JavaScript kan bruges til at skabe sammenhæng mellem design og funktionalitet. Jeg lærte, at selv relativt simple scripts hurtigt kan blive komplekse, når flere interaktioner skal spille sammen, eksempelvis navigation, menufiltrering og kurvlogik, og også huske på at kode der er beregnet til mobilversionen bør fjernes, hvis der ikke er en mobilversion.

Et konkret nyt læringspunkt var arbejdet med localStorage, hvor jeg fik indsigt i, hvordan data kan gemmes og genbruges på tværs af sider uden en backend del. Samtidig blev jeg mere bevidst om vigtigheden af struktur og overblik i JavaScript-filer, da manglende planlægning kan gøre koden svær at vedligeholde og rette til.

Funktionaliteten burde have være planlagt mere systematisk fra start, men processen har givet mig en solid forståelse af hvad man ikke bør gøre, når vi skal arbejde videre med frontend-udvikling og JavaScript i kommende projekter.

Andet indhold

Under første semester har jeg også arbejdet med en række mindre projekter og øvelser, der har bidraget til at styrke mine kompetencer inden for både design, indholdsproduktion og digitale værktøjer. Med denne sektion ønsker jeg kort at vise, at jeg har arbejdet med et bredt omfang af opgaver, uden at gå for meget i dybden med dem alle sammen.

Moving Arts

Blandt andet har jeg arbejdet med at animere maleriet ”En kvinde der påfører makeup” (化粧の女) af Goyo Hashiguchi. Hvor mine læringsmål var animation i Adobe After Effects, implementering af AI-genereret indhold og at udarbejdelse og udførelse ud fra et storyboard.

Pokemon Kort Redesign

Billede af mit Kimchi-energi Pokemon kort.

Derudover har jeg designet et koncept til hvordan et kimchi-type Pokémon kort ville se ud, med fokus på at blive bedre til Photoshop, Illustrator, fotografi og farvedesign.

Redesign af hjemmeside - Hi-Fi prototype af Aarup Tennisklub

Endeligt har jeg også udarbejdet en hi-fi prototype i Figma i forbindelse med UX/UI, af et redesign af Aarup Tennisklubs hjemmeside. Fokus læringsmæssigt var på Figma, brugergrænsefladedesign gennem persona, styletiles og moodboards.

Styletile til redesign af Aarup Tennisklubs hjemmeside.