For Eyes
Met ruim 116 fysieke winkels is For Eyes één van de grootste en bekendste namen binnen de Amerikaanse optiekbranche. Dit wordt nog eens versterkt doordat de producten van For Eyes in de schappen liggen van de grootste drogisterijketen van de VS. Reach Digital realiseerde een hoogstaande Magento 2 webshop, met focus op de behoeften van de Amerikaanse bezoeker.
Virtual try-on van (zonne)brillen
Met een Virtual Try-On integratie is het voor de bezoeker mogelijk om het gewenste montuur online te proberen. Het montuur wordt op het gezicht van de bezoeker geprojecteerd. Via de webcam wordt een 3D-foto gemaakt die de rest van de gebruikerssessie wordt onthouden. Voor het uitproberen van meerdere brillen, is dus maar één scan nodig. Door de Virtual Try-On vereenvoudigen we het vinden van de match tussen montuur en stijl/smaak. De bezoeker krijgt namelijk letterlijk beter beeld van het product en ziet direct of een montuur bij hem/haar past.
Geavanceerde lens configurator
Als het gewenste montuur is gevonden, is het toevoegen van de juiste glazen de vervolgstap. Hiervoor hebben we onze zelf ontwikkelde productconfigurator geïmplementeerd. De bezoeker doorloopt een overzichtelijke interface en configureert de glazen op basis van de getoonde mogelijkheden. Aan elke optie is een custom block toegevoegd, waarin we beschrijving en eventuele meerprijs tonen. Als de bezoeker een optie selecteert, worden de resterende mogelijkheden en totaalprijs live geüpdatet. De berekeningen hiervoor worden uitgevoerd in de backend. Hiermee ontlasten we de frontend en realiseren we een high-performance gebruikservaring.
Uploaden voorschrift van opticien
Aan de productconfigurator hebben we een opmaakbare file-upload toegevoegd. Hierin kan de bezoeker het voorschrift van de opticien uploaden. De feature is gebouwd als custom web component. Hierdoor kan deze, als onderdeel van de customer journey, eenvoudig op verschillende plekken in de webshop worden getoond. De file-upload dient voor nu als controlefunctie voor de ingestelde lens configuratie. In de toekomst kunnen we de file-upload uitbreiden met een uitlees functionaliteit. De lens configuratie zou dan op basis van het geüploade voorschrift automatisch worden uitgelezen en ingevuld.
Algolia search implementatie
We hebben Algolia als search engine geïmplementeerd. Deze zoekfunctie kan omgaan met typfouten en gedeeltelijke zoekwoorden. Daarnaast worden resultaten razendsnel getoond (<100ms). Producten, categorieën en cms pagina’s worden as-you-type aan de bezoeker getoond. Hierbij worden ook productfoto’s weergegeven. Zo krijgt de bezoeker tijdens het zoeken direct visuele voorbeelden, die helpen bij het navigeren naar het gewenste product.
Details van configuratie in minicart
Met 6 tot 8 configuratieopties per product, moeten bezoekers eenvoudig inzicht hebben in de producten die zijn toegevoegd aan de minicart. De productinformatie die hier wordt getoond, moet dan dus zo volledig en overzichtelijk mogelijk zijn. We bouwden een custom cart item renderer. Hiermee halen we de data van toegevoegde producten op uit de backend. Vervolgens worden de producten, met productfoto en bijbehorende configuratie getoond in de minicart. De bezoeker kan producten zo eenvoudig inzien en controleren of de configuratie klopt. Mocht de configuratie gewijzigd moeten worden, hoeft het product niet verwijderd te worden. Aanpassen kan namelijk eenvoudig met de ‘change’ button die we aan de minicart hebben toegevoegd.
Geoptimaliseerde checkout
Net als in de minicart kunnen productconfiguraties vanuit de checkout nog eenvoudig worden gewijzigd door de toegevoegde ‘change’ button. Eén van de functionaliteiten die we toevoegden tijdens het optimaliseren van de standaard Magento 2 checkout. We realiseerden een 3-step checkout met een minimalistisch design, waardoor conversie wordt gestimuleerd. Bij de eerste stap wordt gecontroleerd of het ingevoerde e-mailadres is gekoppeld aan een account, waarna de bezoeker direct kan inloggen en betalen. Heeft de bezoeker nog geen account, zal de rest van de checkout worden doorlopen. Hierbij staat overzicht centraal: bestelde producten (inclusief productspecificaties) worden in elke stap getoond, invoervelden zijn logisch geordend en er staat geen overbodige content op de checkout pagina's.
Horizontale filters
Een ogenschijnlijke simpele feature, maar zeer stimulerend voor de gebruiksvriendelijkheid, zijn horizontale filters. Door filters horizontaal boven het productgrid te plaatsen, benutten we de ruimte optimaal en kunnen we producten nog groter tonen. Om tijdens het scrollen filteropties eenvoudig te kunnen wijzigen, zijn filterdropdowns sticky en worden actieve filters als labels onder dropdowns getoond. Daarnaast wordt bij het inschakelen van een filter alleen het productgrid (dus niet de hele pagina) ververst, waardoor het extra snel navigeert en de bezoeker de scrollpositie niet kwijtraakt.