Multimarkt Ambachtsplein
Een online besteldienst voor de buurtsupermarkt. Van boodschappenlijst tot bezorging aan de deur, met de sfeer van de winkelvloer op elk scherm.
Inleiding
Multimarkt Ambachtsplein wilde de boodschappenervaring van de winkelvloer online beschikbaar maken: browsen per categorie, een boodschappenlijst opbouwen en die laten bezorgen, met dezelfde vertrouwde sfeer van de fysieke winkel. Voor dit project bouwde ik de webshop van de grond af op, eerst als lo-fi wireframes die de structuur en routes vastlegden. Daarna uitgewerkt tot een volledig gestyled ontwerp met de fotografie, kleuren en het gezicht van de winkel zelf.
Fase 1 — Lo-fi
Van structuur naar scherm
Voordat er fotografie of kleur aan te pas kwam, is de hele bestelroute eerst als grijze wireframes uitgetekend. Van de eerste landing tot de boodschappenlijst en de ondersteunende pagina's eromheen.
De basis
De homepage legt de belangrijkste routes vast: producten, acties, zoeken en contact, dit allemaal bereikbaar vanuit dezelfde hoofdnavigatie. Vanuit "producten" kom je op het categorie-overzicht: het startpunt voor elke bestelling.
Categorieën verkennen
Vanuit een hoofdcategorie als Vlees kies je een vleessoort: rund, kip, lam of kalkoen en land je op een grid met de losse producten daarbinnen. Een broodkruimelpad houdt op elke stap bij waar je bent, met een knop om weer een stap terug te gaan.
Een product bekijken en bestellen
Op de productpagina bepaal je de hoeveelheid en zie je meteen gerelateerde producten die je er ook bij zou kunnen bestellen. Alles wat je toevoegt komt samen op de boodschappenlijst, met een overzicht van aantallen, voordeel en het totaalbedrag.
Ondersteunende pagina's
Naast de bestelroute is er een pagina die vertrouwen moet wekken en een hulppagina met veelgestelde vragen en een contactformulier voor alles wat daar niet tussen staat.
Een ontwerpmoment
Van bevestiging naar deurmat
Een bestelling afronden is niet het einde van de reis. De klant wil ook weten wanneer de boodschappen aankomen. Na de bevestiging landt de klant daarom op een orderpagina met een kaart, een actuele aankomsttijd en de naam en het telefoonnummer van de bezorger, zodat er nooit onduidelijkheid is over wie er voor de deur staat.
Wil je op het laatste moment nog iets wijzigen aan de bestelling? Dan kan dat gewoon telefonisch, rechtstreeks vanaf diezelfde pagina.
“De gebruiker kan de tijd zien wanneer de bezorger aankomt.”
“De gebruiker kan contact opnemen voor wijzigingen.”
Fase 2 — Hi-fi
Van wireframe naar winkelervaring
Met de routes op hun plek kreeg elk scherm de fotografie, kleuren en het gezicht van de winkel zelf. Dezelfde stappen als hierboven, nu als werkend ontwerp.
Homepage
De homepage is strak gehouden in de kleuren van de supermarkt zelf, met een fotografische achtergrond die meteen het gevoel geeft dat je in de winkel staat. De navigatie is bewust kort gehouden, zodat bestellen zonder omwegen kan.
Kan een klant iets niet vinden? Onderaan de pagina staat een duidelijke uitnodiging om het kenbaar te maken, met een knop die direct naar het contactformulier leidt.
Productoverzicht
De lo-fi kaarten met simpele labels zijn hier vervangen door handgetekende illustraties in krijtbord-stijl als voorbeeld vlees, groente en fruit, peulvruchten, pasta, specerijen en snacks. Elke kaart is meteen te herkennen als een categorie, zonder dat er al een productfoto nodig is.
“Categoriekaarten zijn net de krijtbordjes in de winkel.”
Van categorie naar product
Op de Vlees-pagina zie je in één oogopslag de verschillende vleessoorten. Klik je door naar Kip, dan blijft het broodkruimelpad zichtbaar zodat altijd duidelijk is waar je bent. Natuurlijk is er een terugknop aanwezig voor wie toch nog even wil rondkijken in de vorige categorie.
Kiezen en toevoegen
Op de productpagina geeft de klant zelf de gewenste hoeveelheid per kilo aan, en verschijnen er suggesties voor producten die er goed bij passen. Alles wat wordt toegevoegd, komt samen op de boodschappenlijst met een helder overzicht van wat er is gekocht, hoeveel voordeel dat oplevert en wat het totaal is.
Vertrouwen en ondersteuning
De Over ons-pagina toont de openingstijden, het adres met een ingesloten kaart om de route op te zoeken en een telefoonnummer voor wie liever even belt. Op de Help-pagina staan de vragen die het vaakst gesteld worden. Denk aan: is het vlees halal, wat zijn de openingstijden, doen jullie aan catering. Met daaronder een contactformulier voor alles wat daar niet tussen staat.
Bestelling bevestigd
Na het afronden van de boodschappenlijst verschijnt een bevestiging die duidelijk maakt dat de bestelling is doorgekomen en wordt opgepakt met een verwijzing naar de orderpagina, waar de klant de bezorging vervolgens kan volgen.
Reflectie
Wat begon als een reeks grijze wireframes is uitgegroeid tot een webshop die de sfeer van de winkelvloer vasthoudt. Van de eerste klik tot aan de deur: krijtbord-illustraties in plaats van kale categorienamen, de slager zelf als gezicht van de winkel en een orderpagina die de klant niet in het ongewisse laat over wanneer de boodschappen aankomen.
Nieuwsgierig naar meer?
Bekijk de andere projecten in het portfolio, of neem gerust contact op als je hier meer over wilt weten.