Baseret på UX-research udvikler vi en webapp, der præsenterer indholdet på en overskuelig og brugervenlig måde. Gennem grundigt arbejde med informationsarkitektur og brugercentreret webdesign vil vores webapp leve op til brugernes forventninger til lignende grænseflader.
Med vores segmentering ligger vi fundamentet for vores interviewguide til de nødvendige kvalitative interviews. Formålet er at undersøge hvad der motiverer vores brugere, for at deltage i festivaler og koncerter.
Herefter udfører vi alle interviews, for at sikre at vi har en passende mængde data at arbejde videre fra. Efter interviews, koder vi dataene efter tema og undersøger alle interviews for fælles temaer. Disse bliver understøttet med relevante citater.
Ved at basere vores personas på data fra tidligere undersøgelser og segmentering sikrer vi, at de præcist repræsenterer vores brugergruppe. Det har givet mig en bedre forståelse af brugernes behov og motivation.
Brugen af personas sikrer, at designvalg træffes udelukkende med fokus på brugernes behov. Scenarier og situationer for personas hjælper med at bevare fokus på interaktion og støtter et brugercentreret design.
Vi starter med at skitsere ideer på papir og sammenligner dem, indtil vi når et tilfredsstillende resultat. Derefter omdanner vi skitserne til wireframes i Adobe XD, med fokus på layout, navigation og wayfinding – uden farver, billeder eller andet unødvendigt indhold i denne fase.
Når alle wireframes er færdige, tilføjer vi indhold, farver og styling for at skabe en high-fidelity mockup som vores prototype.
Vi bruger prototypen til think-aloud tests for at undersøge informationsarkitektur, navigation, wayfinding og brugervenlighed. Testene hjælper med at identificere brugerproblemer og giver indsigt i brugernes tankegang om produktet.
Vi udarbejder et testscript og gennemfører fire tests, hvor vi fungerer som både moderator og observatør. Resultaterne analyseres i en testrapport, hvor vi vurderer alvorligheden af eventuelle fejl. Baseret på rapporten justerer vi prototypen, hvilket skaber en iterativ proces som tillader løbende forbedring.
Vi implementerer løsningen med HTML, CSS og JavaScript. Først opsætter vi HTML-strukturen for at sikre korrekt placering af indholdet med fokus på tilgængelighed. Derefter definerer vi grundlæggende properties i CSS, herunder farvevariabler, margin, padding og border-radius, for at sikre konsistens mellem siderne og gøre det nemt at ændre styling på én gang, hvis nødvendigt.
Efter styling, implementerer vi den JavaScript funktionalitet vi har behov for. I dette projekt udnyttede vi JavaScript til at tilføje funktionalitet til vores filtrerings knap.
Vi bruger window.location.href.includes til at markere de aktuelle menupunkter på den aktive underside. Til sidst validerer vi koden for at sikre, at produktet er programmeret korrekt og følger best practices. Da vi kun arbejder med en mobilwebapp, har vi ikke fokus på responsivt design i første omgang.
På grund af den begrænsede tid til designprocessen er produktet et resultat heraf. Med mere tid ville funktionaliteten svare til prototypens visualisering og fungere responsivt på alle relevante viewports.