Hej! Jeg bygger på siden. Mvh Nicholas

Guldborgsund Zoologisk & Botanisk Have

Mine roller:

UX/UI-designer & frontend-udvikler

Problemer:

Besøgende kan opleve frustration på grund af forvirrende navigation og wayfinding, hvilket kan føre til, at de hurtigt opgiver og skifter til en anden side. Navigationen er utydelig med svag visuel hierarki, da den sideløbende navigation kun præsenteres som grå tekst, mens andre navigationer er mere klare og optimerede. Derudover gentager den sideløbende navigation nogle punkter fra de andre menuer. Fokus på entry-points mangler, og kun få CTA’er findes på siderne.

Løsning:

Projektets fokus er at forbedre websitets navigation og wayfinding samt reducere visuel støj og hierarki. Dette vil blive opnået ved at implementere principper for informationsdesign med fokus på hierarki og ved at strukturere informationsarkitekturen med passende navigationstyper og wayfinding-elementer. Derudover vil vi anvende metoder til at reducere visuel støj og forbedre hierarkiet gennem Atomic Design.

Billede af Guldborgsund Zoologisk & Botanisk Have i desktop-visning Billede af Guldborgsund Zoologisk & Botanisk Have i mobil-visning

Se processen

Træt af at scrolle?...

UX (RESEARCH) UI-DESIGN FRONTEND-UDVIKLING

UX (RESEARCH)

Brugerundersøgelse

I min brugerundersøgelse har jeg anvendt segmenteringsvariabler til at forstå behovene og adfærden hos min målgruppe bl.a.. Gennem brugersegmentering har jeg opdelt målgruppen i relevante segmenter for at få et klart billede af deres behov og adfærd. Ved hjælp af interviews har jeg indsamlet kvalitativ data, hvilket har givet mig indsigt i brugernes præferencer og bekræftet vores hypotese om, hvem målgruppen er, og hvad der motiverer dem.

Billede af brugersegmentering til Guldborgsund Zoologisk & Botanisk Have Billede af brugersegmentering til Guldborgsund Zoologisk & Botanisk Have

Derudover har jeg også udviklet personas, hvilket har styrket min forståelse af målgruppen og hvordan jeg kan imødekomme dem. Mine hypoteser om besøg i zoologiske og botaniske haver viser, at disse oplevelser styrker sociale bånd mellem familie og venner og fremmer empati for dyrene og planterne. De giver mulighed for at udforske og værdsætte naturen, hvilket skaber en dybere forbindelse mellem mennesker og miljøet. Uanset formålet er sådanne oplevelser essentielle for læring og social interaktion.

Billede af personas til Guldborgsund Zoologisk & Botanisk Have

Affinity diagram

Dernæst anvendte vi et affinity diagram med henblik på at kategorisere det eksisterende indhold samt indhold vi selv har skabt til den nye hjemmeside. Figuren viser hvordan vi har grupperet indholdet i forhold til hvad der deler samme tema. Til sidst kunne vi så navngive grupperne med passende titler, efter vi havde identificeret det fælles temaer. Som det nedenstående figur også viser, så skal de gule post-its symboliserer eksisterende indhold fra hjemmesiden, hvor de grønne post-its symboliserer vores nye ideer til hjemmesiden.

Billede af affinity diagram til Guldborgsund Zoologisk & Botanisk Have

Content sitemap

For at afgøre hvordan den endelige struktur og rækkefølge skulle se ud på den nye hjemmesiden, anvendte vi et content sitemap i forhold til at dele vores indhold ud på de forskellige sider, som vist i figuren her. Vi uddelte indholdet i en kronologisk rækkefølge, så vi kunne gå hurtigere til værks i forhold til at udarbejde produktet, uden at vi skulle ind og foretage markante ændringer i forhold til hvordan indholdet skulle vises. Måden vi kunne dele indholdet ud på, var primært ved at uddele det på de sider der deler samme tema.

Billede af content sitemap til Guldborgsund Zoologisk & Botanisk Have

UI-DESIGN

Produktkrav

I produktkravsprocessen for hjemmesiden arbejdede jeg med Guldborgsund Kommunes officielle designretningslinjer, hvor jeg anvendte deres farvepalet og integrerede kommunens våbenskjold som en del af logoet. Vi fulgte også deres valg af Verdana som font for at sikre sammenhæng med kommunens visuelle identitet. For at fuldende designet og tilpasse det til vores specifikke formål, implementerede vi desuden egne farver, som gav hjemmesiden et unikt udtryk, mens det stadig respekterede den oprindelige stil.

Billede af produktkrav til Guldborgsund Zoologisk & Botanisk Have

Wireframes

I vores udarbejdelse af vores wireframes var der stort fokus på at genbruge de komponenter som vi havde tegnet ind i vores skitser. Det gjorde at vi som team kunne spare tid og sikre os konsistens i vores design til den nye hjemmeside. Dermed blev det også muliggjort at implementere lighed fra gestalt principperne i vores design, eftersom vi ønskede det at være konsistent.

Billede af wireframes (Forside) til Guldborgsund Zoologisk & Botanisk Have Billede af wireframes (Vores dyr) til Guldborgsund Zoologisk & Botanisk Have
Billede af wireframes (Dyreeksempel) til Guldborgsund Zoologisk & Botanisk Have

Mock-ups

Mock-up-processen var en af de centrale dele i vores projekt som UI-designere. Det første trin bestod i at implementere alt vores indhold og designidéer på mock-up-siderne. Herefter arbejdede vi som team med at give hinanden feedback på de forskellige sider. Baseret på denne feedback justerede vi og rettede eventuelle mangler eller fejl i mock-up’en, indtil vi nåede frem til en endelig løsning, som blev godkendt af hele teamet.

Billede af mock-up (Forside) til Guldborgsund Zoologisk & Botanisk Have Billede af mock-up (Vores dyr) til Guldborgsund Zoologisk & Botanisk Have
Billede af mock-up (Dyreeksempel) til Guldborgsund Zoologisk & Botanisk Have

FRONTEND-UDVIKLING

Wordpress & API

Det første skridt i vores kodeproces var at opsætte alt indhold i WordPress. Vi oprettede Advanced Field Groups til dyrene og deres metadata, hvorefter vi oprettede posts for hvert dyr og begyndte at tilføje indhold. Derefter opsatte vi taxonomier og tildelte dyrene deres respektive dyreklasse. Med dette på plads kunne vi gå videre til kodningen.


Vi oprettede så et delt GitHub-repository baseret på en template, opsatte mappestrukturen og linkede filer sammen. Dernæst begyndte vi at opsætte HTML og semantiske tags baseret på vores mockups og fyldte indhold i manuelt eller via WordPress. Da HTML var færdig, implementerede vi render- og fetch-funktioner i JavaScript for at hente indhold fra WordPress API til DOM. Efterfølgende arbejdede vi på filtrering og de andre planlagte funktioner. Til sidst styrede vi sidernes styling i CSS og løste løbende problemer undervejs.

Billede af WordPress og API i JavaScript til Guldborgsund Zoologisk & Botanisk Have Billede af WordPress og API i JavaScript til Guldborgsund Zoologisk & Botanisk Have

SEO

Figuren nedenfor viser resultaterne fra en “Lighthouse-test” på vores “Forside”. Måden vi kunne vi kunne opnå den høje score i SEO og Best Practices, var ved at være meget fokuseret på at anvende semantiske tags, justere billederstørrelser og indsætte “alt-attributter” og “meta-tags”. (Performance på forsiden er udfordret, pga. en stor video-hero der kører på repeat, hvor accessibility også er udfordret, da der er steder på siden, hvor vi ikke har defineret link- og knapnavne, samt vores accessibility-bar vi ikke fik gjort interaktiv.)

Billede af SEO til Guldborgsund Zoologisk & Botanisk Have