WEEK 02
Datum: 19-02-2024 tot 29-02-2024
📅 19-02-2024
- Wat ging goed:
Uitleg gekregen over knelpunten huidige webapplicatie(WIXX). De door mij geschreven user stories besproken. De user stories zijn duidelijk. Afspraak gemaakt voor volgende week maandag 1e design voorstel homepage
📅 19-02-2024
- Feedback:
Opdrachtgever gaf de volgende feedback:
Feedback: Bedoel je met app op pagina 4, ook de website? We willen wel een app uiteindelijk maar eerst dat de website goed loopt.
Reactie: Een website presenteert voornamelijk informatie, terwijl een webapplicatie interactieve diensten en functionaliteiten biedt.
Feedback: Denk wel dat t belangrijk is bij opdracht omschrijving om goed onderscheid te maken tussen het reseveringsysteem wat conflicten oplost voor de cocktail walk kaartjes (dus het verkoop van de hele tour, pre-paid drinks bij meerdere bars) zodat alle drie bars een melding krijgen en het resevering systeem voor alleen het boeken van 1 drankje bij 1 bar ( het los verkoop van pre-paid drinks bij 1 bar) Dit was nog alleen beetje onduidelijk vanuit de tekst
Feedback verwerkt:
- WOGO wil een oplossing voor het reserveringssysteem voor losse tickets bij een specifieke bar, gericht op individuele aankopen van prepaid drankjes.
📅 20-02-2024
Voor het maken van de planning maak ik gebruik van het project board, waarbij ik eerst epics schrijf, vorvolgens naar user stories en taken. Nadat de taken zijn geprioriteerd met de MOSCOW-methode, pas ik planning poker toe om beter inzicht te krijgen in de complexiteit van elke taak, vervolgens de labels "sprints" toegevoegd aan taken, om duidelijk te zien welke taak bij de sprint hoort.
Elke sprint doe ik een sprint review en ga ik de taken van de volgende sprint doornemen met de opdrachtgever, zodat de opdrachtgever up-to-date blijft.
Als ontwerper binnen dit project, ga ik gebruik maken van de ontwerpmethodes: Design Thinking en Atomic Design om een website te creëren die niet alleen gebruiksvriendelijk is, maar ook functioneel en visueel aantrekkelijk.
📅 26-02-2024
Om meer inzicht te krijgen in alle elementen van de oude WOGO-website heb ik een interface-audit gedaan. Dit hielp mij bij een duidelijk beeld krijgen van wat er momenteel is en herbruikbare elementen te identificeren, zoals de knoppen het formulier en de navigatie balk. Er vallen mij een aantal dingen op zoals de knoppen die niet consistent zijn en de bepaalde pagina een overload aan informatie geven. Bijvoorbeeld dat er op 1 pagina 5x book knoppen staan met allemaal dezelfde functie.
📅 27-02-2024
De Content inventory geeft mij inzicht over alle digitale inhoud die momenteel wordt gebruikt. Het doel van een contentinventarisatie is niet om te beslissen welke content belangrijk of onbelangrijk is, maar om de content die al beschikbaar is te documenteren.
📅 27-02-2024
Om de website en structuur beter te begrijpen(inhoudshiërachie) en alle pagina's beter inzichtelijk te krijgen heb ik een sitemap gemaakt.In de sitemap zie je gelaagde blokken die zijn verbonden door de pijltjes.
📅 27-02-2024
Om dit project te laten slagen, heb ik mij verdiept in onderwerpen die ermee te maken hebben. We praten over drie belangrijke dingen: hoe het eruitziet (UI-ontwerp), hoe het voelt (UX-ontwerp) en hoe we het bouwen (Front-end ontwikkeling). Voordat we aan de slag gaan, is het handig om te snappen wat precies het verschil is tussen deze drie en hoe ze samenwerken.
📅 27-02-2024
Het project is opgedeeld in 3 verschillende fasen: UX, UI en Front-end. In de UX-fase gebruiken we de Design Thinking-methode. De methode wordt gebruikt om de problemen van de gebruiker te begrijpen en prototypes te ontwikkelen die deze problemen oplossen op basis van de resultaten van het gebruiksscenario en de testresultaten van de prototypes.
UX-ontwerp in 3 stappen:
- UX-understand: Eerst ontdekken we gebruikersproblemen met WOGO door een "User Flow" te maken.
- UX-Explore: Daarna ontwikkelen we een prototype gebaseerd op wat we vinden.
- UX-Materialize: Tenslotte testen we het prototype op gebruiksvriendelijkheid met observaties, enquêtes en bruikbaarheidstests.
-
Het gebruik van User Flow om de klantreis te visualiseren bij het uitvoeren van diverse taken op de WOGO-website en het identificeren van eventuele problemen die gebruikers ondervinden tijdens hun interactie.
-
Het ontwikkelen van een prototype dat de geconstateerde interactieproblemen oplost in verschillende stadia van het gebruik van WOGO voor het ontwikkelen van websites.
-
Het uitvoeren van een bruikbaarheidstest om vast te stellen of de interacties zijn verbeterd in het geteste prototype en om eventuele verdere aanpassingen te identificeren.
In de UX-understand heb ik de functies van de huidige WOGO-website doorlopen, de functies heb ik onderstaand opgesomd. Om deze aannames door mijzelf te bevestigen heb ik een gebruikerstest op de oude website laten uitvoeren door de doelgroep.
📅 28-02-2024
Tijdens de performance heb ik gebruik gemaakt van PageSpeed Insights om de performance WOGO te testen.
Tijdslot reservering/synchroniseren: WOGO ervaart plaatst conflicten tijdens boekingen met derde partij.
Aanpassingsmogelijk-heden: WOGO ervaart beperkingen in aanpassingsmogelijk om een unieke visuele identiteit.
Responsive: 95% procent is een mobiele gebruiker. Eigenaar ervaart responsive problemen bij mobiel.
Schaalbaarheid: WOGO groeit snel en wil opschalen door de grote hoeveelheid verkeer.
- Hoeveel invloed heeft het gebruik van Wix-website op de presentatie en snelheid van een webpagina. Bied custom-code meer mogelijkheden?
- is de Wix-website een rem op de schaalbaarheid?
- Hoe de implementatie van een op maat gemaakt framework de beperking op huidge platform oplossen?
- Tijdslot Reservering en Synchronisatie:
- Onderzoek naar de oorzaak van boekingconflicten met derde partijen en beperkingen in de huidige boekingssysteeminfrastructuur van WIX.
- Evaluatie van alternatieve boekingssystemen of -platforms die betere integratie met derde partijen bieden, inclusief de mogelijkheid voor realtime synchronisatie van beschikbaarheid en boekingen.
- Aanpassingsmogelijkheden:
- Onderzoek waarom Wix niet voldoet voor WOGO's UI oplossing.
- Responsiviteit op Mobiele Apparaten:
- Evaluatie van de huidige responsive ontwerpproblemen op mobiele apparaten en onderzoek de knelpunten.
- Schaalbaarheid:
- Analyse van de huidige infrastructuur en prestaties van de WOGO-website om de beperkingen van het Wix-platform in termen van verkeersvolumes en schaalbaarheid te begrijpen.
Analyse van de huidige infrastructuur en prestaties van de WOGO-website om de beperkingen van het Wix-platform in termen van verkeersvolumes en schaalbaarheid te begrijpen.
De algehele laadsnelheid(Speed index) is 13.8s voor mobiel, idealiter is dit 4-5s.
De WOGO webpagina laadt langzaam. De grootste elementen (afbeeldingen of video's) zijn pas na 18.3 seconden op mobiel en 1.5 seconden op desktop zichtbaar, ver boven ideale 2.5s. Dit kan komen door de grote hoeveelheid JavaScript (1.4 MB) en de totale omvang van de pagina (7.487 KiB). Om de laadtijd te verkorten, kan WOGO tekstcompressie gebruiken en de hoeveelheid JavaScript en de totale omvang van de pagina verkleinen
Meet hoe snel de webpagina laadt. Het meet hoe lang het duurt voordat het grootste element op de pagina (zoals een afbeelding of video) zichtbaar wordt op het scherm. Een LCP score van onder de 2.5 wordt als goed beschouwd.
Problemen:
- Het duurt op mobile 18.3 en op dekstop 1.5s voordat de het grootste element op de pagina verschijnt.
- WOGO webpagina gebruikt momenteel geen tekstcompressie (gzip, deflate of brotli) voor tekstbronnen. Dit resulteert in een grotere downloadgrootte (164.6 KiB)voor deze bestanden, wat de laadtijd van de pagina kan vertragen.
- WOGO webpagina Gebruikt ongeveer 1.4 MB aan JavaScript. Dit is een aanzienlijke hoeveelheid code die de laadtijd van de pagina kan vertragen. De norm aan is totaal aan HTML, CSS en JavaScript minder dan 1.5MB en minder dan 500KB aan JavaScript.
- WOGO webpagina heeft een grote totale omvang van 7,487 KiB(network payload) Dit betekent dat er een groot aantal bestanden gedownload moet worden(zorgt voor lange laadijd)Streef naar een totale network payloadgrootte van minder dan 1 MiB (1.048 KiB).
Verbeteringen:
- Dit kan verbeterd worden door het optimaliseren van webfont-formaat, een betere html-structuur. Preloading de laadtijd van het lettertype versneller. Als de koptekst onder de vouw (niet direct zichtbaar) staat, kan lazy loading de laadtijd van de bovenliggende content prioriteren.
- Implementeer tekstcompressie op de server om de grootte van tekstbronnen te verkleinen.
- Verwijder ongebruikte JavaScript code, uitstellen van niet direct benodige scripts, maak de bundel grote kleiner, Verwijder onnodige code uit custom code, verminder externe bibliotheken
- De externe van de code "chat-sdk.chunk.min.js" moet geoptimaliseerd worden
Kansen:
Bij het herontwikkelen van een Wix-website naar een frameworks kan helpen bij het beperken van de hoeveelheid third-party(plugin) code die nodig is. Dit komt doordat frameworks vaak ingebouwde functies bevatten die de functionaliteit van third-party libraries. Ook bundelen ze vaak geoptimaliseerde versies van populaire externe bibliotheken. Dit kan de laadtijd van de pagina verkorten.
De WOGO laat de eerste content op de website laat verschijnen door ontbrekende tekstcompressie (146.9 KiB), overmatig JavaScript-gebruik (1.4 MB), FOUC door vertraagde webfonts, en 51 KiB aan ongebruikte CSS, wat de laadtijd negatief beïnvloedt.
Wanneer de CLS slecht is, zorgt dit voor een onverwachtse beweging op de website, dus als je bijvoorbeeld ergens op klikt maar de muis wordt verplaatst of reageert niet. is een meting die aangeeft hoeveel de pagina onverwacht beweegt tijdens het laden. Dus hoe hoger de CLS-score, hoe frustrerender de gebruikerservaring kan zijn.
Waarom CLS goed
De CLS moet ten minsten 0.1.s zijn of minder, de WOGO heeft een score van 0,015(mobile) en op desktop 0.045, dit laat een zeer kleine visuele verschuiving aan. Gebruikers zullen geen of minimale waarneembare verschuivingen ervaren, wat leidt tot een betere gebruikerservaring.
meet hoe snel de eerste inhoud van een webpagina verschijnt. Dit kan bijvoorbeeld tekst zijn, een afbeelding of een ander element. Een goede FCP score betekent dat gebruikers snel iets zien en dat de pagina begint te laden.Een goede FCP score is onder de 2-3 seconden.
Problemen:
- WOGO webpagina gebruikt momenteel geen tekstcompressie (gzip, deflate of brotli) voor tekstbronnen. Dit resulteert in een grotere downloadgrootte(van 146.9 KiB) voor deze bestanden, wat de laadtijd van de pagina kan vertragen.
- WOGO webpagina gebruikt ongeveer 1.4 MB aan JavaScript. Dit is een aanzienlijke hoeveelheid code die de laadtijd van de pagina kan vertragen. De norm aan is totaal aan HTML, CSS en JavaScript minder dan 1.5MB en minder dan 500KB aan JavaScript.
- WOGO webpagina webpagina gebruikt webfonts die pas zichtbaar worden nadat ze geladen zijn. Dit kan leiden tot een Fout In Content Layout (FOUC), waarbij de tekst op de pagina tijdelijk onleesbaar is.
- WOGO webpagina bevat 51 KiB aan ongebruikte CSS. Dit leidt tot onnodig grote bestandsdownloads en kan de laadtijd van de website vertragen.
Verbeteringen:
-
Gebruik van
font-display: De CSS-eigenschapfont-displaykan worden gebruikt om te specificeren hoe de tekst tijdens het laden van de webfont wordt weergegeven. -
Opties voor
font-display:-
swap: De browser toont een fallback font totdat de webfont is geladen. -
fallback: De browser toont direct een fallback font, zonder te wachten op de webfont. -
optional: De browser laadt de webfont in de achtergrond en vervangt de fallback font zodra deze beschikbaar is.
-
- Verwijder ongebruikte CSS-regels: Verwijder CSS-regels die niet worden toegepast op elementen op de pagina.
-
Uitstellen van niet-kritieke CSS: Gebruik
deferofmedia queriesom het laden van CSS uit te stellen dat niet nodig is voor het renderen van de "above-the-fold" content (het gedeelte van de pagina dat direct zichtbaar is zonder te scrollen).
meet de algehele laadsnelheid van een webpagina meet. In tegenstelling (FCP) en (LCP) die enkel de snelheid meten van het eerste of grootste inhoudselement, meet SI hoe snel de hele pagina zichtbaar wordt voor de gebruiker.
Probleem:
- WOGO heeft een Speed index score van 13.8s(mobile) en 2.0s (desktop). Een goede SI score is afhankelijk van de grootte van de pagina en de complexiteit ervan, maar over het algemeen wordt een score onder de 4-5 seconden beschouwd als goed.
meet hoe lang een webpagina onbruikbaar is voor de gebruiker vanwege het laden van de pagina. Dit kan gebeuren wanneer scripts en andere elementen op de pagina de browser blokkeren en de gebruiker niet in staat stellen om te interageren met de pagina totdat deze volledig is geladen.
Probleem:
- WOGO heeft een Total blocking Time score van 2,589ms (mobile) en 250ms(desktop). Een goede TBT score is afhankelijk van de grootte en complexiteit van de pagina, maar over het algemeen wordt een score onder de 300 milliseconden als goed beschouwd.
Het ontwikkelen van de WOGO-webpagina in een custom-code webpagina de performance aanzienlijke verbeteren, waaronder het verminderen van bestandgrroottes, onnodige gebruikte code te verminderen, onnodige functies verwijderen, beheren van webfonts. Bij het kiezen van een framework is het mogelijk op geoptimaliseerde versies van library's te integreren, waardoor algehele laadsnelheid verbeterd.
Kortom, het gebruik van custom-code-programmeertalen biedt meer flexibiliteit en controle over de optimalisaties die kunnen worden toegepast,
📅 26-02-2024
In het 1e ontwerp heb ik gekozen voor een grid layout die de inhoud ordent(geeft rust). De koptekst ‘WOGO, explore your city, one cocktail at a time’ vangt direct de aandacht en communiceert de essentie van het aanbod.
Ik heb gebruik gemaakt van aantrekkelijk beeldmateriaal dat de ervaring van het genieten van een cocktail illustreert, wat bijdraagt aan het sfeergevoel. De informatie over de cocktailwandelingen staat in een overzichtelijke kaarten die de verschillende opties onderscheiden en gemakkelijk vergelijkbaar maken.
Het maakt een snelle evaluatie van opties mogelijk en moedigt interactie aan zonder overweldigend te zijn. De visuele consistentie en duidelijke navigatie-elementen ondersteunen een soepele gebruikerservaring (UX) en versterken het merk WOGO.
In het 2e design is de homepagina van WOGO te zien. In dit ontwerp maak ik gebruik van strakke, moderne layout die de gebruiker op een intuïtieve wijze begeleidt door het aanbod en de boekingsprocedure. In het 2e design is de homepage van WOGO te zien. In dit ontwerp maakt gebruik van een strakke, moderne. Bovenaan heb ik gekozen voor een grote titel die de essentie van WOGO vangt, gevolgd door een duidelijke call-to-action knop om een ticket te boeken. De afbeelding op te achtergrond zorgt ervoor dat de gebruiker een beetje sfeer kan proeven, vandaar mijn keuzen.
Ik heb gekozen voor een reversringsfucntie waar gebruikers de gewenste locatie, datum en het aantal mensen kan ingegeven, zodat ze meteen kunnen boek voor dat aantal en niet eerst naar een andere pagina worden gestuurd voor een reservering te maken.
Feedback 1e design: De opdrachtgever merkt op dat gebruikers vaak vragen stellen over de verschillen tussen de aangeboden routes. Er is behoefte aan een ontwerpoplossing die deze verschillen duidelijker in beeld brengt. Ook vraagt de opdrachtgever zich af of het icoon op de boekingsknop intuïtief genoeg is voor gebruikers om te begrijpen dat ze daar kunnen boeken.
Ook wordt voorgesteld om de enkele sfeerafbeelding dynamischer te maken door meerdere sfeerbeelden te tonen met behulp van een afbeeldingen wisselaar, om zo een beter beeld van de ervaring te geven.
Feedback 2e design: De opdrachtgever vindt de 2e route niet echt mooi en geeft aan dat de filteroptie niet echt nodig is omdat het maar weinig tickets zijn.
Wat is er gedaan:
- Onderzoek
Wat ga ik volgende week doen
- Volgende twee weken ga ik werken aan het design en onderzoeken van tech-stack.