Hovedopgave

Kort om projektet

Virksomheden's daværende problem var, at deres hjemmeside ikke stemte overens med deres brand og ikke fortalte brugeren hvem de var som virksomhed og hvad de sælger. Vi satte så fokus på at redesigne deres hjemmeside.

I samarbejde med en medstuderende har jeg i min hovedopgave udviklet tro interaktive installationer, én generel forside som samlede deres akustiske og haptiske produkter, og med hver deres side som kun havde fokus henholdsvis haptisk/akustisk.

På selve den generelle forside, skifter den mellem "Haptic", "Acoustic" og "Technologies".

Vi ønskede at skabe et tydeligt fokus på, hvilke services virksomheden tilbyder, og samtidig præsentere produkterne opdelt efter deres funktion: enten haptiske eller akustiske, afhængigt af hvilken side brugeren befinder sig på. Farverne blå og lyserød bruges bevidst for at skabe genkendelighed og understøtte denne opdeling -- blå til akustiske produkter og lyserød til haptiske

Proces

Vi gjorde brug af Design thinking metoden ...

Fold områderne ud for at få mere information.

Empathize

I et møde med virksomhedens marketingsansvarlig afdækkede vi, at deres nuværende hjemmeside skaber forvirring hos potentielle kunder. Materialet fra messer og præsentationer matcher ikke hjemmesiden, og det er uklart, hvad de egentlig tilbyder. Bannervideoen fokuserer på medarbejdere fremfor produkter, og kunderne kan ikke hurtigt forstå virksomhedens ydelser. Vi anbefalede derfor, at hjemmesiden tydeligt afspejler messernes visuelle stil og farvekodning – lyserød og blå – og adskiller haptiske og akustiske produkter på separate sider for bedre overskuelighed.

Think Aloud Test

Vi har udført en Think Aloud test på 3 personer for at finde ud, hvad der skal ligges fokus på i vores re-design. Vi har følgende begrundelse for undersøgelsen… "Vi ønsker at finde aspekter, hvor hjemmesiden kan være svær at bruge/navigere rundt på/finde produkter/se hvad virksomhed laver og om det er tydeligt.” Vi har følgende Think Aloud test scenarioer til virksomhedens daværende hjemmeside - foråret 2024. De har efterfølgende fået opdateret deres hjemmeside siden.

Scenario 1:

Du er fra en virksomhed der skal til at producere produkter, men I mangler nogle akustiske applikationer. Du er på udkig efter virksomheder der laver disse og du finder frem til virksomheden.

Hvor kan du se hvad for nogle typer af akustiske applikationer de har og om de har nogle til biler?
Du synes de akustiske applikationer er spændende og vil gerne høre mere, hvordan kommer du i kontakt med Virksomheden?

Scenario 2:

Du er en indkøber til din virksomhed og du er stødt på Virksomheden, som har haptiske produkter, som din virksomhed muligvis kan gøre brug af.

Du har en gruppe medarbejdere, som arbejder med haptisk feedback af knapper i biler, så du vil gerne finde noget, som I kan bruge til jeres nye produkter indenfor Automotives?
Du har til været til messe, hvor du har hørt om ArFi, som måler haptisk feedback og du vil se om Virksomheden har noget lignende eller det samme

Scenario 3:

Er det tydeligt hvad Virksomheden tilbyder af produkter og kvalitet?
Klik rundt på hjemmesiden. Minder hjemmesiden om det samme fra messen?
Du vil gerne vide mere om Virksomheden, hvor finder du information om dem henne?

Define

Vores Think Aloud test viste, at der ikke var en sammenhæng mellem virksomheden fremviste sig selv på messer mm. og hjemmesiden, hvilket kan skabe forvirring om hvorvidt man har fat i den rigtige virksomhed. Fx - man skulle bevæge sig længere ind på siden for at komme til selve produkt billeder, da man først bliver mødt af tegnet skitseringer af produkterne.

Ideate

Design og brugeroplevelse

Hjemmesiden skal være responsiv, visuelt enkel og let at navigere. Et farvehierarki på maks. fem farver gør det lettere for brugeren at orientere sig, og grafiske elementer bør kun bruges, hvis de understøtter forståelsen. Navigationen skal være intuitiv, eventuelt suppleret af søgefunktion og breadcrumbs, så brugeren hurtigt kan finde information. Ifølge Doherty’s Threshold (Yablonski, u.d.) bliver brugere frustrerede ved loadtider over 400 ms. Derfor skal hjemmesiden straks kommunikere, hvad virksomheden laver.

Konvertering og guidet navigation

For at øge konverteringen kan man arbejde med tydelige entry points, der guider brugeren direkte til relevante løsninger. Eksempler kan være en klar overskrift, der spørger “Hvordan kan vi hjælpe dig?” efterfulgt af bokse med konkrete hjælpekategorier – eller segmenterede valg, hvor produkterne opdeles efter specifikke målgrupper eller behov. På den måde bliver brugeren ledt det rigtige sted hen med det samme.

Hastighed og ydeevne

Ifølge Gilfillan (2024) og Doherty’s Threshold vil en loadtid over tre sekunder påvirke både brugeroplevelsen og SEO negativt. Hurtig performance er derfor essentiel.

Mobilvenlighed

Marketing (2021) viser, at 80% af B2B-købere bruger mobilen i arbejdstiden, og 60% rapporterer, at mobiloplevelsen påvirker en købsbeslutning. Et responsivt design er derfor nødvendigt for at sikre en ensartet oplevelse på tværs af enheder.

Brainstorm

Da hjemmesiden er for en allerede etableret virksomhed med en eksisterende how-to, når det kommer til hvordan de sælger og præsenterer dem selv, fik vi en liste af elementer, som vi skulle have in mente, når vi gik i gang med at re-designe via sketches, wireframes, og High Fidelity mockups. Undervejs i Ideation forløbet, har vi haft løbende møder og e-mails med virksomheden med løbende feedback enten ugentligt eller hver anden uge. Dette inkludererede brand farver til det haptiske og akustiske. Disse skulle også have hver deres informations flow på deres individuelle side, som skal stemme overens med det, som de har i deres præsentation. De ville også meget gerne have 6 knapper i toppen af både haptic og acoustic med følgende punkter: About, Applications, Technology, Toolbox, Partner, og Blog. Selve blog/nyheds skal altid lede hen til den samme side uanset hvilken side brugeren er på. Da de små detaljer kom på plads, gik vi tilbage til selve knap sektionen i toppen af haptic og acoustics siden.

Eksempel nedenunder:

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Prototyping

Sketch

Vi har benyttet os af Crazy 8’s, (Google, u.d.), (Linda, 2020), metoden til dette for at skabe vores sketches for at få så mange ideer ud på papir som muligt til selve forsiden for at have en ide om hvordan og hvorledes den kan bygges op.

Vi benyttede denne metode til at komme hurtigt ud med nogle ideer før vi går i gang med at søge efter inspiration. Dette er for at vi heller ikke bliver påvirket mere end nødvendt. Til Crazy 8’s har vi taget udgangspunkt i mobilstørrelsen.

Wireframes

Inspiration

Da vi blev færdige med vores sketches, gik vi i gang med at søge efter inspiration. Da vi gerne vil følge Jakob’s Law i forhold til hvad andre virksomheder i samme branche gør, vil det være essentielt at lede efter inspiration den vej i gennem. Efter at have kigget på andre virksomheder i samme branche, blev der kigget på Dribbble for at få ideer til diverse komponenter, farver og hero elementet.

Iterationer

Layout og visuel identitet

Deres messestand og præsentationer har et andet udtryk end hjemmesiden, så det vil styrke genkendeligheden at overføre flere af disse elementer — især farverne: mørk blå (akustik), pink (haptik) og den lyse rosa, som både LinkedIn og messerne bruger. Testpersoner efterlyste netop denne rosa farve, så den kan med fordel bruges fx i toppen af navigationen. Samme tilgang kan bruges med deres teknologibilleder, opsætning og de grafiske “skyer”, som kan implementeres på en mere moderne måde.Deres messestand og præsentationer har et andet udtryk end hjemmesiden, så det vil styrke genkendeligheden at overføre flere af disse elementer — især farverne: mørk blå (akustik), pink (haptik) og den lyse rosa, som både LinkedIn og messerne bruger. Testpersoner efterlyste netop denne rosa farve, så den kan med fordel bruges fx i toppen af navigationen. Samme tilgang kan bruges med deres teknologibilleder, opsætning og de grafiske “skyer”, som kan implementeres på en mere moderne måde.

Illustrationer

Brugerne blev forvirrede over de tegnede illustrationer, fordi de ikke afspejlede det faktiske produkt. Derfor bør egentlige produktbilleder bruges i stedet — gerne frilagte for et rent udtryk. Hvis illustrationer fortsat ønskes (pga. kundetilpasninger), bør de mærkes tydeligt med tekst om, at produktet er specialfremstillet og derfor vises som illustration.

Farver

Navigationen virker uoverskuelig, så den bør struktureres efter virksomhedens vigtigste områder: Om Grewus, Haptisk og Akustisk. Dropdown-menuen gøres mere læsbar ved at venstrestille teksten og give hvert punkt sin egen linje, så afstandene ikke skaber forvirring. “Product catalog” omdøbes til “All products” for at undgå misforståelser. Testpersonerne kunne godt lide den to-linjede menubar, så den bør bevares, da den giver bedre overblik.

Finalised version

Desktop

Mobile

Opdateret version

Efter aflevering gik vi igang med et flow chart, brugerrejse, målgrupper og kom med et endegyldigt bud på hvordan hjemmesiden også kunne se ud. Vi nåede ikke at lave endnu en Think Aloud Test med forskellige scenarioer, men hvis tiden havde været der, ville det have været super for at få slutbrugerens feedback til hvad der virker og ikke virker.