Problem

Projektets fokus er at udvikle og designe en hjemmeside der fremviser Solkildes produkter, med særligt fokus på træprodukterne de importere. Vi vil arbejde hovedsageligt med at producere indholdet, ud fra et teknisk og indholdsmæssigt SEO-perspektiv og have fokus på at opsætte metadata.

Løsning

Vi har designet og udviklet en hjemmeside, der fremviser Solkildes produkter med særlig vægt på deres importerede træprodukter fra Indonesien. Vores hovedfokus har været at producere indhold, der både er teknisk og indholdsmæssigt optimeret for SEO, hvilket vi har gjort b.la ved opsætning af metadata i WordPress.

Min rolle

UX Undersøgelse, UI Designer & Front-end kodning.

Kategorisering

Vi vil her i analysens første del analysere vores data fra vores segmentering og de brugerundersøgelser vi har udført. Analysen af dette, vil komme til at lægge grund for vores problemløsning fremadrettede.

Interview

Vi udarbejder en interviewguide, hvor vi først har fundet frem til et formål, hypotese og undersøgelse spørgsmål Ud fra vores undersøgelses spørgsmål udarbejder vi en række åbne og ledende spørgsmål, samt opfølgende spørgsmål (Figur 7.9). Vores fokus er på at skabe sammehæng mellem de spørgsmål vi stille under interviewet, samt formål, hypotese og undersøgelse spørgsmål. Målet er at komme i dybten og indsamle den nødvendige data til at kunne danne os et billede af brugergruppens holdninger.

Tematisering

Vi tematiserer fire transskriberede interviews for at finde fælles temaer såsom: Socialt sammenhold Motion Glæde Tematiseringen viser, at det særligt er socialt sammenhold, motion og glæde, der motiverer folk til at være med i foreninger.

Skitse

Vi har valgt at tage udgangspunkt i en desktop first-tilgang til vores designproces. Denne tilgang giver os mulighed for at fokusere på de mere komplekse designkomponenter og layoutbeslutninger, som ofte er nødvendige på større skærme. I en desktop-first tilgang er der flere detaljer, der skal tages højde for, såsom en bredere indholdsstruktur, flere elementer på skærmen, samt avanceret navigation og interaktionsmuligheder.

Wireframe

Vi udarbejder vores wireframes med udgangspunkt i Gestaltprincipper og et 12-kolonne grid-system. Gestaltprincipperne er grundlæggende for vores designbeslutninger, da de hjælper os med at skabe en intuitiv og sammenhængende visuel oplevelse. Ved at bruge principper som nærhed, lighed, lukning og figur-grund kan vi sikre, at brugerne hurtigt og nemt kan forstå, hvordan indholdet er organiseret, samt hvordan de forskellige elementer relaterer til hinanden.

Mock-up

Efter at vi havde fastlagt strukturen på den nye hjemmeside, påbegyndte vi udarbejdelsen af high-fidelity mock-ups, så vi kunne arbejde på det nye visuelle design og samtidig tilføje de manglende elementer af indhold. Vores fokus lå på at præsentere tjenesterne på den bedst mulige måde og samtidig adressere brugernes behov og fordele. Vi sørgede for at inkorporere brugerfeedback og brugervenlighedstest i udviklingen af mock-ups for at sikre en intuitiv og effektiv brugeroplevelse. Derudover blev der lagt vægt på at skabe en sammenhængende visuel identitet, der afspejler Hadsunds karate klubs værdier. Ved at integrere responsivt design sikrede vi, at hjemmesiden fungerer optimalt på forskellige enheder og skærmstørrelser.

5 sekunders metode

Vi udfører en 5-sekunders test for at evaluere, hvordan brugerne oplever det øverste af vores forside. Testen er afgørende for os, fordi de første sekunder af en brugers interaktion med en hjemmeside ofte er afgørende for deres førstehåndsindtryk. Hvis brugeren ikke hurtigt forstår sidens formål eller bliver tiltrukket af indholdet, risikerer vi, at de forlader siden med det samme. Grunden til, at vi har valgt at fokusere på det øverste af forsiden, er, at det er det første, brugerne møder, når de lander på siden. Dette område skal derfor klart kommunikere, hvad siden handler om, og skabe engagement fra første øjeblik. Det er her, vi introducerer nøglebudskaber, visuelle elementer og navigationselementer, der skal lede brugeren videre ind på siden.

Think aloud-test

I vores reviewfase udfører vi en Think Aloud-test som en del af vores brugervenlighedstestning. Formålet med denne metode er at indsamle værdifuld feedback direkte fra brugerne, mens de interagerer med vores prototype. Think Aloud-testen giver os indsigt i, hvordan brugerne navigerer på siden, hvilke tanker de har undervejs, og hvilke problemer de potentielt støder på.

Opsætning af WordPress

Vi opsætter WordPress ud fra den metadata, vi kom frem til ved opsættelsen af vores metadata. Her opsatte vi først vores feltgrupper, taksonomier og kategorier. Feltgrupperne hjælper os med at organisere vores metadata og præsentere detaljerede produktinformation på en struktureret måde, samt gør det muligt at få dem vist inde på en post.

Realisering af Produktet

vi opsætte preview af produkterne. For at sikre os koden ikke fejler, hvis der ikke er sat et billede i APIen, laver vi et tjek på om der er sat noget ind i billede_1. Vi bruger WordPress forskellige versioner af billedet til at opsætte srcset på billedet, så den ikke skal hente samme størrelse billede til både mobil og desktop. Variablen bruger vi så i koden til selve previewet af produktet, så den enten sætter billedet ind, eller en tom string.

Filtrering

Da vores produkter er i hver sin kategori, har vi lavet en funktion til hver; en til møbler og en til dekorationer. Det første funktionen gør, er at fjerne alt HTML der er sat ind. Efterfølgende laver i et tomt array til hver taksonomi, for at have et sted at gemme hvad der bliver valgt i filteret.

Konklusion

igennem hele processen bliver resultatet en professionel, brugervenlig og SEO-optimeret hjemmeside, der styrker Solkildes online markedsføring, men også bidrager til at øge virksomhedens synlighed og tiltrække flere kunder. Vores arbejde med at opsætte metadata har været afgørende for at sikre, at hjemmesiden opfylder både tekniske krav og brugernes behov. Samlet set har projektet været en succes, og vi er tilfredse med det resultat vi har leveret.