Smart Shopper
Boodschappen vergelijken zonder elke Nederlandse productnaam te kennen.
Bruikbaarheid
Enquête na lancering · 45 gebruikers
Beoordelingen in gebruikerstests
Twee rondes · elk vijf deelnemers
Het probleem
Ik interviewde tien expats die net in Nederland woonden en bekeek zes diensten om boodschappen te vergelijken. Deelnemers vertaalden productnamen, vergeleken prijzen op supermarktwebsites en schreven elke week een nieuwe lijst.
Het overzicht van de klantreis liet nog een probleem zien: het product vinden in de winkel. Prijzen vergelijken hielp bij de voorbereiding, maar in de winkel moesten gebruikers de Nederlandse naam op het schap herkennen.
Vier rondes met schetsen
De eerste vier versies bleven schetsen terwijl mijn collega de Shopping Scraper API bouwde. De gegevensstructuur veranderde nog. Daarom wachtte ik met gedetailleerde schermen in Figma. Daarna bouwde ik de front-end met Ionic Angular en Bootstrap. Deze functies zijn uitgebracht. Het Pantry-idee hieronder is niet gebouwd.
Van zoeken naar boodschappenlijst
Houd beide productnamen zichtbaar
Wie in het Engels zoekt naar ‘milk’, krijgt Nederlandse productnamen zoals ‘volle melk’, met een Engelse beschrijving. De Nederlandse naam blijft op de boodschappenlijst staan, zodat gebruikers het product in de winkel kunnen vinden.
Geef verkeerde koppelingen een plek voor correctie
Ik plaatste ‘Matched from’ op de pagina met productdetails. Daarmee opent de gebruiker andere producten en prijzen. Zo was er geen correctieknop op elke regel van de lijst nodig, terwijl gebruikers een koppeling wel konden wijzigen.
Vergelijk de hele lijst
De lijst vergelijkt de kosten van boodschappen bij meerdere winkels met alles bij één winkel kopen. Gebruikers kunnen bepalen of de besparing een extra stop waard is. Daarna openen ze de route in Google Maps.
Gebruikers kunnen filteren op prijs per eenheid en afstand. De productdetails tonen ingrediënten en allergenen. Als een gekozen winkel geen passend product heeft, biedt de app vergelijkbare alternatieven.
Testen
Ik hield twee testrondes met elk vijf deelnemers. Testers vertelden dat ze boodschappenapps met één hand in de bus gebruiken, maar het zoekveld was te klein. Ik maakte het groter, plaatste het binnen bereik van de duim en voegde tekst toe aan de navigatie-iconen.
In de tweede ronde vonden we onduidelijke teksten. Die paste ik vóór de lancering aan. Daarna zag een externe ontwerper het icoon voor toevoegen aan de lijst aan voor een plakknop. Ik maakte het icoon eenvoudiger en het aanraakvlak groter.
Het opgeslagen Lighthouse-rapport toont 18 geslaagde automatische toegankelijkheidscontroles op de startpagina.
Het deel dat we niet bouwden
Gebruikers moesten nog steeds onthouden wat op de lijst voor de volgende week hoorde. Ik onderzocht een Pantry-functie voor de voorraad: een bon scannen, herkende producten controleren en eerdere aankopen gebruiken voor een voorstel voor de volgende lijst. Ik maakte ook een prototype voor een koppeling met een koelkast. Geen van beide is gebouwd.
Een bon vertelt wat iemand heeft gekocht, maar niet wat er nog over is. Voordat ik Pantry zou bouwen, zou ik testen hoeveel extra werk het kost om de voorstellen te verbeteren. Als dat langer duurt dan zelf een lijst schrijven, helpt de functie niet.