Om

Enemærkets Hostahave

Kontekst

Akademisk projekt
Design & udvikling
4. April 2024 - 22. maj 2024

Teknologier

WordPress
php, CSS & HTML
Adobe XD
Breakdance
ACF
Adobe Illustrator

Introduktion

Enemærkets Hostahave er en virksomhed, der kombinerer en fysisk besøgshave og plantesalg, med et online plantesalg. Efter et ejerskifte for 5 år siden, har de nye ejere sat øget fokus ind på at tillokke flere til haven, igennem en dedikeret indsats online for at følge med tiden. Med min rådgivning, er det er lykkedes dem at skabe et social medie univers, som er vokset fra 100 til over 6000 følgere på Facebook over årene, men de føler ikke at deres hjemmeside var fulgt med.

Hjemmeside inden redesignet er en løsning, som de overtog i forbindelse med ejerskiftet, og fremstår forældet og med ikke optimale løsninger. De ønskede et komplet redesign af siden, så denne fremstod mere troværdig, tidssvarende og professionel. Målet var dog først og fremmest at skabe en intuitiv og nem backend, da jo mere tid de bruger på hjemmesiden, jo mindre tid har de til at passe haven.

Før
Efter

Laptop

Tablet

Mobil

Vi har haft Sarah til, at forny vores hjemmeside, med henblik på flere besøgende i vores have.

Sarah har haft en professionel tilgang til både vores ønsker og behov. Hun har lyttet og er kommet med konstruktive ideer til udviklingen. Hun har endvidere lavet et nyt logo til vores virksomhed så vi fremtræder mere troværdige.

Vi vil til enhver tid bruge Sarah igen og anbefaler hendes arbejde.
Helle S.
Ejer af Enemærkets Hostahave

Kravspecifikationer

Siden skal bestå både af 'besøgshave'-delen, samt en webshop.

Der skal være et system til opsætning af arrangementer.

Der skal være et selvstændigt system til blogindlæg, men også et til pasningsvejledninger af hostaer og andre planter.

Andre vigtige forhold

Målgruppen består fortrinsvist af kvinder over 45 år, men mange er også 60+. Af denne grund var det ekstra vigtigt at siden var nem at navigere for folk, der ikke anser sig selv som IT-kyndige, og har dårligere syn. Derfor blev der ikke lavet 'smarte' og moderne funktioner, men i stedet velkendte og intuitive løsninger, som blev testet på målgruppen, for at sikre brugervenligheden.

En stor del af målgruppen foretrak endvidere at browse siden på deres mobil. Det er altid vigtigt at have et responsivt design, men dette var især et fokuspunkt, da deres originale hjemmeside ikke havde en god mobiloplevelse.

Visuelt design

Inden redesignet, havde Enemærkets Hostahave et logo. Logoet var et bitmap billede i lav kvalitet, der havde en hvid baggrund inkluderet i selve billedet, hvilket gjorde det svært at benytte på forskellige baggrunde. Derudover blev det utrolig pixeleret, når det blev skaleret op i størrelse til skiltning.

For at løse dette skabte jeg et nyt logo, der skulle ligge til bunds for den nye visuelle identitet. I tæt samarbejde med virksomheden, fik vi skabt et logo der opfyldte deres ønsker.

  • Skalerbart
  • Inkluderer et ikon af en hosta - denne skulle være flerfarvet
  • Virke på både mørk og lys baggrund - der blev skabt en hvid version
  • Navnetræk i en anden farve end bomærket

Proces

Semi-strukturede interviews

Ved opgavens start, afholdte jeg interviews med informanter fra målgruppen.

Her søgte jeg at afklare deres ønsker til den nye hjemmeside, frustrationspunkter ved andre sider, samt en visuel retning ved at se på konkurrenters hjemmesider.

Wireframe testing

Jeg skabte en interaktiv low fidelity prototype i Adobe XD, og afholdte en række brugertests.

Igennem stillede opgaver, fik jeg indsigt i hvordan målgruppen interagerer med siden og hvorvidt det forslåede interaktionsdesign og informationsarkitektur var intuitiv eller frustrerende for målgruppen.

Mockup interviews

Baseret på indsigterne, skabte jeg mockups, som blev vist målgruppen.
Mockupsne blev udviklet baseret på A/B testing, hvor et element blev ændret af gangen, og målgruppen blev spurgt ind til hvad der appellerede mest til dem.

Endvidere blev de spurgt ind til hvorvidt hjemmesiden fremstod troværdig og passede til Enemærkets Hostahave.

Opbygning af siden

Backend

Igennem brugen af Advanced Custom Fields, kunne jeg skabe skræddersyede felter, der var hurtige og nemme for ejerne at udfylde i backend.

Opsætning

Med sidebyggeren Breakdance, skabte jeg skabeloner, der dynamisk kan indhente indholdet fra felterne, skjule dem hvis felterne ikke var udfyldt og opdatere informationen flere steder på én gang.

Frontend

Samlet blev det til en visuel tiltrækkende frontendoplevelse, som ejerne af siden ikke skal bruge tid på selv at opretholde designlinjerne, da deres indhold blot trækkes fra backend og oversættes automatisk til frontend.

Se næste case

Se forrige case