Logo
Logo da

DA

Door een fusie werd DA in één klap de grootste drogisterijketen van Nederland. Zonder goede webshop. Reach Digital realiseerde een nieuw DA e-commerce platform van ontwerp tot techniek. Naadloos aansluitend op de huisstijl.

Da Case Laptop Background
Laptop ShadowLaptop Frame
Da Case Laptop Image

Minimalistisch kleurenpallet

Het kleurenpallet van DA bestaat uit de combinatie van wit, zwart en de roze accentkleur. Zonder toevoeging te vlak voor een gebalanceerd, modern ontwerp. Gedurende het ontwerpproces vonden we in een combinatie van zachte grijstinten de benodigde uitbreiding voor het vormgeven van de verschillende user interface elementen. De gebruiker maakt gedurende zijn bezoek gebruik van knoppen, selectboxes en models, die perfect samensmelten met het bestaande kleurenpallet.

Mobile first

Één van de grootste uitdagingen voor een consistente high quality visuele uitstraling is de onderhoudbaarheid van banners. De eenvoud waarmee het e-commerce team en marketing banners kan vernieuwen. We ontwierpen mobile first een concept voor banners, waarin de banner voor de ene helft uit beeld bestaat. De andere helft bestaat uit volvlak merkkleur met tagline die maximaal 3-5 woorden mag bedragen, én een CTA (button, in dit geval). Het marketingteam zoek foto's waarvan de ROI (region of interest) gecentreerd of links-gecentreerd ligt. Ongeacht de oriëntatie van de foto, wordt de foto geschaald tot de langste zijde de volledige x-as of y-as van de gereserveerde ruimte bedekt. Met een altijd perfect uitgevulde banner op mobile, tablet én desktop als resultaat.

Prachtige visuele categoriepagina's

De topniveau categoriepagina's tonen geen producten, maar ingangen naar dieperliggende categorieën. Ze zijn erg belangrijk voor SEO. We wilden deze pagina's aantrekkelijk maken, zonder handmatig een afbeelding per categorie te maken. Onze oplossing vonden we in het vormen van één representatief beeld van een categorie, opgebouwd uit een compositie van productfoto's uit deze categorie. Het effect van één beeld bereiken we door afbeeldingen in perspectief te zetten, van buiten naar binnen de afbeeldingen steeds iets groter te maken en door fotorealistische schaduwen op de afbeeldingen te verwerken. Om het beeld 100% automatisch te kunnen genereren, pushten we de limieten van frontend development. Productfoto's zijn altijd van verschillende merken voor diversiteit, foto's worden gesorteerd op afmetingen en schaduwen worden gemasked op het contour van de onderliggende productafbeelding. Het geheel is een webcomponent, dus gedrag en design zijn gewaarborgd en data wordt aangeleverd via een API endpoint.

Da Case Phone Background
phone frame

Productgrid-onderbrekende banners

Veel bezoekers landen op categoriepagina's. Deze pagina's met een overzicht van producten zijn zeer functioneel en bieden weinig brand experience. We maakten categoriebanners om bezoeker te verleiden meer gelijksoortige pagina's te bezoeken en een sterk visueel huisstijl element aan deze pagina's toe te voegen. De banners worden volledig automatisch gegenereerd en schalen in afmeting perfect op mobiel.

Automatische koppeling actieproducten

DA brengt maandelijks een huis aan huis folder uit. In het ERP systeem worden alle actieproducten van een actieprijs voorzien, zodat ze in de winkels voor de juiste prijs worden aangeslagen op het kassasysteem. In de webshop wordt deze informatie geïmporteerd. Er wordt volledig automatisch een categorie in de webshop aangemaakt, een kortingsregel (met een start- en einddatum) aangemaakt en op productniveau een relatie gelegd tussen producten uit dezelfde actie.

Productlabels

DA gebruikt actielabels als 1+1 gratis of 2e halve prijs. Door limitaties van traditionele frontend technieken (browser compatibility, zoomniveau, font rendering), breekt het design van dergelijke labels snel. Om ze perfect te renderen moesten we het concept productlabel opnieuw uitvinden. Met HTML canvas definiëren we een kader waarbinnen tekst wordt opgeschaald tot het horizontaal volledig uitvuld. Een resize observer triggert een repaint op het moment dat de grootte veranderd (zoom, breakpoint).

Da Case Tablet Background
Da Case Tablet Image

Afrekenen op 1 pagina

Het afrekenproces is samengevat op één pagina. Dit vereenvoudigd het afrekenen door het aantal handelingen te verminderen. Een validatie op de geboortedatum controleert of een bezoeker ouder is dan 18 jaar indien de winkelwagen medicijnen bevat. Indien een klant niet zelf zijn (service)filiaal selecteert via de winkelzoeker, wordt op basis van verzendadres achter de schermen een automatische koppeling gelegd. Indien de inhoud van een bestelling bestaat uit depositaire producten (parfums), wordt gecontroleerd of deze daadwerkelijk door deze winkel worden verkocht. Zo niet, dan wordt een alternatief service filiaal gekoppeld aan de bestelling.

SOLR zoekfunctie

Voor DA implementeerden we SOLR als zoek engine. We bouwden een extra laag functionaliteit om de relevantie van zoekresultaten te verbeteren. Bij het typen van een zoekopdracht, worden altijd op basis van het eerste volledige (automatisch aangevulde) zoekwoord 3 producten getoond. Zo is de lijst met suggesties nooit leeg. Tijdens het zoeken kent SOLR een score toe. We realiseerden een regel gebaseerd systeem waarmee deze score kan worden beïnvloed. Zo is het mogelijk om aanbiedingen, veelverkochte producten of huismerkproducten een iets hogere score toe te kennen.

Winkelwagen tips

Bij het importeren van productdata, wordt de informatie beschikbaar over actieproducten vertaald naar een winkelwagen promotie regel. Een entiteit binnen Magento die op basis van de inhoud van de winkelwagen korting toepast. We ontwikkelden extra functionaliteit bovenop de bestaande mogelijkheden van het systeem om een notificatie te tonen in de winkelwagen en op de afrekenpagina. Indien de inhoud van een winkelwagen niet voldoet aan de condities van een promotie regel, dan wordt een klant hiervan op de hoogte gesteld.

Da Case Laptop Background
Laptop ShadowLaptop Frame