Bootstrap hjemmeside til Børnegården Katholt

I vinteren 2024 kontaktede Børnegården Katholt, en privat institution med både børnehave og vuggestue, os i forbindelse med en skoleopgave for at få idéer til en ny hjemmeside, da deres daværende side var forældet og stod til et redesign.

Min rolle

I projektet har jeg haft ansvaret for at udvikle wireframes og udarbejde en færdig prototype i Figma, som efterfølgende blev implementeret i Bootstrap.

Tidslinje

Grundlæggende fase

I den indledende fase fastlagde vi ved hjælp af åbne og lukkede kortsorteringstests, hvilke hovedpunkter og undersider der var fundamentale for brugerne.

Kortsortering er en metode, hvor testpersoner organiserer indholdskort i kategorier (åben betyder at de opfinder kategorierne selv, lukket betyder at de placerer dem i på forhånd definerede kategorier), hvilket giver indblik i, hvordan brugere naturligt forventer at finde information. Vi brugte testpersoner i alderen 25 til 35 år, som udgør målgruppen, da de ofte lige har fået børn.

Resultaterne blev anvendt til at udarbejde vores sitemap, hvor vi fastlagde de endelige hovedpunkter og undersider til den nye hjemmeside.

Åben kortsorteringstest

Lukket kortsorteringstest

Sitemap

Wireframes & prototype

Efter den grundlæggende fase begyndte vi at udarbejde low-fidelity wireframes og papirskitser, som dannede grundlag for vores mockups. I denne fase brugte vi indsigter fra tænke-højt-tests på den gamle hjemmeside til at optimere strukturen og brugervenligheden. Farvevalget tog udgangspunkt i Børnegården Katholts logo samt institutionens krav om sandfarver. De færdige mockups blev derefter implementeret 1:1 i Bootstrap, med få ændringer undervejs.

Low-fidelity wireframes

Styletile

Mockups/prototype gennemgang

Det færdige produkt (hjemmesiden)

Herunder ses det færdige produkt implementeret i Bootstrap. Designet er overført 1:1 fra mockups og optimeret til både desktop og mobile enheder, med fokus på brugervenlig navigation, tydelig formidling af institutionens værdier og en visuel stil der kan relateres til Børnegården Katholts identitet.

Indsigter fra projektet

I projektet lærte jeg at arbejde fra low-fidelity wireframes til færdige mockups og prototype i Figma, og hvordan design og struktur skal være på plads, før man implementere i Bootstrap. Jeg fik praktisk erfaring med Bootstrap, og jeg lærte, hvor vigtigt det er at inddrage brugerfeedback gennem tænke-højt-tests og kortsortering for at skabe en intuitiv og brugervenlig hjemmeside. Projektet gav mig også indsigt i, hvordan man omsætter en institutions værdier til visuelle elementer, navigation og layout, så hjemmesiden giver et klart og positivt førstehåndsindtryk.