D.I.O. Drogist
Met meer dan 200 winkels is Dio Drogist één van de grote spelers in drogisterijland. Online wil de Beste Drogist van 2016 graag nog een prominente plek veroveren. Reach Digital realiseerde de nieuwe Magento Enterprise webshop, waarin we de bekende huisstijl uit de winkels vertaalden naar een moderne online omgeving.
Design
Dio beschikt over een enorm sterke papieren huisstijl. We vertaalden deze huisstijl naar een digitale identiteit die perfect 'uit de verf komt' op de apparaten waarmee bezoekers de webshop gebruiken. We versterken brand-awareness van klanten door de belangrijkste vormen, zoals de gekantelde ovaal, en kleuren op alle juiste plaatsen terug te laten komen op de webshop.
We selecteerden een groter en meer open font, speciaal compatible voor mobiel. Zonder de herkenbaarheid te verliezen. Whitespace, meer witte vlakken, en ritme in vormgeving van informatie zorgen voor rust. Dit is nodig, want de hoeveelheid informatie is groot.
Door de maandelijkse kleurenthema's van de folder op delen van de webshop terug te laten komen, creëren herkenbaarheid in de transitie van folder naar webshop. Een naadloze omni-channel ervaring.
Dynamische kortingsstickers
Om de link tussen offline en online te leggen, zijn kortingsstickers op dezelfde manier vormgegeven als in reclamefolders en POS materiaal in de winkel. Door stickers uit te lijnen met de hoogte van productfoto's, creëren we diepte. Zo wekken we de illusie dat ze echt op de producten zijn geplakt.
Optisch extra breed ontwerp
Vanwege accessibility (leesbaarheid op verschillende schermformaten), is er een maximale breedte die content voor webshops met een praktisch karakter mag hebben. Bij Diodrogist laten we beelden op een slimme technische manier nog een stuk doorlopen, waardoor ook op hoge resolutieschermen de pagina goed uitvuld.
Vrijstaande productfoto's
Dio beschikt over vrijstaande, in hoge resolutie beschikbare, productfoto's. We presenteren ze op diverse plaatsen op de webshop, zoals het gerelateerde producten blok, deels over een sfeerbeeld heen. Dit doet denken aan een productplank van een winkel en brengt een visueel speels element in de webshop.
Focus op mobiel
Diodrogist realiseert zich dat het mobiele gebruik van de nieuwe webshop nog veel meer zal stijgen. Het project had mobiele user experience dus als één van de hoofdonderwerpen. We bouwden de nieuwe webshops op basis van ons frontend framework gebaseerd op bootstrap. Met kant-en-klare mobiele UX componenten zoals navigatie, filters, search en winkelwagen overlay konden we efficient een kwalitatief hoogstaande gebruikerservaring realiseren.
3 Formules, 3 webshops
De DIO winkels zijn onderdeel van één van de drie formules; Care by Dio, Dio drogisterij en Dio Natuurdrogist. Omdat brand awareness is gekoppeld aan onder andere kleurgebruik en assortiment, realiseerden we één ontwerp dat werkt in drie verschillende kleuruitvoeringen. De drie formules hebben een eigen domeinnaam, maar draaien op één systeem.
Complexe logica uit maatwerk systeem
Het gekoppelde interne systeem Jupiter bevat veel complexe regels om kortingsprijzen te berekenen en relaties tussen producten te leggen. Met de doelstelling om in de webshop exact dezelfde aanbiedingen te kunnen bieden als in de 2-wekelijkse folders, bouwden we een mapping layer tussen de dataimport en Jupiter. Alle validaties en berekeningen gebeuren daar. Mocht het bedrijf ooit een ander ERP willen implementeren, dan hoeft slecht een deel van de koppeling te worden aangepast.
Magento Enterprise
De webshop van Diodrogist was een aantal jaar geleden opnieuw gebouwd, maar voldeed niet aan de eisen die het bedrijf heeft met de vernieuwde online focus. De techniek was achterhaald en omdat het maatwerk betrof was doorontwikkelen traag. De keuze op Magento Enterprise viel vanwege de schaalbaarheid, de mogelijkheid om de drie formules op één systeem te bouwen en de mogelijkheden voor mobiel.
Geautomatiseerde orderflow
Met alle aangesloten winkels, het distributiecentrum, magazijnmedewerkers en klantenservice was er grote behoefte in een beter georganiseerde logistieke processen. We werkten een nieuwe flow uit en automatiseerde alle communicatie tussen systemen en logsitieke partij PostNL. We bouwden een rollen en rechtensysteem zodat de juiste mensen op de juiste momenten bestellingen kunnen inzien, van status kunnen veranderen, kunnen annuleren of creditfacturen kunnen aanmaken.
UX en visual design
De store-locater is mobile-first ontworpen, om zo een perfecte gebruikerservaring op mobiel te garanderen. Met extra grote inputvelden en volledig uitvullende call to action buttons verminderen we onbedoelde touch events. Een vereenvoudigde versie van het logo met passende kleur geeft bezoekers een visuele indicatie bij welke formule een winkel hoort. Bij Reach Digital begrijpen we design conventies. Don't make me think. De volledige userflow, bestaande uit totaal 9 schermen, is gebaseerd op best practices van routeplan apps. Zo voelt de storelocator intuitief aan voor bezoekers die hem nooit eerder hebben gebruikt.
Ophalen in de winkel
Nieuw voor de winkeleigenaren van Dio, is de mogelijkheid om hun winkel als ophaallocatie aan te bieden aan hun klanten. Indien een ondernemer dit wenst, verschijnt de lokatie kiesbaar als (service)winkel in de winkelzoeker en in het afrekenproces. De bestelling verschijnt in een overzicht waarin de winkel de bestelling kan 'claimen'. Wordt de bestelling door bijvoorbeeld drukte in de winkel voor een afgesproken cut off time niet geclaimed, dan wordt deze automatisch doorgezet naar het centrale magazijn.
Inlog voor ondernemer
Iedere winkel heeft een mooie, gepersonaliseerde winkelpagina. Winkeleigenaren kunnen zelf afbeeldingen uploaden, tekst toevoegen en hun openingstijden instellen. Bestellingen van bezoekers komen binnen in een afgeschermde bestelomgeving van de winkeleigenaar. De winkeleigenaar kan er voor kiezen om de bestelling uit eigen voorraad te leveren, of eerst vanuit het distributiecentrum naar de winkel te laten sturen.
Online Aanbieder Medicijnen
Het CIGB hanteert strenge regels rondom het aanbieden van medicijnen online. Samen met Diodrogist hebben we horizontaal door de gebruikerervaring heen meldingen en informatie verwerkt om bezoekers te informeren over medische producten. Ook wordt bij het afrekenen van medicijnen het veld 'Geboortedatum' verplicht in het afrekenproces.
Omnichannel
Alle informatie over het assortiment en winkels wordt beheert vanuit het interne systeem Jupiter. We realiseerden een maatwerk koppeling met dit systeem, zodat prijzen in de webshops altijd up-to-date zijn en statussen van bestellingen in beide systemen aanwezig zijn. Zo zijn bijvoorbeeld de 1+1 acties in de winkel, gelijk aan de 1+1 acties in de webshop. De kleuren van de folder veranderen met iedere nieuwe uitgave en worden automatisch doorgevoerd in de webshop.
Toekomst
Met Reach Digital als e-commerce partner en het nieuwe Magento Enterprise platform, heeft Dio de mogelijkheid om zowel horizontaal als verticaal te groeien. Of het nu gaat om uitbreiden van het assortiment, complexe koppelingen met nieuwe platformen of aansluiten van nieuwe winkels. Op de roadmap voor 2018 staat webshop doorontwikkeling in de vorm van performance optimalisaties en verdere conversie optimalisatie.