Scan & Kook
Scan & Kook
Project overview
Project overview
Het probleem
In het kader van het tegengaan van voedselverspilling hebben wij de opdracht gekregen om een concept te ontwikkelen. Dit concept stelt de gebruiker in staat een foto van de inhoud van zijn of haar koelkast te maken. Op basis van de gescande ingrediënten ontvangt de gebruiker vervolgens passende recepten.
In het kader van het tegengaan van voedselverspilling hebben wij de opdracht gekregen om een concept te ontwikkelen. Dit concept stelt de gebruiker in staat een foto van de inhoud van zijn of haar koelkast te maken. Op basis van de gescande ingrediënten ontvangt de gebruiker vervolgens passende recepten.
Eerste ontwerpen
Eerste ontwerpen
Eerste ontwerpen
Op basis van het opgestelde Minimum Viable Product (MVP) ben ik gestart met het ontwerpen van de gebruikersinterface voor de verschillende schermen die binnen de applicatieflow vallen. Mijn focus lag vooral op het bestuderen van de manier waarop Albert Heijn op dit moment hun pagina's inricht, met specifieke aandacht voor de functionaliteit die zij al in de applicatie hebben, namelijk: Koken met overblijvers.
Op basis van het opgestelde Minimum Viable Product (MVP) ben ik gestart met het ontwerpen van de gebruikersinterface voor de verschillende schermen die binnen de applicatieflow vallen. Mijn focus lag vooral op het bestuderen van de manier waarop Albert Heijn op dit moment hun pagina's inricht, met specifieke aandacht voor de functionaliteit die zij al in de applicatie hebben, namelijk: Koken met overblijvers.
Product
Product
Product
Ingrediënt
Ingrediënt
Ingrediënt
De developers gaven aan dat het niet haalbaar is om producten rechtstreeks uit de Albert Heijn-database aan gebruikers te tonen. Ze kunnen echter wel worden omgezet naar ingrediënten. Op basis van hun feedback heb ik daarom een wijziging doorgevoerd.
De developers gaven aan dat het niet haalbaar is om producten rechtstreeks uit de Albert Heijn-database aan gebruikers te tonen. Ze kunnen echter wel worden omgezet naar ingrediënten. Op basis van hun feedback heb ik daarom een wijziging doorgevoerd.
Camera design
Camera design
Camera design
De kernfunctionaliteit van ons project is beeldherkenning en OCR (Optical Character Recognition). Hiervoor dienen gebruikers hun camera te gebruiken om foto's te maken van de ingrediënten die ze thuis hebben. Ik heb uitgebreid gekeken naar hoe de camera momenteel wordt gebruikt in de meest gangbare apps op mobiele telefoons, zoals WhatsApp, Instagram, Snapchat, en ook de standaard camerafunctie op de telefoon. Uiteindelijk heb ik gekozen voor de werkwijze die WhatsApp hanteert, omdat deze voor de meeste mensen herkenbaar zal zijn.
De kernfunctionaliteit van ons project is beeldherkenning en OCR (Optical Character Recognition). Hiervoor dienen gebruikers hun camera te gebruiken om foto's te maken van de ingrediënten die ze thuis hebben. Ik heb uitgebreid gekeken naar hoe de camera momenteel wordt gebruikt in de meest gangbare apps op mobiele telefoons, zoals WhatsApp, Instagram, Snapchat, en ook de standaard camerafunctie op de telefoon. Uiteindelijk heb ik gekozen voor de werkwijze die WhatsApp hanteert, omdat deze voor de meeste mensen herkenbaar zal zijn.
Validatie ingrediënten
Validatie ingrediënten
Validatie ingrediënten
Het valideren van ingrediënten is een essentiële functionaliteit binnen onze webapplicatie, omdat het gebruikers in staat stelt aan te geven of de ingrediënten die op de foto zijn herkend daadwerkelijk correct zijn.
Op het linker ontwerp oogt het nogal sober en weinig visueel aantrekkelijk. De foto die de gebruiker heeft genomen, wordt niet weergegeven, waardoor het mogelijk lastig is om te achterhalen welke ingrediënten op de foto zijn herkend.
In het rechter ontwerp is de interface al aanzienlijk visueler. Hier zie je direct welke ingrediënten correct zijn herkend en welke niet. Onder de herkende ingrediënten heb ik een standaard invoerveld geplaatst, zodat gebruikers ontbrekende ingrediënten kunnen toevoegen indien nodig. Als er weinig tot niets is herkend en de gebruiker besluit de foto opnieuw te nemen, kan hij op "Nee, opnieuw" klikken. Als alles klopt, heeft de gebruiker de optie om op "Ja, dit klopt" te klikken, of op "Ja, volgende" als er meer dan één foto is genomen.
Het valideren van ingrediënten is een essentiële functionaliteit binnen onze webapplicatie, omdat het gebruikers in staat stelt aan te geven of de ingrediënten die op de foto zijn herkend daadwerkelijk correct zijn.
Op het linker ontwerp oogt het nogal sober en weinig visueel aantrekkelijk. De foto die de gebruiker heeft genomen, wordt niet weergegeven, waardoor het mogelijk lastig is om te achterhalen welke ingrediënten op de foto zijn herkend.
In het rechter ontwerp is de interface al aanzienlijk visueler. Hier zie je direct welke ingrediënten correct zijn herkend en welke niet. Onder de herkende ingrediënten heb ik een standaard invoerveld geplaatst, zodat gebruikers ontbrekende ingrediënten kunnen toevoegen indien nodig. Als er weinig tot niets is herkend en de gebruiker besluit de foto opnieuw te nemen, kan hij op "Nee, opnieuw" klikken. Als alles klopt, heeft de gebruiker de optie om op "Ja, dit klopt" te klikken, of op "Ja, volgende" als er meer dan één foto is genomen.
Overzicht recepten
Overzicht recepten
Overzicht recepten
Van de stakeholders kreeg ik de feedback met waarom de ingrediënten zo prominent in beeld staan terwijl eigenlijk de focus meer moet gaan naar de gegenereerde recepten. Op basis van de feedback heb ik een nieuw ontwerp gemaakt waarin de recepten veel meer naar voren komen en de ingrediënten juist meer naar de achtergrond. De stakeholders waren zeer enthousiast over het nieuwe ontwerp.
Van de stakeholders kreeg ik de feedback met waarom de ingrediënten zo prominent in beeld staan terwijl eigenlijk de focus meer moet gaan naar de gegenereerde recepten. Op basis van de feedback heb ik een nieuw ontwerp gemaakt waarin de recepten veel meer naar voren komen en de ingrediënten juist meer naar de achtergrond. De stakeholders waren zeer enthousiast over het nieuwe ontwerp.
Camera test
Camera test
Camera test
Binnen het Userzoom-programma hebben we een kliktest uitgezet die door 67 verschillende gebruikers is uitgevoerd. Over het algemeen is de test goed gemaakt, maar af en toe vertoont het een beetje een vertekend beeld omdat het gebaseerd is op statische foto's in plaats van de live werking van de camera.
Bij de foto linksboven werd aan de gebruikers gevraagd: "Je hebt een foto gemaakt, waar zou je op klikken om nog een foto te maken?". Veel mensen hebben op de buitenste gebieden geklikt, wat we niet al te serieus nemen. Echter, opvallend is dat aardig wat mensen op de grote blauwe knop hebben geklikt in plaats van op het camera-icoontje linksonder. Hoewel er in verhouding meer mensen op het camera-icoontje hebben geklikt dan op de grote blauwe knop, blijft het aantal mensen dat op de blauwe knop heeft geklikt nog steeds te hoog. Tijdens de interne demo kwam al naar voren dat sommige mensen deze functionaliteit niet begrepen, waardoor het nodig is hier nog eens kritisch naar te kijken en eventueel iteraties door te voeren.
Desondanks werd de algehele flow goed begrepen door de gebruikers. Het is echter waardevol om de specifieke punten die voor verwarring zorgen te identificeren en gerichte verbeteringen aan te brengen.
Binnen het Userzoom-programma hebben we een kliktest uitgezet die door 67 verschillende gebruikers is uitgevoerd. Over het algemeen is de test goed gemaakt, maar af en toe vertoont het een beetje een vertekend beeld omdat het gebaseerd is op statische foto's in plaats van de live werking van de camera.
Bij de foto linksboven werd aan de gebruikers gevraagd: "Je hebt een foto gemaakt, waar zou je op klikken om nog een foto te maken?". Veel mensen hebben op de buitenste gebieden geklikt, wat we niet al te serieus nemen. Echter, opvallend is dat aardig wat mensen op de grote blauwe knop hebben geklikt in plaats van op het camera-icoontje linksonder. Hoewel er in verhouding meer mensen op het camera-icoontje hebben geklikt dan op de grote blauwe knop, blijft het aantal mensen dat op de blauwe knop heeft geklikt nog steeds te hoog. Tijdens de interne demo kwam al naar voren dat sommige mensen deze functionaliteit niet begrepen, waardoor het nodig is hier nog eens kritisch naar te kijken en eventueel iteraties door te voeren.
Desondanks werd de algehele flow goed begrepen door de gebruikers. Het is echter waardevol om de specifieke punten die voor verwarring zorgen te identificeren en gerichte verbeteringen aan te brengen.
Aanpassing camera design
Aanpassing camera design
Aanpassing camera design
Aangezien toch wel een aantal mensen moeite hadden met de werking van de camera heb ik gekeken naar hoe ik dit anders kon ontwerpen, zodat het de gebruikerservaring kon optimaliseren. De gebruiker kan met dit nieuwe ontwerp foto’s blijven maken totdat hij/zij beslist om de foto’s te bekijken. De precieze werking is zoals ook de camera functionaliteit werkt op je telefoon.
Het aangepaste ontwerp moet ervoor zorgen dat gebruikers beter door de flow heenlopen.
Aangezien toch wel een aantal mensen moeite hadden met de werking van de camera heb ik gekeken naar hoe ik dit anders kon ontwerpen, zodat het de gebruikerservaring kon optimaliseren. De gebruiker kan met dit nieuwe ontwerp foto’s blijven maken totdat hij/zij beslist om de foto’s te bekijken. De precieze werking is zoals ook de camera functionaliteit werkt op je telefoon.
Het aangepaste ontwerp moet ervoor zorgen dat gebruikers beter door de flow heenlopen.
Onboarding camera
Onboarding camera
Onboarding camera
Omdat we werken met GPT-4 turbo om producten te herkennen en deze om te zetten in ingrediënten zijn er een aantal voorwaarden waar de gebruiker rekening moet houden zodat de producten het best herkend kunnen worden. Deze punten heb ik verwerkt in een onboarding en dit krijgt de gebruiker te zien bij het eerste gebruik.
Mocht de gebruiker de onboarding per ongeluk afsluiten of weer opnieuw op willen roepen, dan kan de gebruiker op het informatie-icoontje rechtsboven op het scherm klikken.
Omdat we werken met GPT-4 turbo om producten te herkennen en deze om te zetten in ingrediënten zijn er een aantal voorwaarden waar de gebruiker rekening moet houden zodat de producten het best herkend kunnen worden. Deze punten heb ik verwerkt in een onboarding en dit krijgt de gebruiker te zien bij het eerste gebruik.
Mocht de gebruiker de onboarding per ongeluk afsluiten of weer opnieuw op willen roepen, dan kan de gebruiker op het informatie-icoontje rechtsboven op het scherm klikken.
Final flow
Final flow
Final flow
In de eerste week van ons project zijn we gestart met een brainstormsessie. Deze sessie omvatte de volledige groep van AH Tech Labs, omdat op dat moment de teams nog niet waren samengesteld voor de twee projecten. Het was belangrijk dat iedereen de kans kreeg om hun inbreng te leveren met betrekking tot de projecten. Toen vervolgens de groepjes waren samengesteld heeft de product owner een MVP samengesteld.
In de eerste week van ons project zijn we gestart met een brainstormsessie. Deze sessie omvatte de volledige groep van AH Tech Labs, omdat op dat moment de teams nog niet waren samengesteld voor de twee projecten. Het was belangrijk dat iedereen de kans kreeg om hun inbreng te leveren met betrekking tot de projecten. Toen vervolgens de groepjes waren samengesteld heeft de product owner een MVP samengesteld.
Bekijk ook mijn andere projecten
Bekijk ook mijn andere projecten
Bekijk ook mijn andere projecten
© 2025 Kevin Speek
© 2025 Kevin Speek
© 2025 Kevin Speek