Sightful
Met Sightful lanceert GrandVision voor het eerst een heel nieuw online contactlenzen platform voor de Nederlandse en Belgische markt. Reach Digital is verantwoordelijk voor het ontwerp en realisatie van dit technologische hoogstandje.
Eenvoudig herbestellen
Herbestellen is de belangrijkste actie voor terugkerende bezoekers. Het centrale systeem van Sightful gebruikt machine learning om te berekenen wanneer een bezoeker door zijn voorraad heen is. We bouwden voor in de 'uw lenzen zijn bijna op'-e-mail, een systeem dat de bezoeker met één knop inlogt en doorverwijst naar de afrekenpagina. Op basis van de laatste bestelling is de winkelwagen ingevuld met de klant zijn lenzen (inclusief lenssterkte en andere eigenschappen), het verzendadres, het factuuradres en de verzendmethode. De klant hoeft alleen nog maar op de 'bestellen' knop te klikken. Na een aantal uur vervalt vanuit veiligheidsoverweging de mogelijkheid om met de knop in te loggen en is handmatig inloggen vereist.
Frontend componenten
We bouwen Magento 2 webshop frontends op basis van Web components. Met deze relatief nieuwe HTML standaard is het mogelijk om stukjes functionaliteit te bouwen die door alle browsers worden ondersteund en geen afhankelijkheid hebben van een framework of platform. We vervangen de standaard Magento 2 frontend gedeeltelijk, zonder noodzaak om deze volledig te herschrijven. Voor Sightful bouwden we de lenzen configurator en de winkelwagen-samenvatting in het afrekenproces als componenten. Voor de navigatie op mobiel, swipeable productlijsten en productpagina tabs konden we eerder ontwikkelde componenten hergebruiken. Het gebruik van Web Components geeft ons volledige vrijheid in opmaak en interactie.
Klantloyalty programma
We bouwden een klantloyalty systeem met vijf niveau’s: bronze, silver, gold, platinum en diamond. Nieuwe klanten worden na het plaatsen van een bestelling automatisch in het eerste niveau geplaatst. Deze informatie wordt via een event based systeem gesynchroniseerd tussen Magento en het centrale systeem van Sightful. Wanneer een klant een bestelling plaatst, geeft de webshop een notificatie, waardoor het centrale systeem aan de hand van regels bekijkt of de klant moet worden geüpgraded. Indien dit het geval is, verplaatst het centrale systeem via een API call de klant naar een nieuw niveau. Aan de niveau’s zijn kortingsregels gekoppeld en op verschillende plekken in de webshop tonen we de klant zijn huidige loyalty niveau.
Gebruikersvriendelijke productconfigurator
Contactlenzen worden gekocht per oog. Een klant kan per oog een andere afwijking hebben, maar koopt vrijwel altijd maar één soort lens. We ontwierpen een productconfigurator, die duidelijk in 2 kolommen toont wat de mogelijke opties zijn voor het linker- en rechteroog. Een bezoeker kan indien gewenst aangeven maar voor één oog te willen bestellen door een kolom uit te schakelen.
De opties worden op mobiel weergegeven als scrollbare overlays. Dit zijn bekende UX patterns van zowel IOS als Android en voelen daarom erg intuïtief. We maken bezoekers met passende opmaak van content en de juiste terminologie in één oogopslag duidelijk hoe hun bestelling eruit ziet. Omdat er makkelijk verwarring kan ontstaan over aantallen, zijn we hierover zeer specifiek. Een bezoeker koopt: 2 dozen van 30 (60 lenzen).
Gecombineerde voorraadstatus
Prijs is afhankelijk van de gekozen opties per oog, dus we tonen deze direct onder de kolom. De totaalprijzen van de kolommen worden bij elkaar opgeteld en getoond in de 'In winkelwagen' knop van een product. Zo is het voor een minder aandachtige bezoeker ook expliciet duidelijk wat de prijs van zijn configuratie is. De levertijd is afhankelijk van het aantal dozen dat een bezoeker selecteert, dus de voorraadstatus wordt getoond bij selectie van het aantal. Indien er een afwijkende levertijd is voor bijvoorbeeld het rechteroog, wordt de levertijd van het volledige product real-time herberekend.
Configurable bundle products
Om het bestellen van lenzen voor 2 ogen mogelijk te maken, combineren we twee producttypes: bundle products en configurable products. Eén product in de winkelwagen is in werkelijkheid een bundle product met daaronder 2 dezelfde configurable products, waarvan de voorkeuren voor linker- en rechteroog onafhankelijk van elkaar zijn in te stellen. Uiteindelijk worden er van 2 SKU's voorraad afgeschreven. Op de bestelling, factuur en verzending toont een product als 1 orderregel. We bouwden custom renderers om details van de lenzen (sterkte, diameter, cilinder) weer te geven op alle relevante plekken.
Koppeling Akeneo
Alle productinformatie is opslagen en wordt beheerd in een PIM systeem, waaronder categorieën, producteigenschappen, foto’s en video’s. Dit systeem biedt de mogelijkheid om op grote schaal producten te genereren, genaamd variants. We realiseerden een koppeling tussen het PIM systeem en Magento 2, die deze variants volledig ondersteunen. Inclusief ondersteuning voor meerdere talen. De productimport draait periodiek en controleert de mate waarin productinformatie voor variants compleet is. Het import proces is incrementeel en importeert alleen in het PIM systeem bijgewerkte producten.
Razendsnel zoeken
Veel lensdragers weten niet altijd welk merk lens ze dragen. Met grote productfoto's op zowel de cataloguspagina als productpagina, maken we het zo eenvoudig mogelijk om te oriënteren op productfoto's. Met de implementatie van Algolia als zoekfunctie, bieden we de mogelijkheid om te zoeken op merk, productnaam of serie. De zoekfunctie kan omgaan met spelfouten en gedeeltelijke zoekwoorden en toont resultaten binnen 100 milliseconden. Voor bezoekers ervaart dit als ‘instant’ zoekresultaten.
Optimalisatie snelheid
Door de mogelijke combinaties van lens eigenschappen, zoals sterkte, diameter en cilinder, bevat het systeem 180.000 SKU's. Dit heeft effect op de snelheid van de Magento backend en maakt frontend optimalisatie een continu punt van aandacht. We ontwikkelden een uitbreiding op de indexeringen, dat bij het bereiken van het geheugenlimiet het (reeds asynchrone) indexeringsproces stopt - en weer oppakt bij vrijgekomen capaciteit. Pagecache, geserveerd via Varnish, wordt ververst door een crawler die bijhoudt welke pagina's het meest worden bezocht én die automatisch vernieuwd bij een wijziging van informatie (prijzen, klantgroepen, content). Door prioriteit te geven aan onze geoptimaliseerde frontendcomponenten ten opzichte van Magento's standaard Javascript, verbeterden we de tijd tot First Meaningful Paint. Een aantal modules van third party developers bleken voor tragere laadtijden te zorgen met deze productaantallen, dus hebben we aan de hand van performance-profiling geoptimaliseerd of gebugfixed.