Hadsund Karate Skole

Responsivt Web Design

PC med billede af Hadsund Karate Skole PC med billede af Hadsund Karate Skole Tablet med billede af Hadsund Karate Skole

Casebeskrivelse

Udfordring: Hadsund Karate Skole er en karateskole der er beliggende i Hadsund. Den eksisterende hjemmeside havde udfordringer med informationsarkitekturen og indhold. Dette kom til udtryk gennem manglende visuelle og skriftlige elementer der informere om klubben og om Ashihara Karate som sportsform.

Løsning: En ny hjemmeside med fokus på indhold, informationsarkitektur og UI-design.

Research

Brugerundersøgelse

Segmentering

Vi foretog en segmentering af brugergruppen på baggrund af subjektive og objektive kriterier mhp. at afgrænse brugergruppen og finde data om enkeltindividers interesser og motiver for at deltage i foreningslivet - heriblandt kampsport som karate.
Data’en underbyggede vi med statistik og andet valid data. Eksempelvis vidste danske idrætsorganisationers medlemstal fra år 2022, at brugergruppens aldersspænd går fra 3 år til 70+ år, og gruppen 0-12 år samt 25-59 år, vægter mest.

statistik over idrætsorganisationers medlemstal i år 2022
Dataindsamling og analyse

Dernæst foretog vi kvalitative interviews. Formålet var at opnå en bedre forståelse for den brugergruppe, der anvender hjemmesiden. Datamaterialet blev analyseret vha. Kvale og Brinkmanns 7 faser for en interviewundersøgelse, konkret gennem en tematisering af indholdet. Analysen vidste, at det særligt var socialt sammenhold, motion og glæde som havde betydning for hvorvidt vores interviewpersoner deltog i foreningslivet eller ej.

fælles temaer fra dataindsamling og dataanalyse

Informations arkitektur

Content Inventory

Vi skabte et overblik over det eksisterende indhold som var tilgængeligt på hjemmesiden gennem et content inventory. Se eksempel fra forsiden på nedenstående figur, hvor flere sektioner omhandler Ashihara Karate som sportsgren, og ikke Hadsund Karate Klub. Indholdet på forsiden var overordnet set præget af teksttunge afsnit og enkelte billeder.

Eksempel på content inventory fra Hadsund Karate Skoles eksisterende hjemmeside
Affinity Diagram

Vi sorterede og inddelte hjemmesidens indhold i et affinity diagram for at organisere eksisterende og nye indholdselementer. Samtidigt sorterede vi indholdet på baggrund af lighed i 8 overordnerede klassifikationsskemaer.

Affinity Diagram Af Hadsund Karate Skoles hjemmeside
Content Sitemap

For at visualisere den indholdsmæssige struktur og organisering til den nye hjemmeside, udarbejdede vi et content sitemap. Samtidigt havde vi fokus på, at udarbejde en plan for hjemmesidens interne navigation og wayfinding.

Content Sitemap over Hadsund Karate Skoles nye hjemmeside

Design

Skitsering

Med udgangspunkt i vores content sitemap skitserede vi alle siderne i kronologisk rækkefølge. Vi vurderede, at en horisontal navigationslinje i toppen ville være den bedste løsning til navigation/wayfinding på desktop. Til mobilversionen valgte vi en navigationsbar i form af en burgermenu, i øverste højre hjørne. Vi valgte at begynde siderne med hero-images. Vi prioriterede en sektion på forsiden om Hadsund Karate Skoles værdier. Dette havde til formål at tydeliggøre klubbens værdier og målsætninger. Afsluttende på siderne, udarbejdede vi focused entry points, vis formål er, at give brugerne information om centrale emner i klubben og guide dem videre til nyt indhold på hjemmesiden.

Skitse over forside til Hadsund Karate Skole Skitse over instruktør-siden til Hadsund Karate Skole Skitse over Bestyrelse og Vedtægts-siden til Hadsund Karate Skole

Wireframes

Wireframe over forside til Hadsund Karate Skole Wireframe over Aktivitetsside til Hadsund Karate Skole Wireframe over Informationsside til Hadsund Karate Skole

Mock-up

En interaktiv prototype udarbejdet i Adobe XD. For at understøtte de fundne temaer i vores interviews, vælger vi at indsætte et gruppebillede på hjemmesidens forside. Dette skal understrege klubbens domæne på hjemmesiden og samtidig give et indtryk af “glæde”, “socialt sammenhold” og “motion”. Vi vælger også at skrive klubbens værdier i et stort billede under sektionen “Værdier i Ashihara Karate Hadsund”. Dette har til formål at formidle værdierne til læseren og understrege vigtigheden heraf.

Mock-up af forside til Hadsund Karate Skole Mock-up af Karate Etikette til Hadsund Karate Skole Mock-up af karate etikette, mobilversion, til Hadsund Karate Skole

Brugertest

Vi foretog en kvalitativ brugerundersøgelse via. en Think-Aloud Test. Formålet var at teste prototypen ud fra aspekterne: informationssøgning, navigation/wayfinding og brugervenlighed. Analysen af undersøgelsen blev dokumenteret i en Usability Test Report.

Usability Test Report fra Think-Aloud test af prototypen til Hadsund Karate Skoles nye hjemmeside

Create

Produktion af løsningen

Produktet er kodet vha. HTML5 og CSS3 og ved anvendelse af Github til versionsstyring.

Eksempel fra HTML kode til produktet af Hadsund Karate Skoles nye hjemmeside

Det færdige produkt

Gå til hjemmesiden hér link icon

Nysgerrig efter at se mine andre cases?

Så gå tilbage til portfolio oversigten ved at klikke på nedenstående knap.

Portfolio oversigt