Sustainable Web · Accessibility · UX/UI

SPILCAFÉ

Et redesign og en optimering af en eksisterende hjemmeside med fokus på bæredygtighed, webtilgængelighed, brugervenlighed og responsivt design.

Se hjemmesiden →
Spilcaféens redesignede hjemmeside

Kort fortalt...

OM PROJEKTET

Spilcaféen var et eksamensprojekt med udgangspunkt i en eksisterende hjemmeside, som skulle analyseres, redesignes og optimeres. Først gennemførte jeg en website audit med fokus på UX og informationsarkitektur, bæredygtigt webdesign, webtilgængelighed og responsivt design. På baggrund af analysen fandt jeg en række områder, der kunne forbedres. Det omfattede blandt andet tunge billeder, langsom indlæsning, manglende labels, problemer med tastaturbetjening, uoverskuelig filtrering og et layout, der ikke fungerede optimalt på mindre skærme. De fund blev efterfølgende brugt som grundlag for redesignet og den tekniske optimering af hjemmesiden.

Fra analyse til optimering

PROCESSEN

01

WEBSITE AUDIT

Jeg analyserede den eksisterende løsning med blandt andet Lighthouse, WAVE og EcoGrader samt manuelle tests og brugertests. Analysen gjorde det muligt at identificere problemer inden for performance, tilgængelighed, informationsarkitektur og responsivt design.

02

REDESIGN

Med udgangspunkt i resultaterne fra min audit redesignede jeg centrale dele af hjemmesiden. Jeg arbejdede blandt andet med navigation, filtrering, favoritter, visuel feedback, informationshierarki og et mere overskueligt responsivt layout.

03

OPTIMERING

Redesign og forbedringer blev implementeret med HTML, CSS og JavaScript. Samtidig optimerede jeg billeder, semantik, tastaturbetjening, formularer og responsive layouts for at skabe en hurtigere og mere tilgængelig løsning.

Hvad blev forbedret?

FOKUSOMRÅDER

01

UX & IA

Navigation, filtrering og favoritter blev gjort tydeligere, så brugeren lettere kan forstå, hvor man befinder sig, hvilke filtre der er valgt, og hvad der sker efter en handling.

02

BÆREDYGTIGHED

De tunge billeder blev optimeret og konverteret til mere effektive formater. Der blev desuden arbejdet med billedstørrelser og lazy loading for at reducere mængden af data, der skal indlæses.

03

TILGÆNGELIGHED

Formularfelter fik korrekte labels, interaktive elementer blev gjort tastaturvenlige, og der blev arbejdet med fokus, semantik og tydelig feedback til brugeren.

04

RESPONSIVT DESIGN

Faste højder og problematiske placeringer blev erstattet af mere fleksible layouts med CSS Grid, Flexbox og media queries. Det gør hjemmesiden mere fleksibel på både mobil, tablet og større skærme.

Det færdige

RESULTAT

Resultatet blev en lettere, hurtigere og mere tilgængelig version af Spilcaféens hjemmeside. De største målbare forbedringer ses inden for performance og webtilgængelighed, hvor før- og eftermålingerne viser en tydelig teknisk forbedring. Samtidig er navigation, filtrering, favoritter og responsive layouts blevet redesignet med fokus på at gøre brugerens vej gennem hjemmesiden mere overskuelig. UX-forbedringerne tager udgangspunkt i problemer fundet i den oprindelige brugertest. Da den nye løsning ikke er blevet brugertestet igen, kan jeg dog ikke dokumentere den oplevede forbedring på samme måde som de tekniske resultater.

Besøg Spilcaféen →

Næste projekt

LUMINA →